Kode

Sådan Kickstart din HTML

Et primært mål for alle udviklere er hurtigere udvikling, især hurtig bootstrapping. Der er snesevis af rammer til rådighed i de sidste par år, der sigter mod at få vores prototyper op i få minutter.

Desværre går mange af disse rammer hurtigt, da projektkrav udvikler sig og skal opdateres eller udskiftes.

Hvis du leder efter en ny ramme, der løser de problemer, som ældre løsninger nu oplever, samtidig med at du maksimerer din arbejdsgang, kan du ikke gå langt forkert med HTML Kickstart.

Nettet

Gitteret er et af de vigtigste aspekter af enhver ramme, især da et fleksibelt net bestemmer, hvor følsomt et websted kan være.

HTML Kickstart giver os mulighed for et fleksibelt net, eller et standard (ikke-fleksibelt) net - selvom det ikke er klart, hvornår du bruger sidstnævnte, da mobilenhederne bliver mere og mere dominerende.

For at oprette et fleksibelt net med to lige store kolonner, ville vi bruge: 

Content Here
Content Here

Som du kan se, er alt, hvad vi har gjort, tilføjet nogle enkle klasser til tre divs. Hvis du foretrækker det ikke-fleksible net, skal du blot fjerne flex klassenavnet fra den ydre div.

(Bemærk, at det fleksible net strækker sig til bredden af ​​hele skærmen, mens det ikke-fleksible net har en maksimal bredde på 1024px.)

Udover de baserede klasser ovenfor er der en række hjælperklasser, som vi kan bruge, for eksempel:

  • show-desktop og hide-desktop med disse klasser kan du bestemme, om du vil have, at nettet skal være synligt på en stationær computer.
  • show-tablet og hide-tablet gælder det samme koncept her, men for tablet-enheder.
  • show-phone og hide-phone igen, disse klasser dikterer synlighed, denne gang for smarte telefoner.

Hvis vi gerne vil skjule vores to søjleregister på smartphones, vil vi for eksempel bruge kode som denne: 

...

Navigation

HTML Kickstart giver os tre menuvalg: lodret venstre, lodret højre og vandret.

Den version, du vil have mest brug for, er den vandrette menu. For at kode det, behøver vi bare uordnede lister: 

  • Punkt 3

    • Hvis du vil have en vertikal venstre menu, skal du blot tilføje lodret til åbningen ul, og hvis du vil have en vertikal højre menu, skal du tilføje lodret til højre som sådan: 

      ...
      ...

    Det er virkelig så nemt at kode responsive menuer med HTML Kickstart.

    Standard stilarter

    HTML Kickstart giver dig nogle gode grundlæggende stilarter fra off. Det er klart, at du vil forfine dem til dit projekt, men for hurtig prototyping er de mere end tilstrækkelige.

    Når det kommer til typografi, bruger HTML KickStart Steve Matteson ’s Arimo skrifttype som standard. Du kan se hele sortimentet af typeindstillinger her.

    Knap stilarter er altid centrum for en masse opmærksomhed i enhver ramme, og HTML Kickstart leveres med knapper i alle former og størrelser. Du behøver ikke engang bruge klasser til dette, bare opret en knap tag og stilarterne vil automatisk blive anvendt.

    Hvis du foretrækker de knapper, der skal anvendes på et ankermærke, skal du blot tilføje knappen til den:

    Der er også en række forskellige stilarter, vi kan anvende: 

         Pop

    Endelig har vi også mulighed for at oprette en knaplinje med en syntaks svarende til den vandrette menu:

    Billeder

    HTML Kickstart hjælper med at forbedre UX ved at generere pop-ups til gallerier og billeder til dig. Det er en meget bedre løsning end at åbne et nyt vindue.

    For at oprette et fuldt funktionelt JavaScript-baseret pop-up-galleri er alt, hvad vi har brug for, den følgende kode:

    Det er nemt at implementere, og du behøvede ikke en enkelt linje med JavaScript.

    Billeder har også nogle gode hjælperklasser, såsom billedtekster. Denne klasse anvendt på et billede viser billedets titel som en formateret billedtekst:

    Vi har også lige-rettede og justeret-venstre klasser, som vi kan bruge til at flyde billeder til venstre og højre. (HTML Kickstart vil tilføje en lille margen, så billederne ikke støder op til teksten.)

    Og selvfølgelig giver HTML Kickstart os også enkle lysbilledshow. Det bruger BXSlider skyderen til at håndtere dette.

    Koden for en simpel skyder vil se sådan ud: 

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

    Skyderen er berøringsaktiveret til mobile enheder, og endnu engang behøvede du ikke en enkelt linje med JavaScript.

    Forms

    Det sidste, jeg vil introducere dig til, er formularer. Former er afgørende for enhver ramme, fordi de er en af ​​de sværeste ting at style på en webside.

    HTML Kickstart opretholder sin enkelhed, når det kommer til formularer, og en lodret form kan oprettes som simpelthen som:

    Som du kan se, har jeg næppe haft brug for nogen klasser for denne formular. Alt jeg har gjort er at tilføje klassen lodret øverst, så formelementerne ikke behandles som inline.

    En af mine foretrukne dele af HTML Kickstart er de enkle fejlmeddelelser, der bruges med formularer: 

      Fejlmeddelelse 
      Advarselsmeddelelse
      Succesmeddelelse

    Konklusion

    Der er masser af muligheder, der følger med HTML Kickstart, vi har virkelig kun ridset overfladen; der er et stort sæt ikoner, værktøjstip og endda faner.

    Den virkelige styrke i HTML Kickstart er enkelheden af ​​sin kode. Manglen på fremmede divs og klasser gør det til en god tidsbesparende, mindre kode betyder mindre fejl. Hvis du ønsker at komme i gang med at kode din egen HTML fra bunden, eller hvis du leder efter en enkel ramme for hurtigt at prototype et design, er HTML Kickstart en god mulighed.

    Har du brugt HTML Kickstart? Foretrækker du en anden ramme? Lad os vide i kommentarerne.

    html rammer begyndelsen html html kode html hjælpere html kickstart html prototyping lærer html