Bootstrap to jeden z najpopularniejszych frameworków CSS na świecie. Oficjalny blog zapowiedział już wydanie nowej wersji, prawdopodobnie jeszcze w tym roku. Aktualnie dostępna jest wersja alfa, a poniżej zaprezentowana jeszcze lista 10 funkcji dostępnych w Bootstrap 4.
1. Wcześniej Less, teraz Sass
Bootstrap był pierwotnie napisany przy użyciu Lessa, ale rosnąca popularność Sassa doprowadziła do sytuacji, kiedy to Sass stał się liderem preprocesorów CSS. Programiści zdecydowali się na przepisanie stylów Bootstrapa przy użyciu Syntactically Awesome Style Sheets.
Bootstrap 4 kompiluje się szybciej niż poprzednia wersja. Równoczesne wsparcie społeczności Sassa wzmocni rozwój frameworka. Teraz komponenty, domieszki (ang. mixins) i pozostałe elementy można jeszcze łatwiej rozszerzać.
2. Lepsza siatka
Nowy system siatki różni się o początkowego. Obecna wersja jeszcze lepiej obsługuje urządzenia mobilne poprzez @media-queries. Teraz masz większą kontrolę, jeśli stosujesz podejście Mobile First w projektowaniu responsywnym (ang. Responsive Web Design). Sprawdź poniższy kod:
// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }
Powyższe @media-queries obsłużą wiele urządzeń, począwszy od małych telefonów, poprzez tablety, a kończąc na monitorach i wielkich ekranach.
3. Wsparcie Flexbox
Programiści będą wreszcie szczęśliwi, ponieważ Bootstrap 4 używa właściwości display: flex; zamiast float. Formatki formularzy również zmieniły wyświetlanie z display: table; na display: flex;. Taka zmiana ułatwia wyrównanie pionowe treści wraz z elementem nadrzędnym. Zmiana kolejności elementów treści na urządzeniach i tworzenie kolumn o równej wysokości będzie łatwiejsze.
To funkcja opcjonalna, zatem jeśli wspierasz IE9, zapomnij! Używanie Flexbox wymaga zmiany wartości zmiennej $enable-flex z false na true w pliku _variables.scss. Jeżeli nie potrzebujesz plików źródłowych Sass, wówczas wybierz odpowiedni pakiet na stronie pobierania Bootstrap 4.
4. Nowe komponenty
Karty to zupełnie nowy komponent, który zastępuje stare panele (ang. panels) oraz „warstwy z tłem” (ang. wells). Twórcy Bootstrapa zaprojektowali Kary jak elastyczne i rozszerzalne pojemniki na treść.
Warto sprawdzić grupowanie kart, ponieważ łatwo wyświetlają pojemniki o tej samej wysokości, ale z treścią różnej długości. Wszystko to możliwe dzięki display: table;, ale również display: flex;, jeśli Flexbox zostanie włączony.
5. Reboot
Zgodność domyślnych stylów przeglądarek była problemem przez wiele lat. Eric Meyer zaproponował style reset.css dla zmniejszenia różnic między przeglądarkami. Nowoczesna i lepsza alternatywa została stworzona przez Nicolasa Gallaghera, mianowicie Normalize.css nie zeruje wszystkich stylów, ale obejmuje tylko te style, które wymagają normalizacji.
Wyobraź sobie nowy moduł, który pozwala na przeładowanie stylów bardziej wybiórczo. Korzystanie z box-sizing: border-box, poprawek marginesów i wielu innych w pojedynczym pliku Sass to kolejny krok do lepszej kontroli.
6. Dostosowywanie
Sass oferuje mnóstwo, dzięki swoim super-mocom jakimi są zmienne, domieszki (ang. mixins) i operatory. To było powodem, dla którego wszystkie gradienty, przejścia, cienie i dużo więcej przeniesiono do zmiennych Sass. Nie wymaga to osobnego pliku stylów, jak to miało miejsce w przypadku Bootstrap 3. Poniżej znajduje się lista opcjonalnych właściwości:
$enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
Nowe podejście przesuwa wszystkie opcje dostosowywania do prostej konfiguracji. Zmień jedną z wartości i skompiluj ponownie style dla włączenia lub wyłączenia zaokrąglonych rogów w całym motywie. Sprawdź dostępne opcje w pliku _variables.scss, a zrozumiesz o ile łatwiejsze staje się dostosowywanie Bootstrap 4 do własnych potrzeb.
7. Porzucenie wsparcia IE8
Przez wiele lat Internet Explorer blokował prawdziwe tworzenie stron internetowych. Starsi programiści pamiętają bolesne chwile i sztuczki przygotowywane dla IE6. Ta popularna przeglądarka staje się lepsza z każdą wersją, jednak niewystarczająco szybko w porównaniu z nowoczesnymi przeglądarkami.
Porzucenie wsparcia dla IE8 to szansa na wykorzystanie najlepszych części CSS bez użycia dziwnych sztuczek i wsparcia wstecznego. Jednostki względne, takie jak em i rem ułatwiają tworzenie responsywnej typografii i ustawiania rozmiarów komponentów. Zawsze możesz korzystać z Bootstrap 3, jeżeli potrzebujesz wspierać IE8.
Zakończenie wspierania IE8 umożliwia bezpieczniejsze połączenia jQuery 2.0 i Bootstrapa. Samo jQuery 2.0 jest mniejsze, szybsze i ma więcej funkcjonalności.
8. Usprawnienia JavaScript
Bootstrap 4 wspiera ES6, choć nie będzie to miało znaczenia dla większości użytkowników to programiści otrzymają wiele usprawnień. Kod wtyczek został przepisany do ES6, a całość kompiluje Babel. Wszystko to upraszcza proces utrzymania kodu.
Programiści zdecydowali o wsparciu UMD dla JavaScript. Odkąd CommonJS oraz AMD stały się popularne jako wzorce modułu, programiści mieli problem wyższości jednego nad drugim. Universal Module Definition został stworzony do wspierania obydwu, ale także starego stylu zmiennych globalnych.
9. Poprawki komponentów
Bootstrap 4 zawiera wiele komponentów, a niektóre z nich wymagają włączonego JavaScriptu. Podpowiedzi (ang. Tooltips), a także te złożone (ang. Popovers) są wyświetlane w połączeniu z elementem rodzica. Dla lepszego automatycznego umiejscowienia podpowiedzi i poprawy wydajności programiści skorzystali ze skryptu Tether.
To narzędzie stworzone przez zespół HubSpot pomaga efektywnie w dołączaniu podpowiedzi do strony, gdzie są pozycjonowane.
10. Zmieniona dokumentacja
Nowe funkcjonalności zostały dopisane do dokumentacji, a istniejące uaktualniono. Całości dokumentacji została przepisana do Markdown. Udostępniono również wyszukiwanie na stronie dokumentacji, co pozwoli na łatwiej znalezienie interesujących części.
Podsumowanie
Data wydania stabilnej wersji Bootstrap 4 nie jest jeszcze znana, ale nawet wczesna wersja alfa jest ciekawa. Jeśli planujesz korzystanie z Bootstrap 4 w przyszłości to warto wcześniej sprawdzić dostępne funkcjonalności i zapoznać się z nimi przed oficjalnym wydaniem, ponieważ do tego czasu programiści będą koncentrowali się głównie na poprawkach i testowaniu frameworka.
Inna świetna wiadomość ogłoszona przez zespół projektowy brzmi: „Nie zaprzestaniemy wspierania Bootstrap 3 po starcie nowej wersji”. Dobrze wiedzieć, że programiści wyciągnęli wnioski z natychmiastowego porzucenia drugiej wersji frameworka po starcie wersji trzeciej.