Starten Sie Ihr Webprojekt mit HTML KickStart (CSS)

Vor kurzem haben wir uns einen wirklich soliden Rahmen von den guten Leuten bei Twitter namens Bootstrap angesehen. Dieses Toolkit ist ein Schweizer Taschenmesser und enthält sowohl ein funktionales Layout-Raster als auch genügend vorgefertigte Elemente, um bei jedem Projekt einen guten Start zu ermöglichen.

Heute schauen wir uns ein sehr ähnliches Werkzeug von Joshua Gatcke an, HTML KickStart. Dieses Framework ist einfach großartig und bietet die Möglichkeit, Prototypen von Webseiten mit geringer Geschwindigkeit zu erstellen. Lass uns rein springen und eine Seite damit erstellen, um zu sehen, was wir denken.

Was wir bauen

Bevor wir uns mit HTML KickStart beschäftigen und wie Sie es verwenden können, haben wir einen kurzen Einblick in das Endergebnis des heutigen Tutorials gegeben:

Demo: Klicken Sie hier, um zu starten.

Was ist HTML KickStart?

Laut 99Lime.com (der Homepage des Projekts) ist HTML KickStart ein ultra-schlanker Satz von HTML5-, CSS- und jQuery-Dateien (Javascript), Layouts und Elementen, die Ihnen einen Vorsprung verschaffen und Ihnen 10 Stunden an Arbeit ersparen nächstes Webprojekt.

Nach dieser Aussage könnte uns dieses Projekt theoretisch einen oder sogar mehrere volle Arbeitstage ersparen. Das ist sicherlich kein kleines Versprechen! Wie macht es einen solchen Anspruch geltend? Durch die Bereitstellung einer Vielzahl von Funktionen. Fragen Sie sich nicht, was ist in HTML KickStart? Stattdessen fragen, was ist nicht in HTML KickStart ?? Die Antwort ist natürlich "nicht viel".

Erste Schritte: Nav-Menü

Um zu sehen, wie das alles funktioniert, wollen wir ein kurzes Projekt ausarbeiten. Wenn Sie mitverfolgen möchten, laden Sie das Projekt herunter und beginnen Sie mit der Beispiel-HTML-Seite. Stellen Sie sicher, dass Sie alle Platzhalterelemente entfernen, um eine neue leere Seite zu erhalten.

Als erstes fügen wir eine obere Navigation hinzu. Wenn wir an der Seite der HTML-KickStart-Elemente vorbeischauen, finden wir drei eingebaute Menüoptionen zur Auswahl.

Wir möchten die Option "Horizontales Menü", damit wir auf "Horizontal" klicken. und finden Sie Beispielcode, den wir für unsere eigenen Zwecke verwenden können.

Das System hier ist wirklich unkompliziert, Sie erstellen einfach eine ungeordnete Liste mit dem? Menü? Klasse und jedes Listenelement wird zu einem Menüelement. Die Klasse? Aktuell? wird der aktuellen Seite hinzugefügt und es können Unterlisten zum Erstellen von Dropdown-Menüs verwendet werden.

  <ul> <li>Zuhause</li> <li>Über</li> <li>Dienstleistungen <ul> <li>Web-Design</li> <li>Web Entwicklung <ul> <li>E-Commerce</li> <li>Persönliches Portfolio</li> <li>Veröffentlichung</li> </ul> </li> <li>UX Consulting</li> </ul> </li> <li>Kontakt</li> </ul>

Mit nur wenigen HTML- und Zero-CSS-Elementen sieht unser Menü gut aus und ist perfekt funktionell. Wie bei CSS wird die JavaScript-Magie bereits für uns erledigt.

Beachten Sie, dass bereits ein Hintergrundbild auf unseren Körper angewendet wird. Dies ist das Standardrasterbild, das mit dem Framework geliefert wird. Wir werden später sehen, wie Sie dieses auslagern können.

Willkommensnachricht

Als nächstes möchten wir unserer Seite eine schöne große Schlagzeile hinzufügen, um Besucher willkommen zu heißen. Hierfür werden die vorgefertigten Typografiestile verwendet.

  <h1>Willkommen zu einer Design Shack Demo</h1> <p>Dies ist eine Demo von HTMLKickStart, einem Rapid-Prototyping-Tool von 99Lime.com.</p>

Die h1- und p-Tags enthalten bereits einige Standardstile, aber an diesem Punkt gibt es keine Regeln für unser Layout. Daher müssen wir dies mit benutzerdefiniertem CSS unterstützen.

Zunächst wollen wir diesen Text im Fenster zentrieren. Der Absatz und die Kopfzeile haben auch einen großen Abstand zwischen ihnen. Gehen Sie in die? Style.css? Datei und starten Sie einen neuen Abschnitt mit Ihren eigenen Stilen. Dann geben Sie diesen Code ein:

 .headline {text-align: center; } .headline h1 {margin-bottom: 0; } .headline p {margin-top: 0; }

Damit sieht unsere Überschrift großartig aus. Es ist perfekt zentriert und hat eine stark reduzierte vertikale Höhe.

