Nyligen tog vi en titt på en riktigt solid ram från de bra på Twitter som heter Bootstrap. Denna verktygslåda är en swiss army knife of utilities och innehåller både ett funktionellt layoutgrid och tillräckligt förformade element för att få en bra hoppa på alla projekt.
Idag ska vi titta på ett mycket liknande verktyg från Joshua Gatcke som heter HTML KickStart. Denna ram är helt enkelt överflödig med bra saker som gör det möjligt för dig att bygga webbsidor prototyper med ljus hastighet. Låt oss hoppa in och bygga en sida med den för att se vad vi tycker.
Vad vi bygger
Innan vi hoppar in i vilken HTML KickStart är och hur du kan använda den, här är en snuskling vid det slutliga resultatet av dagens handledning:
demo: Klicka här för att starta.
Vad är HTML KickStart?
Enligt 99Lime.com (projektets hemsida) är HTML KickStart en ultralätt uppsättning av HTML5, CSS och jQuery (javascript) -filer, layouter och element som är utformade för att ge dig en headstart och spara dig 10 timmar på din nästa webbprojekt.?
Enligt detta uttalande kan detta projekt teoretiskt spara oss en eller flera flera hela arbetsdagar. Det är verkligen inget litet löfte! Hur går det bra på ett sådant krav? Genom att ge en stor uppsättning funktioner. Stör inte att fråga? Vad finns i HTML KickStart ?? I stället fråga, vad är det? inte i HTML KickStart ?? Svaret är förstås, inte mycket.?
Komma igång: Nav-menyn
För att se hur allt detta fungerar kommer vi att grova ut ett snabbt projekt. Om du vill följa med, ladda ner projektet och börja med HTML-sidan för provet, var noga med att ta bort alla hållareelement så att du har en ny blank skiffer.
Det första vi ska göra är att lägga till en toppnavigering. Om vi svänger på HTML KickStart-elementsidan hittar vi tre inbyggda menyalternativ att välja mellan.
Vi vill ha alternativet Horisontellt men så klickar vi på? Horisontal? fliken och hitta några exempelkod som vi kan använda för våra egna ändamål.
Systemet här är väldigt enkelt, du skapar helt enkelt en oorderad lista med menyn? klassen och varje listobjekt blir ett menyalternativ. Klassen? Aktuell? läggs till den aktuella sidan och underlistor kan användas för att skapa menyn för nedrullning.
Med bara den här lilla HTML- och noll CSS-arbetet ser vår meny bra ut och är perfekt funktionell. Som med CSS, är JavaScript-magiken redan omhändertagen för oss.
Observera att det redan finns en bakgrundsbild applicerad på vår kropp. Det här är standardnätbilden som följer med ramen, vi får se hur du byter ut det senare.
Välkomstmeddelande
Nästa vill vi lägga till en fin stor rubrik på vår sida för att välkomna alla besökare. Detta kommer att utnyttja de förkonstruerade typografiska stilarna.
H1- och p-taggarna innehåller redan vissa standard styling, men det finns inget på denna punkt som reglerar vår layout så vi behöver hjälpa till med några anpassade CSS.
För att starta, vill vi centrera den texten i fönstret. Stycket och rubriken har också en enorm marginal mellan dem, så vi måste strama upp det. Gå in i? Style.css? fil och starta en ny sektion med egna stilar. Sätt sedan in den här koden:
Med det ser vår rubrik ut. Den är perfekt centrerad har en kraftigt minskad vertikal höjd.
Använda rutnätet
Vi har inte riktigt behövt det ännu, men HTML KickStart kommer med ett förbyggt layoutnät. Om du någonsin har använt något som 960.gs tidigare kommer det inte att finnas några överraskningar här. Det är ditt grundläggande 12 kolumngrid som använder numrerade klasser (ex: col_5).
Som du kan se, för att få full bredd, behöver du summan av dina kolumnklassnummer för att lägga till upp till 12. Så om du vill dela upp sidan i halv så skapar du två div, som alla har klassen ? col_6? (6 + 6 = 12). Du kan göra det med en kombination som lägger till 12: col_7 + col_5, col_2 + col_10, etc.
För att testa detta gör vi vad jag alltid gör för att testa ett rutnät, kodar en grundläggande tre kolumnlayout. CSS för detta är redan på plats så att det är lika enkelt att skapa en tre kolumnlayout som att skapa tre div, var och en med col_4? klass.
I varje div kastar vi tre element: en rubrik (h3), en punkt och en bild. Plattformsbilder är gripna via placehold.it-tjänsten.
Allt du behöver göra är att ersätta? Grid.png? bild med ditt eget bakgrundsmönster. Jag tog tag i den här och släppte den bara för att ge vår sida lite kontrast.
Bildspel och knappar
Vi har fortfarande knappt skrapat ytan av de stora elementen som finns tillgängliga i denna ram. Låt oss byta ut en snabb ny sektion som använder några fler funktioner.
Här använder den en ful, icke-semantisk div för att rensa flottorna, men det här är en ganska vanlig praxis och är verkligen inte världens ände, så bli inte alltför upptagen med den.
För att ställa in sidfoten användes en del vadderande och färg och den lilla länken till toppen av sidan var prettied up a bit. Denna övergång är animerad via lite mer inbyggd inbyggd JavaScript.
Slutprodukt
Vi skulle kunna fortsätta gå med dagar med alla saker som finns i denna verktygslåda. Du hittar också förformade tabeller, formulär, bildgallerier, brödsmulor, flikar, horisontella regler och till och med prekodsutdrag.
Med det vi har gått igenom får du den grundläggande idén om hur allting fungerar. Dokumentationen är mycket noggrann, så allt du behöver göra är att hitta objektet du vill infoga, klistra in koden i din HTML och tweak efter behov. Här är en annan titt på sidan vi just byggt:
demo: Klicka här för att starta.
Vem är det för?
Nu när vi har sett på vilket sätt att använda HTML KickStart, är det viktigt att diskutera Varför du skulle använda den. Kanske ännu mer relevant är vem som bör tänka på att ge detta ett skott.
HTML KickStart, som de flesta fullt utrustade ramar och pannplattor, ger dig en väldigt solid utgångspunkt för dina utvecklingsprojekt, inte bara från en HTML-ståndpunkt, utan även för CSS och till och med JavaScript. Du bör tänka på att ta en titt om du inte för närvarande har ett system på plats som gör det enkelt att starta nya projekt.
? Den verkliga styrkan i dessa typer av verktyg är snabb prototyper?Tänk på att det finns mycket i det här verktyget, för mycket för många utvecklares smak. Du kan välja och välja vad du vill och lämna ut resten, men anser också att den verkliga styrkan i dessa typer av verktyg är snabb prototyper. I en färdig produkt kanske du vill ta dig tid att arbeta ut ett layoutschema och alla dessa bitar av styling manuellt, men i de första konceptstegen, varför inte uppgradera dina icke fungerande trådramar till något som vi byggt idag? Det är mycket mer interaktivt än en platt skiss och tar inte mycket mer tid att byta ut.
Är det något bra?
För att vara säker, detta är inte den enda produkten av sitt slag på marknaden. Det finns en miljon olika fria ramar där ute, var och en med sin egen grad av anpassad styling. Som jag nämnde ovan är det närmaste jag sett på HTML KickStart Twitter's Bootstrap. Faktum är att de två projekten är nästan identiska en överblick.
Efter att ha provat båda är det definitivt mycket jag tycker om Bootstrap bättre. Till att börja med är layouten lite snävare och docs går igenom avancerade funktioner som förskjutande kolumner. Jag gillar också Bootstraps typografi stilar bättre och uppskattar verkligen MINDER integrationen.
Det sägs att det finns några saker jag gillar om HTML KickStart som du inte hittar i Bootstrap. Till exempel är bildspelet en enorm bonus och något som jag verkligen skulle använda ganska lite. Dessutom fungerar alla JavaScript i HTML KickStart? Bara? medan jag var tvungen att göra mycket för att få saker som fungerade i Bootstrap.
I slutändan rekommenderar jag att du ger både en snabb provkörning för att se vilken du gillar bättre. Ännu bättre, använd både som inspiration för att utveckla din egen personliga ram som är skräddarsydd för dina behov.
Slutsats
HTML KickStart är ett fantastiskt projekt och jag uppskattar verkligen allt handarbete som har lagts in i det. När medlemmar i utvecklingssamhället distribuerar projekt som detta fritt, är jag alltid förvånad över deras generositet och vilja att hjälpa andra.
Hittills borde du ha en gedigen förståelse för vad HTML KickStart är, vad det gör, hur man använder det och huruvida det är rätt för dig. Lämna en kommentar nedan och låt oss veta vad du tycker. Hur jämför projektet med andra liknande verktyg som du har använt?