Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

HTML KickStart: Schlanker Baukasten für HTML5, CSS, jQuery & Co.

    HTML KickStart: Schlanker Baukasten für HTML5, CSS, jQuery & Co.

„HTML KickStart“ erleichtert die Arbeit eines Webworkers ungemein und bietet einen umfangreichen Baukasten für alle möglichen Website-Elemente wie z.B. jQuery-JavaScripts, CSS3-Buttons, Galerien, Icons, Menüs und viele mehr. Denn jeder Webworker kennt das Problem: Wenn man mit einer neuen Website beginnt, sucht man meist erst nach z.B. geeigneten JavaScript-Komponenten für eine Bilder-Slideshow. Dann baut man die Komponente in die eigene Website ein, liest die Doku dazu, konfiguriert und styled das Gefundene. Zuletzt muss man seine Site noch in allen gängigen Browsern durchtesten. Wir stellen euch HTML KickStart kurz vor.

CSS3-Buttons mit HTML KickStart

Rapid Prototyping für Webprojekte

HTML KickStart ist ein frei verfügbares HTML-Framework von Joshua Gatcke für die flotte Erstellung von Website-Prototypen. Dabei lässt HTML KickStart keine Wünsche offen und bringt vorgefertigte Komponenten für alle möglichen Website-Elemente mit, mit denen man bei neuen Webprojekten viel Zeit und Arbeit sparen kann. Wie auf der Projektseite 99Lime.com beschrieben, beinhaltet HTML KickStart vorgestylte HTML5-, CSS-, jQuery- und Layout-Elemente. Auch über Cross-Browser-Tauglichkeit muss man sich bei HTML KickStart keine Gedanken machen. Die Elemente sind alle in gängigen Browsern wie Safari, Chrome, Firefox, Opera und Internet Explorer vorgetestet.

Workflow in HTML Kickstart

HTML KickStart wurde schon über 16.000 Mal herunter geladen. Als Download bekommt man ein übersichtliches Zip-Archiv mit einer schlichten Dummy-Site. Öffnet man die blank.html im Editor, kann es schon losgehen mit dem Anpassen. Hier ein Screenshot zu der blank.html aus dem HTML KickStarter zip-Archiv:

 

Elemente „out of the box“ in HTML KickStarter

Egal ob Brotkrumenpfade, Bildergalerien, CSS3-Buttons, Fomulare, Listen, Grid-Layouts, Icons oder Bilderstyles – HTML KickStart bietet Quellcodevorlagen für all diese Elemente und mehr. Unter HTML KickStart Elemente findet man eine übersichtliche Auflistung aller verfügbaren Komponenten mit Quellcode-Snippets – oft auch in mehreren Varianten.

Komponenten in HTML KickStart

Für Menüs gibt es auf der Elemente-Übersicht z.B. drei schicke Versionen, die man einfach über Kopieren des Quellcodes in die eigene Seite einfügt. Auch ohne die CSS-Styles anzupassen, erhält man so schon ein schönes und voll funktionstüchtiges Menü mit ausklappbaren Unterelementen. Hier ein Code-Beispiel mit Vorschau zu einer Slideshow-Komponente in HTML KickStart:

Slideshow-Komponente in HTML KickStart

Bei Designshack gibt es ein tolles Tutorial, das wunderbar zeigt, wie schnell man mit HTML KickStart ins Laufen kommt, wenn man sich ein bisschen im HTML- und CSS-Code zurecht findet. Innerhalb kürzester Zeit wurde dort mit HTML KickStart ein schickes dreispaltiges Grid-Layout mit Headline, horizontalem Menu, eigenem Hintergrund, Slideshow, Buttons und Footer erstellt. Hier ein Screenshot des Designshack Demo-Layouts mit HTML KickStart:

HTML KickStart Demo-Website aus dem Designshack Tutorial

HTML KickStart ist eine echte Arbeitserleichterung bei der effizienten Erstellung von Website-Mockups für Rapid Prototyping und als Vorlage für eigene Webprojekte. Es spart Unmengen an Handarbeit für das Zusammensuchen, Stylen und Platzieren von Website-Elementen. Alle JavaScripts in HTML KickStart funktionieren so wie sie sind – ohne dass man weitere Energie darauf verwenden muss.

Natürlich gibt es noch zahlreiche weitere freie Web-Frameworks. Bootstrap von Twitter ist HTML KickStart dabei wohl am ähnlichsten.

Bildergalerie zu HTML KickStart

http://t3n.de/news/wp-content/uploads/2012/01/KickStart_Dummy-Layout-595x275.jpg

1 von 12

http://t3n.de/news/wp-content/uploads/2012/01/KickStart_99Lime_Logo.png

2 von 12

Wireframing mit HTML KickStart
Wireframing mit HTML KickStart

3 von 12

http://t3n.de/news/wp-content/uploads/2012/01/KickStart_Listenbeispiel-595x241.png

4 von 12

http://t3n.de/news/wp-content/uploads/2012/01/Kickstart_Old-New_Way-595x275.png

5 von 12

Workflow in HTML Kickstart
Workflow in HTML Kickstart

6 von 12

HTML KickStart Demo-Website aus dem Designshack Tutorial
HTML KickStart Demo-Website aus dem Designshack Tutorial

7 von 12

Quellcode für ein horizontales Menu mit HTML KickStart  aus dem Designshack Tutorial
Quellcode für ein horizontales Menu mit HTML KickStart aus dem Designshack Tutorial

8 von 12

Horizontales Menü mit HTML KickSatrt aus dem Designshack Tutorial
Horizontales Menü mit HTML KickSatrt aus dem Designshack Tutorial

9 von 12

CSS3-Buttons mit HTML KickStart
CSS3-Buttons mit HTML KickStart

10 von 12

Slideshow-Komponente in HTML KickStart
Slideshow-Komponente in HTML KickStart

11 von 12

Komponenten in HTML KickStart
Komponenten in HTML KickStart

12 von 12

Weiterführende Links:

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

3 Reaktionen
anonym
anonym

ansich tolle sache, aber mir fehlen einige fallbacks, falls javascript deaktiviert ist. Da wurden einige sachen nicht bis zum ende durchdacht.

Antworten

skydivematy
skydivematy

Auch erwähnenswert - YAML4.
YET ANOTHER MULTICOLUMN LAYOUT - CONTINUOUSLY DEVELOPED SINCE 2005

Antworten

Sipatshi
Sipatshi

Hallo,

einfach genial ;)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen