Pełna wersja Bootstrapa 5 zbliża się do nas wielkimi krokami, a w tzw. międzyczasie twórcy uraczyli nas wersją alpha popularnego frameworku. Bootstrap 5 alpha, co dla nas przygotowali?
1. Rozstanie z jQuery.
Twórcy zdecydowali się usunąć jQuery jako zależność i zastąpić go czystym JavaScriptem. Dzięki temu Bootstrap ma mniej obciążać stronę oraz być lżeszy.
2. CSS custom properties
Dzięki porzuceniu wsparcia dla Internet Explorera, w nowej wersji Bootstrapa zobaczymy więcej niestandardowych propertek CSS. Wcześniej (w v4) były stosowane nielicznie dla koloru oraz czcionek. Teraz mają się pojawić w niektórych komponentach oraz opcjach layoutu.
Przykład w komponencie .table:
.table {
--bs-table-bg: #{$table-bg};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg};
// Styles here...
}3. Ulepszona dokumentacja
Więcej przykładów, usunięcie niejednoznaczności oraz całkowicie nowa zakładka „Customize”.
4. Więcej kolorów
Bootstrap 5 to rozszerzona paleta kolorów oraz poprawiony kontrast aby łatwiej dostosować stronę do postawionych wymagań. Dodatkowo w nasze ręce oddane zostały wskaźniki kontrastu kolorów dostępne w dokumentacji.
5. Zaktualizowane formularze
Od teraz wszystkie informacje na temat formularzy (wcześniejsze zakładki components -> „input group” oraz „forms”) są dostępne w zakładce Forms. Co więcej, twórcy przeprojektowali i ujednolicili kontrolki (radio button, checboxy itd.)
6. Własna baza ikon SVG
Bootstrap 5 udostępnia bazę ponad 1000 ikon w formacie SVG. Dodatkowo, z pomocą przychdzi nam nowy SVG sprite. Dzięki niemu nie będziemy musieli wpisywać całego kodu HTML do zainportowania pliku SVG:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>7. RFS (Responsive Font Sizes)
Stworzenie responsywnej, dobrze wyglądającej strony internetowej na komputery, telefony i tablety bywa czasochłonne. Wraz z Bootstrapem 5 dostajemy mechanizm RFS, który zatroszczy się o automatyczne dostosowywanie większości właściwości CSS (font-size, margin, padding, border-radius, box-shadow) w zależności od rozmiaru okna przeglądarki. Więcej informacji o RFS znajdziesz tutaj.
8. Zmiany w grid layout
- nowy poziom rozmiaru siatki
.col-xxl-dla ekranów minimum 1400px. - klasa
.gutterzostały zastąpione przez.g* - Dodano klasy odstępów w pionie.
- Kolumny nie posiadają już domyślnie atrybutu
position: relative
Jak widać Bootstrap 5 zapowiada się ekscytująco a wersja alpha wprowadziła trochę nowości. Z niecierpliwością wyczekuje nowych wiadomości, o których jak tylko się pojawią będę informował na blogu! 🙂
Źródła: