Bygg Responsive Websites Faster With Semantic UI
Frontend rammeverk som Bootstrap er fortsatt alle raseri. Det er dusinvis av gode valg å velge fra, men en som nylig har tatt min oppmerksomhet er Semantisk brukergrensesnitt.
Bevilget dette biblioteket har eksistert en stund, dateres tilbake noen år. Men den nyeste versjonen av versjon 2.2 kommer med en rekke ekstra funksjoner og beviser at Semantic kommer til å være rundt for lang tid.
Med dusinvis av CSS variabler, enkle responsive klasser, og Enkle oppsett, Du har ingen problemer med å arbeide med Semantisk brukergrensesnitt på egen hånd.
De enkle klassenavn og rutenettstrukturer virkelig gi mening om at dette rammene blir kalt “semantisk”. Klassene er veldig fornuftige, og dette gjør at HTML enkelt leses på avstand.
Det kommer med jQuery-støtte for dynamiske sideelementer for eksempel karuseller og rullegardinmeny, velg menyer.
Hvert HTML-element under solen er tilpasset og fullt funksjonell med semantisk brukergrensesnitt. Dette inkluderer HTML5-elementer pluss ekstra funksjonalitet som rangeringer og tilpassede faner.
Men kanskje den beste delen av semantisk er tema oppsett. Ikke bare får du tonn pre-designet stiler og dynamiske elementer, men du kan også restylere disse selv bygger på toppen av Semantics kode.
Hele biblioteket utgjør 3.000 + tema variabler Du kan endre i Sass eller ved å utvide ditt eget stilark. I tillegg kommer Semantisk brukergrensesnitt pakket med ni standard temaer:
- Semantisk standard
- Lubben
- Oppvokst
- Classic
- Google Material
- Amazon
- Bootstrap
- GitHub
Dette er bare toppen av isfjellet, og de handler mer som utgangspunkt for å designe ditt eget tema.
Hvis du bygger en ny destinasjonsside eller egendefinert nettside fra grunnen av, så ser du på alvor å jobbe med Semantisk brukergrensesnitt. Det er helt gratis og åpen kildekode med god dokumentasjon på nettet.
Du kan bla gjennom layout stiler, sammen med guider for alle hovedelementene og tilpassede temaer.
Og du kan laste ned en kopi av kildekoden direkte fra GitHub, som også inkluderer en guide for nybegynnere.
