Czym jest Semantic UI i jak go dodać do kontroli wersji GIT?

Czym jest w ogóle Semantic?

Ostatnio znużyła nas nieco praca na wszechobecnym Bootstrapie i w poszukiwaniach ciekawych alternatyw natrafiliśmy na Semantic UI. Podobnie jak Twitter Bootstrap, jest to nowoczesny framework front-endowy, bardzo ułatwiający tworzenie responsywnych layoutów WWW.

Zakładam, że słyszałeś o Bootstrapie, a nawet jeśli nie... to na pewno widziałeś. Semantic dość istotnie różni się od swojego popularniejszego brata - w pierwszej kolejności widać dwie różnice; po pierwsze korzysta z semantycznych klas w CSS (np. class="right floated medium image") dzięki czemu od razu wiadomo o co chodzi, pisanie layoutu staje się szybsze oraz łatwiej zapamiętać nazwy klas. Drugą dość istotną różnicą jest większa liczba gotowych komponentów niż w Bootstrapie (mamy tutaj chociażby gotowe rozwiązania na komentarze, feed czy sidebar), a poza tym bardzo przydatne wbudowane pluginy javascript (na przykład pozwalające na dynamiczne wczytywanie treści, gdy staje się widoczna).

Jeśli wydaje Ci się, że przez te wszystkie dodatki, Semantic jest dużo "cięższy" od Bootstrapa to nie będziesz daleko od prawdy. Jednak twórcy tego framework'a przewidzieli ten problem i zaoferowali rozbudowane build tools, które umożliwiają wybranie tylko niektórych komponentów (przez co ostateczny rozmiar plików CSS i JS jest mniejszy), skompilowanie ich i zminifikowanie.

Brzmi skomplikowanie? I tak jest istotnie, Semantic jest sporo trudniejszy w obsłudze niż Bootstrap, stąd polecam go raczej front-end developerom, którzy mają już trochę doświadczenia z innymi frameworkami, LESS, gulp i npm. Pomimo sporego skomplikowania, Semantic zebrał w momencie pisania tego artykułu 24784 gwiazdek na githubie (czyli około 1/4 tego co bootstrap).

Jak bezbloleśnie dodać semantic do projektu?

Na oficjalnej stronie Semantic-UI znajduje się całkiem dobrze napisana instrukcja (nawet z video) jak wystartować z tym frameworkiem. W skrócie przyda się nodejs, npm i gulp na maszynie developerskiej.

Po pierwsze pobieramy z npm semantic-ui i zapisujemy jako zależność w package.json:

npm install semantic-ui --save

Powyższa komenda utworzy katalog node_modules (jeśli jeszcze nie istnieje), pobierze tam semantic-ui razem ze wszystkimi zależnościami i źródłami, a na koniec automatycznie uruchomi:

gulp install

Powyższa komenda zada nam kilka pytań odnośnie konfiguracji Semantica i utworzy plik semantic.json, gdzie konfiguracja jest zapisana. Ja zdecydowałem się wprowadzić własną ścieżkę bazową, żeby Semantic siedział tam gdzie reszta assetów "base": "assets/semantic/", oraz zdefiniowałem ręcznie listę komponentów, z których będę korzystał, na przykład:

{
  "base": "assets/semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "dist/",
      "uncompressed": "dist/components/",
      "compressed": "dist/components/",
      "themes": "dist/themes/"
    },
    "clean": "dist/"
  },
  "version": "2.1.8",
  "components": [
    "reset",
    "site",
    "button",
    "container",
    "divider"
  ]
}

Jeśli przy pierwszej instalacji Semantica wybraliśmy instalację automatyczną (z domyślnymi ustawieniami), możemy po prostu wyedytować po fakcie semantic.json i uruchomić komendę, która na nowo skompiluje pliki JS i CSS do katalogu skonfigurowanego jako "output/packaged":

gulp build

Struktura folderów

Semantic został tak stworzony by umożliwić głębokie personalizowanie wyglądu i swojej strony. Po instalacji otrzymujemy foldery semantic/src, gdzie znajdują się wszystkie pliki źródłowe wymagane do kompilacji, oraz semantic/tasks, gdzie znajdują się gulpwe zadania, które zajmą się właśnie kompilacją.

Gdy odpalamy powyżej wspomnianą komendę gulp build, utworzone zostaną odpowiednie pliki "produkcyjne" (domyślnie w folderze semantic/dist).

I teraz najciekawsze: wszelkie zmiany specyficzne dla naszej strony wprowadzamy w plikach, które już istnieją. Jest specjalnie przygotowany folder semantic/src/site, w którym możemy tworzyć indywidualny motyw naszej strony. Wadą jest to, że customowe style znajdują się w plikach LESS o rozszerzeniach .variables oraz .overrides. Trzeba niestety ręcznie ustawić w edytorze tekstowym podświetlanie składni LESS.

W gruncie rzeczy Semantic oferuje dziedziczenie motywów. Nasz własny motyw nadpiuje różne opcjonalne pakietowe motywy, które nadpisują domyślny motyw.

Jak dodać projekt zawierający Semantic UI do kontroli wersji np. GIT?

Twórcy Semantic UI niestety nie przedstawili żadnego "polecanego" sposobu na wersjonowanie projektu. Właściwie jedynymi plikami, które potrzebne są w środowisku produkcyjnym są:

semantic/dist/semantic.js
semantic/dist/semantic.css
semantic/dist/themes/* // tam znajdują się głównie fonty i obrazy

W środowisku developerskim natomaist potrzebujemy przede wszystkim konfiguracyjnego pliku semantic.json oraz pliki .variables oraz .overrides naszego "customowego" motywu (wszystkie indywidualne reguły LESS). Więc te pliki na pewno warto mieć w swoim repozytorium kontroli wersji.

semantic/src/site/*

Pozostałe katalogi tak zwane "vendor files", które jak nakazuje rozsądek moglibyśmy skopiować za pomocą npm i zacommitowanego pliku semantic.json. Niestety... W praktyce komenda npm, którą wcześniej uruchamialiśmy instalację Semantica, po wykryciu istniejącego pliku konfiguracyjnego oferuje dwie możliwości:

  • nadpisanie pliku semantic.json i kontynuowanie instalacji (zatem nadpisalibyśmy konfigurację zdefiniowaną przez poprzedniego developera)
  • zupełne pominięcie instalacji

Tak więc ostatecznie postanowiłem po prostu dodać cały katalog semantic/src to kontroli wersji. Tak, żeby po sklonowaniu projektu, developer miał od razu komplet plików źródłowych, potrzebnych do kompilacji assetów.

Mój plik .gitignore ostatecznie wygląda tak:

bower_components
node_modules
semantic/dist/components
semantic/dist/themes/*
!semantic/dist/*.js
!semantic/dist/*.css
!semantic/dist/themes/default/

A plik package.json posiada semantic-ui jako zależność:

  "dependencies": {
    "semantic-ui": "^2.1.8"
  }

Na instancji developerskiej po sklonowaniu projektu wystarczy uruchomić npm install w głównym katalogu. A potem już

cd semantic
gulp watch
Używamy ciasteczek aby uczynić naszą stronę internetową coraz lepszą. Polityka prywatności