Dzisiejszy wpis dotyczy narzędzia Semantic UI.

Jest to narzędzie stanowiące konkurencję dla bardzo popularnego Twitter Bootstrap. Semantic UI to zestaw gotowych fragmentów kodu, które umożliwią nam szybkie zbudowanie kompletnej strony www. Jest oparty o LESS i jest znacznie bardziej rozbudowany od Twitterowego Bootstrapa, przez co niestety i bardziej pamięciożerny – jego pliki CSS i JavaScript mają ponad 800 kB.

Semantic UI to zestaw komponentów wspomagający tworzenie interfejsu użytkownika. Komponenty te są od siebie niezależne, znacznie bardziej niż w Twitter Bootstrap. Dzięki temu możemy stworzyć własną aplikację tylko z modułami które są nam niezbędne.

Oba te frameworki różnią się także przyjętą konwencją nazewnictwa. Ogólnie jest ono dość intuicyjne i w praktyce łatwo je zapamiętać, jednak wymaga innego podejścia od dewelopera. Nazwy klas przypominają naturalny język którego używamy na co dzień.

Przykładowy kod:

<div class="ui three buttons">
  <button class="ui active large button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

Na samym początku zawsze musimy dodać klasę ui, następnie określamy kolor, typ i wielkość, a na samym końcu element, który ma być utworzony.

Semantic UI daje nam bardzo duże możliwości formatowania poszczególnych elementów, np. mamy aż 7 klas opisujących wielkość: (mini, tiny, small, medium, large, huge, massive), 4 podstawowe jeśli chodzi o kolorystykę  (primary, secondary, positive, negative), a do tego jeszcze 12 dodatkowych kolorów (black, red, yellow, olive, green, grey, blue, teal, brown, pink, purple, violet).

Jeśli chodzi o pliki projektu to w Semantic UI następuje próba kategoryzowania i nazwania grup plików:

• elementy
• kolekcje
• moduły
• widoki

Podział ten jest propozycją jak powinniśmy, lub też raczej jak możemy, organizować sobie pliki LESS.

Na oficjalnej stronie https://semantic-ui.com/ znajdziemy bardzo rozbudowaną dokumentację Semantic UI, wraz z przykładami wykorzystania każdego z modułów. Niektórych z nich nie ma w Bootstrapie.

Podsumowanie

Semantic UI może być świetną alternatywą dla Bootstrap, szczególnie jeśli chcemy wykorzystać pojedyncze moduły. Zapewnia także znacznie bardziej rozbudowane opcje modyfikacji wyglądu elementu. Zachęcam do zapoznania się z tym frameworkiem!