Dziś pierwsza część cyklu na temat frameworka Semantic UI. Jest to jednocześnie kolejny wpis, którego autorem jest Kacper Tylenda - być może zapowiada nam się dłuższa współpraca… A tym czasem zapraszam do lektury wpisu!

Jeśli wcześniej nie słyszeliście o Semantic UI (tutaj strona projektu) to jest to Bootstrap… Tylko, że większy. Bardziej “umięśniony”. Bardziej kolorowy. Sprytniejszy, łatwiejszy w nauce i prostszy w użytkowaniu. Tak naprawdę wszystko bardziej. Jak myślę sobie o tej parze to widzę dwóch ludzi - jeden całkiem wysportowany a drugi to “hardkorowy koksu” CSS :)

Nie chciałem w pierwszym zdaniu pisać “Bootstrap” ale ciężko uniknąć porównania podczas gdy “cały” Internet jest bootstrapowy a informacji o Semantic UI nie ma zbyt wiele w sieci. Według mnie całkiem niesłusznie… a to dlatego, że Semantic UI ma coś do zaoferowania wszystkim web developerom - od początkujących (dzięki niskiej barierze wejścia) aż po zaawansowanych (możliwość budowania swojej wersji frameworka za pomocą npm).

Wstęp

Mamy kilka opcji żeby odpalić Semantic UI w naszym projekcie. Najprostsza to oczywiście podlinkowanie odpowiednich plików z CDN. I tutaj spotka nas pierwsze zaskoczenie. Dostępnych będziemy mieli wiele wersji - każdy element, kolekcję czy moduł możemy dodać do naszego projektu oddzielnie. Co jest świetnym rozwiązaniem bo bardzo często zdarza się, że używamy Bootstrapa tylko i wyłącznie dla wbudowanego tam grida. Tutaj możemy wybrać co będzie nam potrzebne.

Całość lekka nie jest bo pliki CSS i JavaScript ważą łącznie ok 800KB ale coś za coś… Instalacja za pomocą npm pozwala na dobór “składników” naszej semantycznej mieszanki, a sam proces opiszę w części trzeciej tego kursu.

projektowanie designu

Ogólnie, nasza praca będzie wyglądała tak jak przy projektach z użyciem Bootstrapa - dodajemy klasy do elementów HTML, a resztę robi za nas framework. Różnica jaką można bardzo szybko zauważyć to same nazwy klas. Kończymy z “col-4” od teraz klasa ta nazywa się “four wide column”. Jak sam widzisz nazwy klas bardziej przypominają naturalny język jakiego używamy na co dzień.

Czym jeszcze różnią się oba frameworki?

Kolory, rozmiary

Zanim przejdziemy do konkretów warto zwrócić uwagę, że Semantic UI daje nam bardzo duże możliwości formatowania poszczególnych elementów. W Boostrapie mamy dostępne cztery klasy opisujące wielkość - Semantic UI dostarcza ich aż 7!

Nazwy klas są również łatwe do zapamiętania - mini, tiny, small, medium, large, huge, massive. Jeśli chodzi o kolorystykę mamy do dyspozycji cztery podstawowe klasy - primary, secondary, positive, negative, a do tego jeszcze 12 dodatkowych kolorów!

Zresztą sprawdźmy jak będzie wyglądał kod przykładowego guzika:

<button class="ui primary massive button">Przykładowy button</button>

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.

Jak możesz zauważyć, dużo łatwiej operuje się klasami z Semantic UI niż tymi z Bootstrapa - klasy mówią: “utwórz podstawowy (primary) wielgachny (massive) przycisk (button)”. Oczywiście możemy pominąć typ i wielkość przycisku i dalej wszystko będzie działać.

Jak wspomniałem, dostępnych jest 12 podstawowych kolorów. Tak wygląda cała ich lista:

<button class="ui black button">Przykładowy button</button>
<button class="ui red button">Przykładowy button</button>
<button class="ui yellow button">Przykładowy button</button>
<button class="ui olive button">Przykładowy button</button>
<button class="ui green button">Przykładowy button</button>
<button class="ui grey button">Przykładowy button</button>
<button class="ui blue button">Przykładowy button</button>
<button class="ui teal button">Przykładowy button</button>
<button class="ui brown button">Przykładowy button</button>
<button class="ui pink button">Przykładowy button</button>
<button class="ui purple button">Przykładowy button</button>
<button class="ui violet button">Przykładowy button</button>

