Hur Kickstart Din HTML

Ett primärt mål för alla utvecklare är snabbare utveckling, särskilt snabb bootstrapping. Det finns dussintals ramverk tillgängliga under de senaste åren som syftar till att få våra prototyper på några minuter.

Tyvärr går många av dessa ramar snabbt, eftersom projektkraven utvecklas och behöver uppdateras eller ersättas.

Om du letar efter ett nytt ramverk som löser de problem som äldre lösningar uppstår nu, samtidigt som du maximerar ditt arbetsflöde, kan du inte gå långt fel med HTML Kickstart.

Rutnätet

Rutenettet är en av de viktigaste aspekterna av alla ramar, speciellt eftersom ett flexibelt nät bestämmer hur lyhörd en webbplats kan vara.

HTML Kickstart ger oss möjligheten till ett flexibelt nät, eller ett vanligt (icke-flexibelt) nät - även om det inte är klart när du använder den senare med tanke på mobilenas ökande dominans.

För att skapa ett flexibelt nät med två lika stora kolumner brukar vi använda

Content Here
Content Here

Som vi kan se är allt vi har gjort lägga till några enkla klasser till tre divs. Om du föredrar det icke-flexibla nätet, behöver du bara ta bort flex klassnamnet från den yttre div.

(Observera att det flexibla nätet sträcker sig till hela skärmens bredd, medan det icke-flexibla nätet har en maximal bredd på 1024px.)

Förutom de baserade klasserna ovan finns det ett antal hjälparklasser som vi kan använda, till exempel:

• show-desktop och hide-desktop med dessa klasser kan du bestämma om du vill att nätet ska vara synligt på en stationär dator.
• show-tablett och hide-tablett gäller samma koncept här, men för tablet-enheter.
• show-phone och hide-phone igen, dessa klasser dikterar synlighet, den här gången för smarta telefoner.

Om vi ​​vill gömma våra två kolonnnät på smartphones, till exempel, skulle vi använda kod så här:

...

Navigering

HTML Kickstart ger oss tre menyalternativ: vertikalt vänster, vertikalt höger och horisontellt.

Den version du vill ha oftast är den horisontella menyn. För att koda den behöver vi bara oorderade listor:

#">  Del
Del
Punkt 3

Om du vill ha en vertikal vänster meny, lägg bara till vertikal till öppningen ul, och om du vill ha en vertikal höger meny, lägg till vertikal höger , så här:

...
...

Det är verkligen så enkelt att koda lyhörda menyer med HTML Kickstart.

Standardstilar

HTML Kickstart ger dig några bra grundläggande stilar från av. Självklart vill du förfina dem för ditt projekt, men för snabba prototyper är de mer än tillräckliga.

När det gäller typografi använder HTML KickStart Steve Matteson ’s Arimo typsnitt som standard. Du kan se hela sortimentet av typinställningar här.

Knäppstilar är alltid centralt för mycket uppmärksamhet i alla ramar, och HTML Kickstart kommer med knappar i alla former och storlekar. Du behöver inte ens använda klasser för detta, bara skapa en knapp tagg och stilar kommer automatiskt att tillämpas.

Om du föredrar knappstilarna som ska appliceras på en ankare, behöver du bara lägga till knappklassen till den:

Blue

Det finns också ett antal olika stilar vi kan tillämpa:

  Piller   Pop  Inset   Fyrkant 

Slutligen har vi också möjlighet att skapa en knappfält, med en syntax som liknar den horisontella menyn:

">  Radera

Bilder

HTML Kickstart hjälper till att förbättra UX genom att skapa popup-fönster för gallerier och bilder för dig. Det är en mycket bättre lösning än att öppna ett nytt fönster.

För att skapa ett fullt fungerande JavaScript-baserat popup-galleri behöver vi bara följande kod:

Det är enkelt att implementera, och du behövde inte en enda rad av JavaScript.

Bilder har också några bra hjälparklasser, till exempel bildtext. Den här klassen som tillämpas på en bild visar bildens titel som en stilad bildtext:

Vi har också justeringar och rätt -vänster klasser som vi kan använda för att flyta bilder till vänster och höger. (HTML Kickstart lägger till en liten marginal så att bilderna inte står emot texten.)

Och naturligtvis ger HTML Kickstart oss också enkla bildspel. Det använder BXSlider reglaget för att hantera detta.

Koden för en enkel reglage kommer att se något ut så här:

A Content Slider
This slider handles HTML content as well as images.

Skjutreglaget är beröringsaktiverat för mobila enheter, och än en gång behövde du inte en enda rad av JavaScript.

formulär

Det sista jag vill presentera dig för är former. Former är avgörande för alla ramar, eftersom de är en av de svåraste sakerna att stila på en webbsida.

HTML Kickstart behåller sin enkelhet när det gäller former, och en vertikal form kan skapas så enkelt som:

NameAge-- Choose --181920

Som du kan se har jag knappt behövt använda några klasser för detta formulär. Allt jag har gjort är att lägga klassen vertikal överst så att formelementen inte behandlas som inline.

En av mina favoritdelar av HTML Kickstart är de enkla felmeddelanden som används med formulär:

  Felmeddelande 
  Varningsmeddelande
  Framgångsmeddelande 

Slutsats

Det finns massor av alternativ som kommer med HTML Kickstart, vi har verkligen bara repat ytan; Det finns en stor uppsättning ikoner, verktygstips och även flikar.

Den verkliga styrkan i HTML Kickstart är enkelheten i sin kod. Bristen på utomstående divs och klasser gör det till en bra tidsbesparare, mindre kod betyder mindre fel. Om du vill komma igång med att koda din egen HTML från början, eller om du letar efter en enkel ram för att snabbt prototyper en design HTML är Kickstart ett bra alternativ.

Har du använt HTML Kickstart? Föredrar du en annan ram? Låt oss veta i kommentarerna.