Laboratorium: Dostosowywanie biblioteki Bootstrap

Style zdefiniowane w bibliotece Bootstrap mogą być dostrajane na różnych poziomach:

1. Poprzez nadpisywanie stylów biblioteki w obrębie własnego arkusza CSS/Less/Saas (tak jak na dotychczasowych zajęciach).

2. Poprzez edycję arkusza variables.less biblioteki Bootstrap i kompilację własnej wersji wynikowych plików CSS przy użyciu preprocesora Less/Saas. Arkusz variables.less pozwala modyfikować m.in.:

• liczbę kolumn gridu
• wartości graniczne progów responsywnych (bez możliwości dodawania nowych progów)

Istnieją narzędzia ułatwiające edycję arkusza variables.less i kompilację własnej wersji biblioteki bez konieczności lokalnej instalacji preprocesora Less, np.:

• Oficjalne narzędzie: http://getbootstrap.com/customize/
• Narzędzia 3rd party: http://bootstrap-live-customizer.com/

3. Poprzez edycję pozostałych źródłowych plików Less biblioteki Bootstrap i kompilację własnej wersji wynikowych plików CSS. To podejście daje pełną kontrolę nad wynikowymi stylami CSS i umożliwia modyfikację wszystkich aspektów działania biblioteki Bootstrap. Ze względu na największe oferowane możliwości to podejście zostanie wykorzystane w dalszej części.

Zadania

Zad. 1. Przygotowanie środowiska

W celu zbudowania wersji dystrybucyjnej biblioteki Bootstrap na podstawie źródłowych arkuszy Less konieczne jest zainstalowanie narzędzia Grunt. Narzędzie to dystrybuowane jest jako moduł platformy Node.js, więc w pierwszej kolejności należy zainstalować środowisko wykonawcze tej platformy. Należy uruchomić konsolę tekstową (menu aplikacji > Terminal/Konsola) i wykonać następujące kroki:

1.1. Należy utworzyć katalog o nazwie aui, w którym umieszczone zostaną wymagane pliki. Konieczne jest wykonanie polecenia:

$ mkdir aui

Znak zachęty $ wskazuje, że polecenie należy wykonać w terminalu z uprawnieniami standardowego użytkownika. Polecenia administracyjne oznaczane są zwyczajowo znakiem #. Występujące na początku poleceń znaki $/# należy pomijać wpisąc komendy do terminala.

1.2. Następnie należy pobrać wersję dystrybucyjną platformy Node.js przy użyciu polecenia:

$ wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-x64.tar.xz

Kopiowanie do terminala jest możliwe przy użyciu skrótu Ctrl+Shift+V.

1.3. W kolejnym kroku należy rozpakować pobraną paczkę:

$ tar xf node-v6.9.2-linux-x64.tar.xz

1.4. Następnie konieczne jest przejście do podkatalogu bin rozpakowanego archiwum:

$ cd node-v6.9.2-linux-x64/bin/

1.5. Aby polecenia node i npm były dostępne z dowolnego miejsca w systemie należy ustawić odpowiednio zmienną środowiskową PATH:

$ export PATH="$PATH:`pwd`"

1.6. Następnie należy powrócić do katalogu aui:

$ cd ../../

1.7. W kolejnym kroku pobrane zostanie archiwum zawierające pliki źródłowe biblioteki Bootstrap, które należy rozpakować:

$ wget https://github.com/twbs/bootstrap/archive/v3.3.7.zip
$ tar xf v3.3.7.zip

W efekcie powstanie katalog o nazwie bootstrap-3.3.7.

1.8 Przed zbudowaniem wersji dystrybucyjnej biblioteki Bootstrap należy zainstalować narzędzie Grunt:

$ npm install -g grunt-cli

1.9 Następnie należy przejść do katalogu bootstrap-3.3.7 przy użyciu polecenia:

$ cd bootstrap-3.3.7

1.10. W kolejnym kroku konieczne jest pobranie zależności wymaganych do zbudowania biblioteki Bootstrap. Należy wykonać polecenie:

$ npm install

1.11. Po tych czynnościach wstępnych należy zbudować wersję dystrybucyjną wywołując polecenie:

$ grunt dist

