Semantic UI, czyli kolejne spotkania z LESS

Semantic UI to kolejne narzędzie, a właściwie zestaw gotowych fragmentów kodu, tworzone przez deweloperów dla deweloperów. Jest oparte o LESS, ma wiele bardzo ciekawych i niezależnych od siebie komponentów i jest świetną alternatywą dla Twitterowego Bootstrapa.

Informacje podstawowe

Semantic UI to zestaw komponentów wspomagający tworzenie interfejsu użytkownika. W przeciwieństwie do Bootstrapa ciężko mówić tutaj o frameworku CSS/JS, ponieważ komponenty w Semantic UI są od siebie zdecydowanie bardziej niezależne niż w narzędziu Twittera. Nie ma tutaj pliku składowego z zmiennymi i tzw. miksturami, od których później mogłyby być zależne pozostałe pliki. Oczywiście w zależności od podejścia dewelopera i strategii jego pracy może być to wada, jak i zaleta.

Ważna rzeczą jest tutaj przyjęta konwencja nazewnictwa. To co było zarzutem w stosunku do Bootstrapa w wersji drugiej, a więc nazywanie kolumn w siatce grid – spanami, tutaj jest przykładowo rozwiązane. Nazewnictwo jest intuicyjne i w praktyce o wiele szybciej się przyswaja i zapamiętuje, ale wymaga nieco innego podejścia od dewelopera. Jedna klasa odpowiedzialna jest za nadawanie jednej cechy określonemu elementowi, a więc można mieć wrażenie, że wydłuża nam się zapis, ponieważ klasa nie jest grupą cech. Przykładowe różnice w zapisie:

Semantic:

Bootstrap 3:

Podział komponentów

W Bootstrapie nie mamy dzielenia plików LESS na grupy. Wszystko jest wrzucone w jeden folder, w którym poszczególne pliki odpowiedzialne są za określony element, lub są plikami nadrzędnymi o czym było już na webMASTAHu.

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. Elementy to zazwyczaj niewielkie, pojedyncze składowe np. przycisk czy nagłówek. Kolekcje to zestawy elementów o określonym przeznaczeniu i najczęściej występujące np.: formularze, siatka, tabele. Moduły to komponenty, który uzależnione są od java script takie jak popup czy modal. Widoki to formatowanie kompletnych elementów strony np.: listowanie komentarzy czy wiadomości.

comments

Warto zastanowić się nad właśnie takim podziałem i gromadzić swoje pliki LESS w takich właśnie grupach, ponieważ wprowadza to porządek i przejrzystość przy dużej ilości plików less, które mógł sobie wypracować deweloper. Wskazuje również jak można dzielić pracę nad np. cięciem szablonu w momencie gdy pracuje nad nim wiele osób. LESS to nie tylko technologia – to przede wszystkim pomysł na organizacje pracy.

Za i przeciw

Nie będę opisywał wszystkich komponentów, ponieważ świetna dokumentacja Semantic UI robi to doskonale, ale myślę, że warto zwrócić uwagę na kilka rzeczy.

Przede wszystkim Semantic podobnie jak trzecia odsłona Bootstrapa jest w stylu flat design. W modułach korzystamy z bardzo ładnie opisanego Javascriptu, a w dokumentacji możemy obejrzeć demo każdego z modułów. Kilku z nich nie znajdziemy w Bootstrapie, a na szczególną uwagę zasługuję wrzucenie świetnej obsługi walidacji i formularzy.

validations

Niezależność poszczególnych elementów od siebie może być zaletą jak i wadą. Zaletą gdy chcemy wykorzystać tylko niektóre z nich, wadą gdy chcemy, aby posiadały one wspólne cechy. Wtedy można odczuć różnice w braku pliku ze zmiennymi, który mógłby definiować wartości pewnych cech, a więc zmienialibyśmy coś w jednym miejscu. W przypadku Semantic UI, trochę tak jakbyśmy nie korzystali z dobrodziejstw LESS, pewne rzecz musimy formatować osobno w każdym pliku.

