Bootstrap & Material

Kolejnym punktem w drodze do kariery fullstackowca jest zapoznanie się z mechanizmami ułatwiającymi pracę nad warstwą wizualną strony, portalu czy też aplikacji. W tym miejscu przedstawimy zajawkę na temat najpopularniejszych (subiektywnie) obecnie rozwiązań na rynku. Mowa oczywiście o Bootstrapie i Material Design.

Bootstrap

Bootstrap to platforma CSS o otwartym kodzie źródłowym, która jest bezpłatna i używana głównie do tworzenia responsywnych widoków gotowych do wyświetlenia zarówno na komputerze, jak i na urządzeniach mobilnych. Oznacza to, że framework pozwala tak napisać style, aby nasza strona wyglądała dobrze zarówno na dużym ekranie o rozdzielczości 1920 x 1080, jak i na smartfonie o rozdzielczości 360 x 640 pikseli.

Framework został stworzony przez programistów Twittera (Mark Otto and Jacob Thornton) w celu rozwiązania problemów ze spójnością obsługi wewnętrznych narzędzi. Projekt nazywał się wtedy Twitter Blueprint. Okazał się na tyle dobrym patentem, że w 2011 roku został udostępniony publicznie, a jego nazwę przemianowano na Bootstrap.

Tak naprawde obecnie Bootstrap to coś więcej niż tylko platforma CSS. To zbiór narzędzi do programowania w HTML, CSS i JS (Javascript). Udostępnia cały system predefiniowanych styli oraz szablonów, a także posiada bogaty zestaw pluginów JS. Pluginy są dostępne w wersjach podstawowych i są oparte o jQuery, ale można też znaleźć praktycznie wszystkie możliwe kombinacje pluginów do Angulara.

Nasza aplikacja oraz cały portal zostały napisane z użyciem Bootstrapa. Obecnie dostępna jest wersja 4 ale wersja 3 też prezentuje się całkiem nieźle. Aby zacząć przygodę z Bootstrapem potrzeba niewiele. Wystarczy zacząć od kursu dostępnego pod pierwszym linkiem poniżej.

Przydatne linki:

Bootstrap 3 Tutorial
Bootstrap 4 Tutorial
Bootstrap - Szybki start
UI Bootstrap - AngularJS
NG Bootstrap - Angular

Material Design

Material Design to "język projektowania" stworzony przez Google w 2014 roku. Określa on zestaw wytycznych, które pokazują, jak najlepiej zaprojektować stronę internetową. Wskazuje jakich przycisków używać, jak je animować lub gdzie je umieścić. Nastawiony jest bardzo mocno w stronę urządzeń mobilnych, niemniej doskonale sprawdza się również na większych urządzeniach.

Podobnie jak w przypadku Bootstrapa, Material Desing jest dostarczany z wieloma komponentami, które zapewniają podstawowy wygląd oraz pozwalają na ich dalszy rozwój. W porównaniu z Bootstrapem, Material jest nieco bardziej atrakcyjny wizualnie dzięki zastosowaniu optymalnej palety kolorów wraz z ciekawymi animacjami. Choć tak naprawdę przy dobrze wykorzystanym potencjale Bootstrapa, też możemy osiągnąć naprawde satysfakcjonujące efekty.

Material Design podobnie jak Bootstrap posiada własny system siatki wspomagający rozkład komponentów, jednak jest on mniej zaawansowany od tego znanego z Bootstrapa. Jeśli chcemy używać Materiala razem z Angularem, również możemy skorzystać ze sporej ilości pluginów dedykowanych temu frameworkowi.

Prawdą jest, że Material wyrósł niejako z potrzeby stworzenia kart na urządzeniach mobilnych i tak naprawdę przez dłuższy czas jego popularność była największa właśnie tam. Przez to niektórym użytkownikom jego wygląd na stronach webowych może nieco kojarzyć się z tym znanym z urządzeń mobilnych.

Przydatne linki:

Material Design
Angular Material
AngularJS Material
Mapa umiejętności programisty Java