Wszystko wygląda bardzo ładnie, a to dopiero początek! Tak jak wspominałem Semantic jest naprawdę bogate w opcje formatowania. Wydaje mi się, że możemy spokojnie stworzyć stronę internetową bez dotykania CSS!

Grid w podejściu ekstremalnym

Czy wspominałem wcześniej, że w Semantic UI wszystkiego jest więcej? Oczywiście tak samo jest z gridem, który udostępnia nam 16 kolumn do naszej dyspozycji. Kwestią sporną jest czy w rzeczywistości 4 dodatkowe kolumny są nam potrzebne…

Problem pojawi się gdy będziemy chcieli podzielić ekran na trzy równe części. Jednak w większości przypadków nie odczujemy różnicy pomiedzy 12 a 16 kolumnami.

Przy tworzeniu kodu mamy dość dużą swobodę:

<div class="ui container grid">
  <div class="four wide column">bla</div>
  <div class="four wide column">bla</div>
  <div class="four wide column">bla</div>
  <div class="four wide column">bla</div>
</div>

Da nam taki sam efekt jak:

<div class="ui container grid">
  <div class="four column row">
    <div class="column">bla</div>
    <div class="column">bla</div>
    <div class="column">bla</div>
    <div class="column">bla</div>
  </div>
</div>

Jak widzisz, korzystanie z grida rozpoczynamy poprzez dodanie klas ui grid. Następnie dzielimy ekran klasami (ile kolumn) + (wide) + (column). Możemy również określić ile kolumn będzie w rzędzie - tak jak w przykładzie numer dwa.

Grid w Semantic UI daje nam ogromne pole manewru, a używanie go wygląda na bardzo proste. Nie jestem w stanie przedstawić Ci wszystkiego w tym artykule, dlatego zapraszam do przejrzenia oficjalnej dokumentacji, która jest przejrzysta i prosta w użytkowaniu.

Elementy, kolekcje i moduły

Większość składników Semantic UI wygląda naprawdę świetnie. Wystarczy spojrzeć w dokumentacji na przycisk, któremu możemy przypisać ikonę (FontAwesome wbudowane we framework), zmienić kształt czy pogrupować.

Opisywanie każdego elementu zajęłoby mi prawdopodobnie wieki więc zostawię sobie (mam nadzieję) tę przyjemność na odcinek drugi tego tutorialu. Zbuduję w nim prostą stronę z użyciem Semantic UI. Za pomocą elementu reveal dodamy (bardzo szybko i bez żadnej ingerencji w CSS) dobrze wyglądające efekty hover. Każdy składnik tego frameworka wygląda na rozbudowany i dopracowany. Jeszcze raz polecam sprawdzić dokumentację!

Semantic UI dla zaawansowanych

Tak jak wspominałem wcześniej za pomocą npm możemy zbudować nasz własny pakiet. Jest to bardzo ważne w sytuacji kiedy prawdopodobnie do naszego projektu będzie nam potrzebne tylko kilka elementów, kolekcji czy modułów.

web design

Semantic UI został stworzony z pomocą LESS, co może stanowić lekką przeszkodę ponieważ, wydaje mi się, że po przejściu Bootstrapa na Sass to właśnie ten pre-procesor CSS jest najbardziej popularny. Jednak różnice są na tyle niewielkie, że szybko powinnismy być w stanie przestawić się na LESS.

Po zainstalowaniu pakietu mamy dostęp do zmiennych, dzięki którym możemy dostosować style do naszych potrzeb. Wszystko obsługiwane jest przez Gulp. Proces instalacji i pracy z pakietami opiszę w części trzeciej tego tutoriala.

Podsumowanie

Mam nadzieję, że wystarczająco Was przekonałem do zapoznania się z tym ciekawym projektem. W kolejnych częściach postaram się przedstawić główne opcje dostępne w Semantic UI oraz “workflow” dla tego frameworka. Obiecuję, że będzie ciekawie!

Wpis ten jest częścią większej serii postów na temat Semantic UI. Poniżej linki do wszystkich części serii: