Hvordan Kickstart HTML-koden din

Et primært mål for alle utviklere er raskere utvikling, spesielt rask oppstart. Det er dusinvis av rammer som er tilgjengelig de siste par årene, som tar sikte på å få våre prototyper på få minutter.

Dessverre går mange av disse rammene raskt, etter hvert som prosjektkravene utvikler seg, og må oppdateres eller erstattes.

Hvis du leter etter et nytt rammeverk som løser de problemene som eldre løsninger nå opplever, mens du fremdeles maksimerer arbeidsflyten din, kan du ikke gå langt galt med HTML Kickstart.

Gitteret

Gitteret er et av de viktigste aspektene i et hvilket som helst rammeverk, spesielt ettersom et fleksibelt grid bestemmer hvor responsivt et område kan være.

HTML Kickstart gir oss muligheten til et fleksibelt nett, eller et standard (ikke-fleksibelt) nett - selv om det ikke er klart når du bruker sistnevnte gitt den økende dominansen av mobile enheter.

For å lage et fleksibelt rutenett med to like store kolonner, bruker vi:

Content Here
Content Here

Som vi kan se er alt vi har gjort, legg til noen enkle klasser til tre divs. Hvis du foretrekker det ikke-fleksible nettverket, er alt du trenger å gjøre å fjerne flex klassenavnet fra den ytre div.

(Merk at det fleksible rutenettet strekker seg til bredden på hele skjermen, mens det ikke-fleksible rutenettet har en maksimal bredde på 1024px.)

I tillegg til de baserte klassene ovenfor er det en rekke hjelperklasser som vi kan bruke, for eksempel:

• show-desktop og hide-desktop med disse klassene kan du bestemme om du vil at nettverket skal være synlig på en stasjonær datamaskin.
• show-tablett og skjult-tablett gjelder det samme konseptet her, men for nettbrettetheter.
• show-phone og hide-phone igjen, disse klassene dikterer synlighet, denne gangen for smarte telefoner.

Hvis vi ønsket å gjemme våre to kolonne rutenett på smarttelefoner, for eksempel, ville vi bruke kode som dette:

...

Navigasjon

HTML Kickstart gir oss tre menyalternativer: vertikal venstre, vertikal høyre og horisontal.

Den versjonen du vil ha oftest, er den horisontale menyen. For å kode det trenger vi bare uordnede lister:

#">  Underelement
Underelement
Punkt 3

Hvis du vil ha en vertikal venstre meny, bare legg til vertikal til åpningen ul, og hvis du vil ha en vertikal høyre meny, legg til loddrett til høyre , slik som:

...
...

Det er så enkelt å kode responsive menyer med HTML Kickstart.

Standard stiler

HTML Kickstart gir deg noen flotte grunnleggende stiler fra av. Du vil selvsagt ønske å avgrense dem for prosjektet ditt, men for rask prototyping er de mer enn nok.

Når det gjelder typografi, bruker HTML KickStart Steve Matteson ‘s Arimo skrifttype som standard. Du kan se hele spekteret av typeinnstillinger her.

Knappstiler er alltid sentrum av stor oppmerksomhet i alle rammer, og HTML Kickstart leveres med knapper i alle former og størrelser. Du trenger ikke engang å bruke klasser for dette, bare opprett en knappetikett og stilene blir automatisk brukt.

Hvis du foretrekker knappestørrelsene som skal brukes på en ankermerke, må du bare legge til knappeklassen til den:

Blue

Det finnes også en rekke forskjellige stiler vi kan bruke:

  Pille   Pop  Inset   Torget 

Til slutt har vi også muligheten til å opprette en knappestang, med en syntaks som ligner på den horisontale menyen:

">  Slett

Bilder

HTML Kickstart bidrar til å forbedre UX ved å generere popup-vinduer for gallerier og bilder for deg. Det er en mye bedre løsning enn å åpne et nytt vindu.

For å opprette et fullt fungerende JavaScript-basert popup-galleri trenger vi bare følgende kode:

Det er enkelt å implementere, og du trenger ikke en enkelt linje med JavaScript.

Bilder har også noen flotte hjelperklasser, for eksempel bildetekst. Denne klassen som er brukt på et bilde, viser tittelen på bildet som et stilig bildetekst:

Vi har også justerings-rett og justering-venstre klasser som vi kan bruke til å flyte bilder til venstre og høyre. (HTML Kickstart vil legge til en liten margin slik at bildene ikke står opp mot teksten.)

Og selvfølgelig gir HTML Kickstart oss også enkle lysbildefremvisninger. Det bruker BXSlider skyvekontroll for å håndtere dette.

Koden for en enkel skyveknapp vil se slik ut:

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

Skyvekontrollen er berøringsaktivert for mobile enheter, og enda en gang trenger du ikke en enkelt linje med JavaScript.

skjemaer

Det siste jeg vil presentere deg til er skjemaer. Skjemaer er avgjørende for ethvert rammeverk, fordi de er en av de vanskeligste tingene på stilen på en nettside.

HTML Kickstart opprettholder sin enkelhet når det gjelder skjemaer, og en vertikal form kan opprettes så enkelt som:

NameAge-- Choose --181920

Som du kan se, har jeg neppe måtte bruke noen klasser i det hele tatt for dette skjemaet. Alt jeg har gjort er å legge klassen vertikal øverst slik at formelementene ikke blir behandlet som inline.

En av mine favorittdeler av HTML Kickstart er de enkle feilmeldingene som brukes med skjemaer:

  Feilmelding 
  Advarsel
  Suksessmelding 

Konklusjon

Det er tonnevis med alternativer som følger med HTML Kickstart, vi har egentlig bare skrapet overflaten; Det er et stort sett med ikoner, verktøytips og til og med faner.

Den virkelige styrken til HTML Kickstart er enkelheten til koden sin. Mangelen på fremmede divs og klasser gjør det til en flott tidsbesparende, mindre kode betyr mindre feil. Hvis du ønsker å komme i gang med å kode din egen HTML fra grunnen, eller hvis du leter etter en enkel ramme for å raskt prototype et design, er HTML Kickstart et godt alternativ.

Har du brukt HTML Kickstart? Foretrekker du et annet rammeverk? Gi oss beskjed i kommentarene.