W związku z tym, że świat oszalał na punkcie pchania się w wszelkiego rodzaju menadżery pakietów i zależności, tak jak w przypadku Boostrapa 3, aby pobrać sobie Semantic UI z dokumentacją jesteśmy zależni od dodatkowego oprogramowania. W tym wypadku potrzebować będziemy Node.js.

Podsumowanie

Semantic to jeszcze bardzo młode UI bo mające zaledwie kilka miesięcy. Może być jednak doskonałym zastępstwem dla wszystkich tych, którzy z Bootstrapa chcieli wyciągać tylko pojedyncze elementy, oraz doskonałym uzupełnieniem dla niego. Na pewno jest dobrym zbiorem gotowych rozwiązań, a wykorzystanie LESS dodaje temu atrakcyjności.

Według mnie przy zachowaniu proponowanego przez Semantic UI podziału komponentów i dorzuceniu do tego mikstur i zmiennych może być to równie popularne narzędzie jak Bootstrap, a na pewno tak samo atrakcyjne dla wszystkich, którym zależy na tym by nie robić drugi raz czegoś, co już ktoś wymyślił.

Źródła:

http://semantic-ui.com – oficjalna strona Semantic UI
https://github.com/quirkyinc/semantic – repozytorium w serwisie Github

Programista, web developer, marketingowiec. Od wielu lat związany z branżą reklamy i mediów. Robi backend, kocha frontend, będąc ewangelistą kilku technologii. Prywatnie minimalista, trochę introwertyk, perfekcjonista. Nie lubi kotów ;)

  • wusztpl

    fajny tekst, jest okejka! 😉

  • Przeglądając dokumentację SemanticUI mam wrażenie, że mimo iż jest dopiero na początku swojej drogi, może śmiało stawać w szranki z Bootstrap. Ma całkiem sporo zalet, a wniektórych miejscach miażdży konkurenta (choćby nawet w tak błahej sprawie jak liczba dostępnych ikon – ich rozmiarów, kolorów itd.).

    Jak tylko będę mieć okazję, spróbuję się zabawić z tym narzędziem 🙂

  • problem z Semantic UI polega na tym, że nie do końca jest semantyczny. Owszem, ma kilka ciekawych rozwiązań, ale nazywanie buttonów kolorami nijak się ma do semantyki. To tak jakby tworzyć klasę underlined tylko po to by oznaczyć że tekst ma być podkreślony.
    Poza tym, ten framework sprzyja tworzeniu dużych ciągów klas w CSS co niekoniecznie jest dobrze jeśli chodzi o późniejsze jego nadpisywanie własnymi ustawieniami (specyficznymi dla danej sytuacji).

    • Tu akurat masz rację, jednak mimo wszystko trzeba przyznać, że jest to świetna alternatywa.

    • Riu

      Zgadzam się i dlatego napisałem, że są odczuwalne pewne braki, oraz warto by jednak uzupełnić sobie go o mikstury i zmienne.

  • Taki podział na moduły idealnie nadaje się na generator do yeomana. Mam nadzieję, że to kwestia czasu aż ktoś go napisze, wtedy będzie można się pobawić i „wyklikać” moduły które mają się zainstalować.

  • mkurzeja

    Wszystko fajnie, ale aktualnie w less jest praktycznie czysty css. Nie da się edytować nawet kolorów.

  • mck

    Dla mnie taki zapis kompletnie psuje użyteczność grida. No bo jak tu stworzyć siatkę, która będzie miała powiedzmy 1 kolumnę na mobilach, dwie na tabletach i 4 na kompach? Wg dokumentacji trzeba 3 razy powielić kontent – głupota…

  • Mi się jak najbardziej podoba. Ale grid rzeczywiście do kitu. Ale da się to obejść.

Send this to friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL
webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL