Bygg Responsive Websites Faster With Semantic UI

Frontend rammer 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. Den nyeste versjonen av versjon 2.2 kommer imidlertid med en rekke tilleggsfunksjoner og viser at Semantic kommer til å være rundt i langdistanse.

Med dusinvis av CSS-variabler, enkle responsive klasser og enkle oppsettoppsett, har du ingen problemer med å arbeide med Semantisk brukergrensesnitt på egen hånd.

De enkle klassenavnene og rutenettstrukturen gir virkelig mening til at dette rammene kalles "semantisk". Klassene er veldig fornuftige, og dette gjør at HTML enkelt leses på avstand.

Den kommer til og med med jQuery-støtte for dynamiske sideelementer som karuseller og dropdown-menyer.

Hvert HTML-element under solen er tilpasset og fullt funksjonelt med Semantisk brukergrensesnitt. Dette inkluderer HTML5-elementer pluss ekstra funksjonalitet som rangeringer og tilpassede faner.

Men kanskje den beste delen av semantisk er temaoppsettet . Ikke bare får du tonn pre-designet stiler og dynamiske elementer, men du kan også restylle disse selvbyggene 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 standardtemaer :

1. Semantisk standard
2. Lubben
3. Oppvokst
4. Classic
5. Google Material
6. Amazon
7. Bootstrap
8. GitHub
9. Twitter

Dette er bare toppen av isfjellet, og de fungerer mer som utgangspunkt for å designe ditt eget tema .

Hvis du bygger en ny destinasjonsside eller egendefinert nettside fra bunnen 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å inneholder en guide for nybegynnere .