W efekcie powstanie podkatalog dist, który zawiera statyczne arkusze CSS wygenerowane na podstawie plików Less.

Po wprowadzenia zmian do źródłowych plików Less należy ponownie wywołać polecenie "grunt dist". Alternatywne rozwiązanie polega na wywołaniu polecenia:

$ grunt watch

przed rozpoczęciem wprowadzania zmian w plikach Less. Uruchomiony program monitoruje katalog źródłowy pod kątem zmian zachodzących w plikach i automatycznie buduje wersję dystrybucyjną arkuszy CSS po wykryciu każdej zmiany.

Zad. 2. Modyfikowanie zmiennych biblioteki Bootstrap

Należy wykonać poniższe modyfikacje zmiennych w arkuszu less/variables.less. Następnie należy zbudować wersję dystrybucyjną biblioteki i wykorzystać ją w dotychczasowym projekcie witryny poświęconej filmom w celu weryfikacji czy modyfikacje przyniosły prawidłowy efekt na stronie.

2.1 Należy zmienić  kolorystykę zdefiniowaną w pliku variables.less i zweryfikować, w jaki sposób zmienił się wygląd komponentów wykorzystanych na stronie (np. pola formularza, pigułki w menu (ang. pills)).

2.2 Należy zmodyfikować zmienne związane ze stylami tabel. Klasy biblioteki Bootstrap związane z tabelami powinny zostać wykorzystane na stronie.

2.3 Należy zmodyfikować zmienne związane z fontami (kroje i rozmiary), a następnie zweryfikować efekt modyfikacji na stronie.

Zad. 3. Definiowanie nowego progu responsywnego dla najmniejszych urządzeń (<480px)

W ramach wcześniejszych zajęć laboratoryjnych (Laboratorium: Responsywne interfejsy) dodano specyficzne reguły wyświetlania niektórych elementów witryny dla urządzeń dysponujących ekranem o szerokości mniejszej niż 480px. Modyfikację wprowadzono na poziomie arkusza CSS. W ramach tego zadania nowy próg responsywny zostanie dodany poprzez modyfikację plików źródłowych biblioteki Bootstrap i zbudowanie wersji dystrybucyjnej. Nowy próg będzie posiadał prefix xxs

Należy wykonać następujące kroki:

3.1. Do pliku less/variables.less należy dodać elementy:

@screen-xxs-max: (@screen-xs-min - 1);

3.2. Plik less/grid.less należy zmodyfikować tak, aby wygenerowany został zestaw klas col-xxs-X dla nowego progu responsywnego. Szczególną uwagę należy zwrócić na miejsce wywołań domieszek .make-grid():

• wywołanie .make-grid(xs); należy umieścić w obrębie dyrektywy @media, a w jej warunku wykorzystać zmienną @screen-xs-min zdefiniowaną w pliku variables.less,
• należy wywołać domieszkę .make-grid(xxs), która wygeneruje klasy dla nowego progu. Klasy te powinny być domyślne (bez dyrektywy @media),
• należ zwrócić uwagę na kolejność wywołań. Należy przy tym pamiętać, że przeglądarka przetwarzając wynikowy arkusz CSS wybiera wartości napotkane jako ostatnie dla każdego atrybutu wybranego elementu na stronie.

3.3. Należy zbudować wersję dystrybucyjną biblioteki i zweryfikować, czy wynikowy arkusz CSS zawiera prawidłowe style.

3.4 Należy zastosować własną wersję biblioteki Bootstrap w miejscu, gdzie wcześniej dodany został ręcznie próg dla ekranów o szerokości mniejszej niż 480px.

3.5 Należy zweryfikować, czy poza podstawowymi klasami col-xxs-X dostępne są również col-xxs-push-X, col-xxs-pull-X itp.

Zad. 4. Definiowanie progu responsywnego dla szerokich ekranów (>=1920px)

Należy samodzielnie zdefiniować nowy próg dla ekranów o szerokości powyżej 1920px. Będzie on przeznaczony dla monitorów o rozdzielczościach powyżej FullHD (1920x1080), np. 2560x1440, 4K, 5K oraz dla monitorów ultrapanoramicznych o proporcjach 21:9 (przykładowo o rozdzielczości 3440x1440).