Hoe Kickstart je HTML
Een eerste doel van alle ontwikkelaars is snellere ontwikkeling, met name snelle bootstrapping. Er zijn de afgelopen jaren tientallen frameworks beschikbaar die ervoor zorgen dat onze prototypen binnen enkele minuten zijn opgestart.
Helaas dateren veel van die raamwerken snel, omdat de projectvereisten evolueren en moeten worden vernieuwd of vervangen.
Als u op zoek bent naar een recent framework dat oplossingen biedt voor de problemen die oudere oplossingen ondervinden, terwijl u toch uw workflow maximaliseert, kunt u niet ver mis gaan met HTML Kickstart.
Het rooster
Het raster is een van de belangrijkste aspecten van elk raamwerk, vooral omdat een flexibel raster bepaalt hoe snel een site kan reageren.
HTML Kickstart biedt ons de mogelijkheid van een flexibel raster of een standaard (niet-flexibel) raster - hoewel het niet duidelijk is wanneer u dit laatste zou gebruiken gezien de toenemende dominantie van mobiele apparaten.
Om een flexibel raster te maken met twee gelijke kolommen, gebruiken we:
Content HereContent HereZoals je ziet, is alles wat we hebben gedaan om enkele eenvoudige klassen toe te voegen aan drie divs. Als je de voorkeur geeft aan het niet-flexibele raster, hoef je alleen maar de flex classname van de buitenste div te verwijderen.
(Houd er rekening mee dat het flexibele raster uitgerekt wordt tot de breedte van het volledige scherm, terwijl het niet-flexibele raster een maximale breedte van 1024 px heeft.)
In aanvulling op de bovenstaande klassen hierboven, zijn er een aantal helperklassen die we kunnen gebruiken, bijvoorbeeld:
- show-desktop en hide-desktop met deze klassen kun je beslissen of je wilt dat dat rooster zichtbaar is op een desktopcomputer.
- show-tablet en hide-tablet is hetzelfde concept hier van toepassing, maar dan voor tablets.
- show-phone en hide-phone nogmaals, deze klassen dicteren zichtbaarheid, dit keer voor smartphones.
Als we ons tweekolommenet op smartphones zouden willen verbergen, zouden we code als volgt gebruiken:
Navigatie
HTML Kickstart geeft ons drie menu-opties: verticaal links, verticaal rechts en horizontaal.
De versie die u het meest wilt, is het horizontale menu. Om het te coderen, hebben we alleen ongeordende lijsten nodig:
Als u een verticaal linkermenu wilt, voegt u gewoon verticaal toe aan de opening ul, en als u een recht verticaal menu wilt, voegt u verticaal rechts toe , zoals zo:
Het is echt zo eenvoudig om responsieve menu's te coderen met HTML Kickstart.
Standaard stijlen
HTML Kickstart geeft je een aantal fantastische basisstijlen vanaf het begin. Uiteraard wil je ze verfijnen voor je project, maar voor een snelle prototyping zijn ze meer dan voldoende.
Als het gaat om typografie die HTML KickStart gebruikt Steve Matteson ‘s Arimo lettertype standaard. U kunt het volledige bereik van type-instellingen bekijken hier.
Knoopstijlen zijn altijd het middelpunt van veel aandacht in elk kader en HTML Kickstart wordt geleverd met knoppen in alle soorten en maten. U hoeft hiervoor zelfs geen klassen te gebruiken, u hoeft alleen maar een knop te maken en de stijlen worden automatisch toegepast.
Als u liever wilt dat de knopstijlen worden toegepast op een ankertag, hoeft u alleen de knoopklasse eraan toe te voegen:
Er zijn ook een aantal verschillende stijlen die we kunnen toepassen:
Ten slotte hebben we ook de mogelijkheid om een knoppenbalk te maken, met een syntaxis vergelijkbaar met het horizontale menu:
Afbeeldingen
HTML Kickstart helpt UX te verbeteren door pop-ups voor galerijen en afbeeldingen voor u te genereren. Het is een veel betere oplossing dan een nieuw venster te openen.
Om een volledig functionele op JavaScript gebaseerde pop-upgalerij te maken, hebben we alleen de volgende code nodig:
Het is eenvoudig te implementeren en u had geen enkele regel JavaScript nodig.
Afbeeldingen hebben ook een aantal geweldige helperklassen, zoals bijschrift. Deze klasse toegepast op een afbeelding toont de titel van de afbeelding als een gestileerde bijschrift:
We hebben ook klassen met align-right en align-left die we kunnen gebruiken om afbeeldingen links en rechts te zweven. (HTML Kickstart voegt een kleine marge toe, zodat de afbeeldingen niet tegen de tekst staan.)
En natuurlijk biedt HTML Kickstart ons ook eenvoudige diavoorstellingen. Het gebruikt BXSlider schuif om dit aan te pakken.
De code voor een eenvoudige schuifregelaar ziet er ongeveer zo uit:
A Content Slider
This slider handles HTML content as well as images.
De schuifregelaar is aanraakbaar voor mobiele apparaten en u had wederom geen enkele regel JavaScript nodig.
vormen
Het laatste waar ik je aan wil voorstellen, zijn vormen. Formulieren zijn van vitaal belang voor elk kader, omdat ze een van de moeilijkste dingen zijn om op een webpagina te stijlen.
HTML Kickstart behoudt zijn eenvoud als het gaat om formulieren, en een verticale vorm kan net zo eenvoudig worden gemaakt als:
Zoals u kunt zien, heb ik bijna geen enkele vorm van lessen voor dit formulier hoeven te gebruiken. Het enige wat ik heb gedaan is de klasse verticaal aan de bovenkant toevoegen, zodat de formulierelementen niet als inline worden behandeld.
Een van mijn favoriete onderdelen van HTML Kickstart zijn de eenvoudige foutmeldingen die met formulieren worden gebruikt:
Conclusie
Er zijn tal van opties die met HTML Kickstart komen, we hebben echt alleen maar het oppervlak bekrast; er is een enorme set iconen, tooltips en zelfs tabbladen.
De echte kracht van HTML Kickstart is de eenvoud van de code. Het ontbreken van externe divs en klassen maakt het een geweldige tijdsbesparing, minder code betekent minder fouten. Als je op zoek bent om aan de slag te gaan met het coderen van je eigen HTML, of als je op zoek bent naar een eenvoudig raamwerk om snel een ontwerp te maken, dan is HTML Kickstart een geweldige optie.
Heb je HTML Kickstart gebruikt? Geef je de voorkeur aan een ander kader? Laat het ons weten in de comments.