Bygga upp ansvarsfulla webbplatser snabbare med semantiska användargränssnitt

Frontend ramar som Bootstrap är fortfarande allt raseri. Det finns dussintals bra val att välja på men en som nyligen fångade min uppmärksamhet är Semantisk användargränssnitt.

Beviljat det här biblioteket har funnits en stund och går tillbaka några år. Men den senaste versionen av version 2.2 kommer med en massa extra funktioner och bevisar att Semantic kommer att vara runt för lång tid.

Med dussintals CSS-variabler, enkla reagerande klasser, och lätta att konfigurera layouter, du har inga problem att arbeta med Semantic UI på egen hand.

De enkla klassnamn och rutnätstrukturer verkligen ge mening att denna ram kallas “Semantisk”. Klasserna är mycket förnuftiga och det gör din HTML lätt att läsa på avstånd.

Det kommer även med jQuery-stöd för dynamiska sidelement som karuseller och dropdown välj menyer.

Varje HTML-element under solen är anpassad och fullt fungerande med semantisk användargränssnitt. Detta inkluderar HTML5-element plus extrafunktionalitet som betyg och egna flikar.

Men kanske den bästa delen av semantiska är tema setup. Inte bara får du massor av förkonstruerade stilar och dynamiska element, men du kan också restyler dessa själv bygger på Semantics kod.

Hela biblioteket uppgår till 3.000 + temafariabler du kan ändra i Sass eller genom att utöka ditt eget stilark. Dessutom kommer semantiska användargränssnitt packade med nio standardteman:

1. Semantisk standard
2. Knubbig
3. Raised
4. Klassisk
5. Google Material
6. amason
7. bootstrap
8. GitHub
9. Twitter

Det här är bara toppen av isberget och de beter sig mer utgångspunkter för att designa ditt eget tema.

Om du bygger en ny målsida eller anpassad webbplats från början, ser du allvarligt över att arbeta med semantiskt användargränssnitt. Det är helt gratis och öppen källkod med bra dokumentation online.

Du kan bläddra igenom layout stilar, tillsammans med guider för alla huvudelement och anpassade teman.

Och du kan ladda ner en kopia av källkoden direkt från GitHub, som också innehåller a guide för nybörjare.