Wie starte ich Ihren HTML-Code?
Ein primäres Ziel aller Entwickler ist eine schnellere Entwicklung, insbesondere schnelles Bootstrapping. In den letzten Jahren sind Dutzende von Frameworks verfügbar, die darauf abzielen, dass unsere Prototypen in wenigen Minuten erstellt werden können.
Leider sind viele dieser Frameworks schnell da, wenn sich die Projektanforderungen ändern, und müssen aktualisiert oder ersetzt werden.
Wenn Sie nach einem neuen Framework suchen, das die Probleme löst, mit denen ältere Lösungen jetzt konfrontiert sind, während Sie gleichzeitig Ihren Arbeitsablauf maximieren, können Sie damit nicht viel falsch machen HTML Kickstart.
Das Gitter
Das Grid ist einer der wichtigsten Aspekte eines Frameworks, zumal ein flexibles Grid bestimmt, wie reaktionsfähig eine Site sein kann.
HTML Kickstart bietet uns die Möglichkeit eines flexiblen Grids oder eines standardmäßigen (nicht-flexiblen) Grids - obwohl es nicht klar ist, wann letzteres angesichts der zunehmenden Dominanz von mobilen Geräten verwendet wird.
Um ein flexibles Raster mit zwei gleich großen Spalten zu erstellen, verwenden wir:
Content HereContent HereWie Sie sehen können, haben wir lediglich drei einfache Klassen zu drei Divs hinzugefügt. Wenn Sie das nicht flexible Raster bevorzugen, müssen Sie nur den Flex- Klassennamen aus dem äußeren Teil entfernen.
(Beachten Sie, dass sich das flexible Raster auf die Breite des gesamten Bildschirms erstreckt, während das nicht flexible Raster eine maximale Breite von 1024 Pixeln aufweist.)
Zusätzlich zu den oben genannten Basisklassen gibt es eine Reihe von Hilfsklassen, die wir verwenden können, zum Beispiel:
- show-desktop und hide-desktop Mit diesen Klassen können Sie entscheiden, ob das Raster auf einem Desktop-Computer sichtbar sein soll.
- show-tablet und hide-tablet das gleiche konzept gilt hier, aber für tablet-geräte.
- Show-Phone und Hide-Phone noch einmal, diese Klassen diktieren Sichtbarkeit, dieses Mal für Smartphones.
Wenn wir beispielsweise unser zweispaltiges Raster auf Smartphones verstecken wollten, würden wir Code wie diesen verwenden:
Navigation
HTML Kickstart gibt uns drei Menüoptionen: vertikal links, vertikal rechts und horizontal.
Die Version, die Sie am häufigsten wünschen, ist das horizontale Menü. Um es zu codieren, brauchen wir nur ungeordnete Listen:
Wenn Sie ein vertikales linkes Menü wünschen, fügen Sie einfach vertikal zur Öffnung ul hinzu, und wenn Sie ein vertikales rechtes Menü möchten, fügen Sie vertikales Recht hinzu , etwa so:
Es ist wirklich so einfach, responsive Menüs mit HTML Kickstart zu programmieren.
Standardstile
HTML Kickstart gibt Ihnen einige tolle grundlegende Stile von der Off. Natürlich möchten Sie sie für Ihr Projekt verfeinern, aber für Rapid Prototyping sind sie mehr als ausreichend.
Wenn es um Typografie geht, verwendet HTML KickStart Steve Matteson Ist es Arimo Schrift standardmäßig. Sie können den gesamten Bereich der Typeinstellungen sehen Hier.
Schaltflächenstile stehen in jedem Framework immer im Mittelpunkt, und HTML Kickstart kommt mit Schaltflächen in allen Formen und Größen. Sie müssen dazu nicht einmal Klassen verwenden, sondern einfach ein Button-Tag erstellen und die Stile werden automatisch angewendet.
Wenn Sie möchten, dass die Schaltflächenstile auf ein Anker-Tag angewendet werden, müssen Sie nur die Schaltflächenklasse hinzufügen:
Es gibt auch eine Reihe verschiedener Stile, die wir anwenden können:
Schließlich haben wir auch die Möglichkeit, eine Buttonleiste mit einer dem horizontalen Menü ähnlichen Syntax zu erstellen:
Bilder
HTML Kickstart hilft UX zu verbessern, indem er Popups für Galerien und Bilder für Sie erstellt. Es ist eine viel bessere Lösung als ein neues Fenster zu öffnen.
Um eine voll funktionsfähige JavaScript-basierte Popup-Galerie zu erstellen, benötigen wir nur den folgenden Code:
Es ist einfach zu implementieren und Sie benötigen keine einzige JavaScript-Zeile.
Bilder haben auch einige großartige Hilfsklassen, wie zum Beispiel Bildunterschriften. Diese Klasse, die auf ein Bild angewendet wird, zeigt den Titel des Bilds als formatierte Beschriftung:
Wir haben auch linksbündige und linksbündige Klassen, mit denen wir Bilder links und rechts schweben lassen können. (HTML Kickstart fügt einen kleinen Rand hinzu, damit die Bilder nicht mit dem Text übereinstimmen.)
Natürlich bietet HTML Kickstart auch einfache Diashows. Es benutzt BXSlider Schieberegler, um dies zu handhaben.
Der Code für einen einfachen Schieberegler sieht etwa so aus:
A Content Slider
This slider handles HTML content as well as images.
Der Schieberegler ist für mobile Geräte berührungsaktiv, und Sie benötigten auch hier keine JavaScript-Zeile.
Formen
Das letzte, was ich euch vorstellen möchte, sind Formen. Formulare sind für jedes Framework von entscheidender Bedeutung, da sie zu den schwierigsten Dingen gehören, die auf einer Webseite gestaltet werden müssen.
HTML Kickstart behält seine Einfachheit, wenn es um Formulare geht, und eine vertikale Form kann einfach erstellt werden als:
Wie Sie sehen können, musste ich für dieses Formular kaum Klassen verwenden. Ich habe nur die Klasse vertikal oben hinzugefügt, damit die Formularelemente nicht als Inline behandelt werden.
Einer meiner Lieblingsteile von HTML Kickstart sind die einfachen Fehlerhinweise, die bei Formularen verwendet werden:
Fazit
Es gibt Unmengen von Optionen, die mit HTML Kickstart kommen, wir haben wirklich nur an der Oberfläche gekratzt; Es gibt eine große Auswahl an Icons, Tooltips und sogar Tabs.
Die wahre Stärke von HTML Kickstart ist die Einfachheit seines Codes. Das Fehlen überflüssiger divs und Klassen spart Zeit, weniger Code bedeutet weniger Fehler. Wenn Sie beginnen, Ihr eigenes HTML von Grund auf neu zu programmieren, oder wenn Sie nach einem einfachen Framework suchen, um ein Design schnell zu entwerfen, ist HTML Kickstart eine gute Option.
Hast du HTML Kickstart benutzt? Bevorzugen Sie einen anderen Rahmen? Lassen Sie es uns in den Kommentaren wissen.