Frameworki CSS i Material Design Lite

Od jakiegoś czasu dostaję pytania w sprawie „frejmłorków”. W sieci można znaleźć mnóstwo blogów na ten temat. Pisanie własnego eseju, albo porównanie funkcji wydaje mi się bezcelowe. W tej chwili pewno straciłem połowę publiczności, więc nie chcąc stracić reszty zacznę od podsumowania współczesnych (jak na początek 2016) rozwiązań:

  • Dla początkujących polecam Bootstrap 3. Jest łatwy do opanowania, między innymi dzięki ogromnej popularności i wynikającemu z niej wsparciu społeczności.
  • Aktualnie najnowocześniejszym rozwiązaniem jest Foundation 6, którego zaletami jest świetne działanie na urządzeniach mobilnych i poręczny kod SCSS.
  • W wielu przypadkach okaże się, że nie potrzebujesz bardzo zaawansowanych narzędzi. Istnieje mnóstwo małych i praktycznych frameworków, wśród których popularnością wyróżnia się Skeleton.

Co to jest „framework”?

Z angielskiego chodzi tu o strukturę, „ramę”, od której zaczyna się pracę. Framework CSS powinien zawierać:

  • Reset (normalizację) stylów przeglądarki
  • Układ (layout) ułatwiający pozycjonowanie treści (grid system)
  • Ujednolicenie podstawowych elementów (typografii, formularzy itp.)

W poprzedniej sekcji specjalnie nie nazwałem Bootstrapa ani Foundation frameworkami CSS. Dlaczego? Bo nimi nie są! Można to porównać do nazywania Drupala albo WordPressa frameworkiem PHP. Bardziej adekwatną nazwą jest front-end framework, jako że front-end (fasada – wszystko co serwis wyświetla użytkownikowi) dotyczy także skryptów i struktury strony. Słyszałem też bardzo adekwatną nazwę „UI Toolkit” (zestaw narzędzi dla interfejsu użytkownika).

Google Material Design

Ciągnąc wyjaśnienia dalej, Material Design nie jest ani frameworkiem CSS, ani frameworkiem front-endowym. Czym w takim razie jest? To ciekawy zestaw zasad projektowania, dostępny pod adresem www.google.com/design/spec/material-design/. Cała specyfikacja jest zaskakująco uniwersalna i intuicyjna.

Material Design Lite

Material Design Lite – wybór kolorkówOficjalna implementacja Material Design dostępna jest na getmdl.io. Najbardziej precyzyjny opis z jakim się spotkałem, to „a library of components & templates” – biblioteka komponentów i szablonów. Terminologia bywa myląca, ale nie przejmuj się – Antyweb nazwał MDL uniwersalnym frameworkiem dla webmasterów xD.

W przypadku Bootstrapa i Foundation największą zaletą jest modułowość. Znając podstawy preprocesora SASS można łatwo wybrać potrzebne elementy (na przykład framework CSS) i dostosować wygląd. Material Design Lite nie jest pod tym względem zbyt praktyczny. Nie polecam tworzenia i ręcznego kompilowania własnej wersji. Próbowałem. Realistycznie mamy jedynie możliwość dobrania dwóch głównych kolorów. Większa ingerencja wiąże się raczej z nadpisywaniem kodu CSS, czego nie polecam. Zastanawiałem się nad użyciem MDL do mojego kolejnego projektu, ale się rozmyśliłem. Może innym razem.

Alternatywy

Na szczęście istnieje wiele innych wersji, poza tą oficjalną. Wszystkim, którzy czekali na „Bootstrapa od Google” pewno spodoba się Materialize. Poza tym znalazłem motywy/nakładki na wcześniej wspominane popularne frameworki front-endowe, jednak przed ich użyciem stanowczo polecam przeglądnięcie oryginalnych wytycznych.

Podsumowanie

wybór narzędzia