Verwenden des Rasters

Wir haben es noch nicht wirklich gebraucht, aber HTML KickStart enthält ein vorgefertigtes Layoutraster. Wenn Sie jemals zuvor 960.gs verwendet haben, wird es hier keine Überraschungen geben. In diesem 12-Spaltengitter werden nummerierte Klassen verwendet (Beispiel: col_5).

Um die volle Breite zu erhalten, müssen Sie die Summe Ihrer Spaltenklassennummern auf 12 addieren. Wenn Sie also die Seite in zwei Hälften teilen möchten, erstellen Sie zwei Divs, von denen jede über die Klasse verfügt col_6? (6 + 6 = 12). Sie können dies mit jeder Kombination tun, die 12 ergibt: col_7 + col_5, col_2 + col_10 usw.

Um dies zu testen, tun wir das, was ich immer tue, um ein Rastersystem zu testen, indem wir ein einfaches dreispaltiges Layout erstellen. Das CSS dafür ist bereits vorhanden, also ist das Herausspalten eines dreispaltigen Layouts so einfach wie das Erstellen von drei Divs mit jeweils dem? Col_4? Klasse.

In jedem Div werden wir drei Elemente werfen: eine Überschrift (h3), einen Absatz und ein Bild. Platzhalterbilder werden über den Platzhalter-Dienst abgerufen.

  <h3>Spalte eins</h3> <p>Lorem ipsum dolor sitzen amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/jumpstart-your-web-project-with-html-kickstart_9.jpg"> <h3>Eine kleine Bereinigung</h3> <p>Wenn ich das Beispiel bis zu diesem Punkt betrachte, denke ich, dass der Inhalt meiner Meinung nach ein wenig an den Rand heranrückt. Um dies zu beheben, wickelte ich alles hinter dem Menü in einen? Col_12? div. Der Unterschied ist geringfügig, aber aus Whitespace-Perspektive fühlt es sich viel besser an. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/jumpstart-your-web-project-with-html-kickstart_10.jpg"> <h3>Hintergrund ändern</h3> <p>Während wir Dinge optimieren, gehen wir rein und tauschen die Hintergrundgrafik aus. Sie finden dies in der Datei style.css unter dem Layoutbereich.</p>     <textarea wrap="soft" readonly=""> /*--------------------------------- LAYOUT -------------- --------------------- * / body {margin: 0; Polsterung: 0; Farbe: # 000; background: #efefef url (css / img / grid.png) Wiederholung der Mitte oben; Schriftart: normal 0,9 em / 150% 'Arimo', "Trebuchet MS", Arial, Verdana, Sans-Serif; Text-Schatten: 0px 0px 1px transparent; / * google font pixelation fix * /}

Alles, was Sie tun müssen, ist das "grid.png" zu ersetzen. Bild mit Ihrem eigenen Hintergrundmuster. Ich schnappte mir dieses und legte es rein, um unserer Seite etwas Kontrast zu verleihen.

Diashows und Schaltflächen

Wir haben die Oberfläche der großartigen Elemente, die in diesem Rahmen verfügbar sind, noch kaum gekratzt. Lassen Sie uns einen schnellen neuen Abschnitt herausfiltern, der einige weitere Funktionen nutzt.

  <h1>Hier ist ein anderer Abschnitt</h1> <p>Diesmal verwenden wir eine Diashow und einen Button.</p>    <ul width="600" height="350"> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/jumpstart-your-web-project-with-html-kickstart_12.jpg"> <p>Ich habe mich für das einfache Blau für diese Schaltfläche entschieden, aber es ist genauso einfach, die anderen zu verwenden. Wenn Sie den Code aus den Beispielen auf der Website einfügen, können Sie loslegen. </p> <p>Hier sehen Sie, wie dieser Abschnitt aussieht. Auch ohne CSS oder JavaScript konnten wir einige beeindruckende Leistungen vollbringen!</p> <img src="//lesptitesaffairesdemayl.be/img/images_2/jumpstart-your-web-project-with-html-kickstart_13.jpg"> <h2>Fußzeile</h2> <img src="//lesptitesaffairesdemayl.be/img/images_2/jumpstart-your-web-project-with-html-kickstart_14.jpg"> <p>In Ihren Beispieldateien ist ein Beispiel für eine Fußzeile enthalten. Dies ist wichtig, weil es Ihnen zeigt, wie Sie aus dem Raster ausbrechen und einen farbigen Bereich in voller Breite festlegen können, mit dem ich in meinen eigenen Versuchen zu kämpfen hatte, bevor ich die Fußzeile bemerkte. </p>     <textarea wrap="soft" readonly="">   Diese Seite wurde mit HTML KickStart für Design Shack erstellt. oben

Hier wird ein hässlicher, nicht semantischer Div-Wert verwendet, um die Floats zu löschen, aber dies ist eine ziemlich übliche Praxis und ist nicht wirklich das Ende der Welt, daher sollte man sich nicht zu sehr damit beschäftigen.

Um die Fußzeile div zu gestalten, wurde etwas Polsterung und Farbe angewendet, und der kleine Link oben auf der Seite wurde ein wenig aufgepeppt. Dieser Übergang wird durch mehr ausgefallenes eingebautes JavaScript animiert.

 #footer {text-align: center; Polsterung: 20px; Marge: 0; Hintergrund: #efefef; Border-Top: 1px fest #ccc; Farbe: # 999; Schriftgröße: 0.8em; Text-Schatten: 0px 1px 1px #fff; } # link-top {float: right; Farbe: # 666; Textdekoration: keine; Anzeige: Inline-Block; Polsterung: 5px 10px; Hintergrund: # e5e5e5; Zeilenhöhe: 100%; -moz-border-radius: 3px; -webkit-border-radius: 3px; Grenzradius: 3px; }

Endprodukt

Wir könnten tagelang mit all dem Zeug, das in diesem Toolkit enthalten ist, weitermachen. Außerdem finden Sie vorgestylte Tabellen, Formulare, Bildergalerien, Breadcrumbs, Registerkarten, horizontale Regeln und sogar Code-Snippets.

Mit dem, was wir durchgemacht haben, bekommen Sie die Grundidee, wie alles funktioniert. Die Dokumentation ist sehr gründlich, so dass Sie wirklich nur das Element finden müssen, das Sie einfügen möchten, den Code dann in Ihren HTML-Code einfügen und nach Bedarf anpassen. Hier ist ein weiterer Blick auf die gerade erstellte Seite:

Demo: Klicken Sie hier, um zu starten.

Für wen ist das?

Jetzt haben wir gesehen Wie Um HTML KickStart verwenden zu können, ist es wichtig zu diskutieren Warum Du würdest es benutzen. Noch relevanter ist vielleicht, wer darüber nachdenken sollte.

Wie die meisten voll ausgestatteten Frameworks und Boilerplates bietet HTML KickStart Ihnen einen wirklich soliden Ausgangspunkt für Ihre Entwicklungsprojekte, nicht nur aus HTML-Sicht, sondern auch für CSS und sogar für JavaScript. Sie sollten sich überlegen, ob Sie noch nicht über ein System verfügen, das den Start neuer Projekte erleichtert.

? Die eigentliche Stärke dieser Toolkits liegt im Rapid Prototyping.

Denken Sie daran, dass dieses Toolkit eine Menge enthält, zu viele für den Geschmack vieler Entwickler. Sie können auswählen, was Sie möchten, und den Rest weglassen, aber Sie sind auch der Meinung, dass die wahre Stärke in diesen Arten von Toolkits das schnelle Prototyping ist. In einem fertigen Produkt möchten Sie sich vielleicht die Zeit nehmen, um ein Layoutschema und all diese Stilelemente manuell zu erarbeiten. Warum sollten Sie in den ersten Konzeptstadien nicht funktionsfähige Wireframes nicht auf das aktualisieren, was wir heute gebaut haben? Es ist viel interaktiver als eine flache Skizze und braucht nicht viel mehr Zeit, um auszusteigen.

Taugt es etwas?

Dies ist zwar nicht das einzige Produkt dieser Art auf dem Markt. Es gibt eine Million verschiedene freie Frameworks, die jeweils ihren eigenen individuellen Stil aufweisen. Wie ich bereits erwähnt habe, ist das, was ich HTML KickStart am nächsten gesehen habe, der Bootstrap von Twitter. Tatsächlich sind die beiden Projekte auf einen Blick nahezu identisch.

Nachdem ich beide ausprobiert habe, gefällt mir Bootstrap auf jeden Fall besser. Für den Anfang ist das Layout etwas straffer und die Dokumente durchlaufen erweiterte Funktionen wie das Versetzen von Spalten. Ich mag auch die Typografie-Stile von Bootstrap und schätze die LESS-Integration sehr.

Allerdings gibt es einige Dinge, die ich an HTML KickStart mag, die Sie nicht in Bootstrap finden. Zum Beispiel ist die Slideshow-Funktion ein großer Bonus und etwas, das ich wirklich viel verwenden würde. Außerdem funktioniert das gesamte JavaScript in HTML KickStart? während ich viel herumspielen musste, um Dinge in Bootstrap zum Laufen zu bringen.

Letztendlich empfehle ich Ihnen, beide eine schnelle Probefahrt zu machen, um zu sehen, was Ihnen besser gefällt. Besser noch, nutzen Sie beides als Inspiration für die Entwicklung Ihres persönlichen, auf Ihre Bedürfnisse zugeschnittenen Rahmens.

Fazit

HTML KickStart ist ein großartiges Projekt und ich schätze die Handarbeit wirklich sehr. Wenn Mitglieder der Entwicklungsgemeinschaft Projekte wie dieses frei verteilen, bin ich immer wieder überrascht, wie großzügig sie sind und bereit sind, anderen zu helfen.

Inzwischen sollten Sie ein fundiertes Verständnis dafür haben, was HTML KickStart ist, was es macht, wie es verwendet wird und ob es für Sie richtig ist oder nicht. Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken. Wie vergleicht dieses Projekt mit anderen ähnlichen Toolkits, die Sie verwendet haben?