Bootstrap jest wszechobecny, ale jego uniwersalność nie oznacza, że zawsze jest optymalnym rozwiązaniem. Przedstawiamy kilka interesujących alternatyw!
Analizując kod źródłowy współczesnych stron internetowych, często natrafiamy na Bootstrap. Przyzwyczailiśmy się do konstrukcji takich jak „container-fluid”, „row”, „col-sm-6”, że trudno nam wyobrazić sobie inne podejście do tworzenia interfejsów. Automatycznie, rozpoczynając nowy projekt, sięgamy po sprawdzone rozwiązanie. Jednak popularność nie jest wyznacznikiem tego, czy Bootstrap jest idealny do każdego projektu i potrzeb.
Szczególnie w przypadku minimalistycznych frontendów, ładowanie wszystkich zasobów Bootstrap CSS i JS może prowadzić do znacznego obciążenia.
Ten artykuł ma na celu:
Uważam, że wyjaśnienie „dlaczego” jest kluczowe, ponieważ często nie zdajemy sobie sprawy, że napotykamy trudności lub komplikujemy sobie pracę, wybierając Bootstrap. Chcę podkreślić, że nie jest to krytyka Bootstrapa. Uważam go za bardzo przydatne narzędzie i korzystam z niego, kiedy to ma sens. Jednak, jako indywidualny programista, muszę myśleć o wyborze najskuteczniejszego rozwiązania, a nie tylko najpopularniejszego. Nie jestem też projektantem interfejsu użytkownika, więc nie martwię się wszystkimi aspektami tworzenia frontendów.
Przejdźmy zatem do alternatyw.
Siatka Flexbox
Zastanów się: największą motywacją do korzystania z Bootstrapa jest jego system siatki. Mimo początkowej trudności z klasami „row”, „col-md-6”, teraz myślenie o układzie w kategoriach wierszy, kolumn i przesunięć stało się dla nas naturalne.
Bądźmy szczerzy, reszta funkcji Bootstrapa bywa uciążliwa. Musimy pamiętać mnóstwo klas, niezależnie od tego, czy chodzi o formularze, nawigację, przyciski, tabele czy inne elementy. Wielu programistów, w tym ja, nadal nie jest przyzwyczajonych do wszystkich klas i ich zastosowań, dlatego często wykorzystują Bootstrap jedynie do siatki, a resztę stylów CSS tworzą samodzielnie.
W takim przypadku znacznie lepszym rozwiązaniem może być Siatka Flexbox.
Flexbox Grid to system siatki bazujący na właściwościach CSS Flexbox. W przeciwieństwie do samego CSS, tutaj cała złożoność jest ukryta, dzięki czemu możemy skupić się na rozmieszczaniu elementów. Nazewnictwo kodów i klas jest zbliżone do tego z Bootstrap 4, co eliminuje trudności związane z przełączaniem się między tymi narzędziami. Przykładowo, tak wygląda kod dla „przestrzeni wokół” w siatce Flexbox:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
Zminimalizowany plik CSS tego systemu waży jedynie 10,7 KB, co pozwala na oszczędność kilkuset KB w rozmiarze plików. Obecnie, Flexbox Grid jest moim ulubionym, ponieważ unikam walki z Bootstrapem, aby go w pełni dostosować. Lubię zaczynać od czystych elementów i stylizować je samodzielnie, wykorzystując siatkę Flexbox tam, gdzie jest to konieczne.
Dowiedz się więcej o Flexbox online.
Pure CSS
Czy nie byłoby wspaniale, gdyby Bootstrap był modułowy i można było zaimportować tylko te elementy, które są potrzebne?
Otóż Pure CSS to właśnie oferuje – zestaw modułów obejmujących różne obszary funkcjonalne strony. Możemy pobrać jeden lub wszystkie, a rozmiar nie przekroczy 3,7 KB!
Tak, to prawda.
Wszystkie moduły, spakowane i skompresowane gzipem, mają rozmiar 3,7 KB. Moduł siatki waży tylko 0,8 KB, a moduł Base 1,0 KB. Twórcy PureCSS podkreślają, że framework został stworzony z myślą o urządzeniach mobilnych, dlatego każda linijka CSS została dokładnie przeanalizowana pod kątem wydajności.
Załóżmy, że potrzebujesz tylko siatki i formularzy. Pobierz te dwa moduły (wraz z Base) i masz całość w mniej niż 3,4 KB! Nie musisz dołączać stylów CSS z modułów przycisków, tabel i menu, jeśli ich nie używasz.
PureCSS ma jednak swoje klasy, a wynikowy kod różni się od tego, do którego jesteśmy przyzwyczajeni w Bootstrapie:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
Zauważ, że nie mamy już 12-kolumnowej siatki. PureCSS stosuje własny system, gdzie szerokość kolumny jest określona za pomocą „pure-u-lg-1-4”, co oznacza, że element powinien zajmować 1/4 lub 25% dostępnej szerokości na dużych ekranach. Dostępne są również szerokości będące wielokrotnościami 1/5.
Podsumowując, PureCSS to świetne, modułowe narzędzie, które można wykorzystywać w razie potrzeby. Wiąże się to jednak z koniecznością nauki nowego (nieco innego) podejścia do projektowania.
PureCSS, jak Bootstrap, ma własne klasy i styl domyślny, co sprawia, że oba rozwiązania są do siebie podobne pod tym względem.
Zimit
Zimit to framework nieco inny niż pozostałe na tej liście. Służy do budowania interfejsów użytkownika, ale jest skierowany do konkretnych przypadków – makiet.
Czasami konieczne jest stworzenie frontendu prezentującego działanie produktu. Najlepiej byłoby zaangażować projektanta/programistę UI i stworzyć makiety w specjalistycznym narzędziu (np. Moqups, Balsamiq). Strony byłyby perfekcyjnie dopracowane, kolorystyka odpowiednio dobrana, a strony gotowe do udziału, recenzji i komentarzy.
Jednak często pracujemy sami, musimy wykonywać wiele zadań naraz. Wtedy potrzebujemy frameworka, który:
- Umożliwia kodowanie w HTML/CSS.
- Jest lekki.
- Oferuje szeroki zakres podstawowych komponentów.
- Ma spójną stylistykę.
- Stylistycznie przypomina szare makiety.
- Jest łatwy do nauczenia.
- Ma wbudowany preprocesor CSS.
Zimit spełnia wszystkie te wymagania. Ma jedynie 84 KB i oferuje szeroką gamę komponentów. Oto kilka przykładów, które bardzo mi się spodobały, ponieważ samodzielne kodowanie ich zajęłoby dużo czasu.
Widok drzewa
Bułka tarta
Karty
Więcej komponentów można znaleźć tutaj.
Spójrzmy na kod. Tak wygląda wykorzystanie systemu siatki w Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
„c” oznacza „kolumnę”, więc „c4” to kolumna zajmująca cztery jednostki (siatka ma rozmiar 12, tak jak w Bootstrapie). Jest to bardzo intuicyjne rozwiązanie, przypominające Bootstrapa.
Podsumowując, Zimit jest kompletnym i łatwym w użyciu frameworkiem do tworzenia responsywnych prototypów interfejsów użytkownika. Jest lepszy od Bootstrapa (w kontekście prototypowania), ponieważ Bootstrap jest znacznie większy, a wygląd wynikowego projektu bywa toporny.
Startowy pakiet HTML
W większości projektów szybkość jest kluczowa. Największą przeszkodą w szybkim tworzeniu stron jest frontend, a największym „opóźnieniem” w programowaniu frontendu jest konieczność kodowania estetycznych i interaktywnych komponentów. Zważywszy na różnorodność zachowań i rozmiarów ekranów, zarządzanie komponentami może stać się koszmarem dla programisty.
Startowy pakiet HTML oferuje alternatywne podejście.
Mówiąc w skrócie, jest to zbiór eleganckich komponentów, które możemy łatwo włączyć do naszych projektów, znacząco skracając czas programowania. Oto kilka komponentów, które szczególnie mnie zainteresowały:
Rozwijane menu
Przyciski
Karty (wyśrodkowane i z ikonami)
Materialize
Jeśli doceniasz Bootstrap za dostarczanie gotowych rozwiązań typowych problemów projektowych, ale preferujesz styl Material Design, powinieneś wypróbować Materialize.
Materialize jest w dużej mierze podobny do Bootstrapa – oferuje 12-punktową siatkę, przesunięcia i znane komponenty, takie jak formularze i karty. Ma jednak kilka funkcji, które mogą przekonać wielu.
Push/Pull
Funkcja push/pull w Materialize CSS umożliwia zmianę kolejności kolumn. Jest to podobne do nowego standardu CSS Grid, gdzie układ nie jest determinowany kolejnością elementów.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
Efektem jest:
Jak widać, kolumny zamieniły się miejscami, co może być trudne do osiągnięcia w tradycyjnym CSS opartym na Bootstrapie.
Gadżety JavaScript
Materialize oferuje wiele funkcji i efektów JavaScript: podpowiedzi, tosty (powiadomienia w stylu Androida), paralaksy, przypinanie elementów i wiele innych. Jednym z interesujących efektów jest FeatureDiscovery, który pozwala podświetlić element na stronie, np. po naciśnięciu przycisku, aby zwrócić na niego uwagę użytkownika. Trudno opisać to słowami, dlatego polecam odwiedzić stronę https://materializecss.com/feature-discovery.html, aby zobaczyć, jak to działa.
Podsumowując, Materialize to świetna alternatywa dla Bootstrapa dla tych, którzy cenią funkcjonalność frameworka w stylu Material Design.
Podsumowanie
Bootstrap stał się synonimem responsywnego designu. To on spopularyzował termin „mobile-first” i pokazał, jak go zaimplementować. Choć Bootstrap sprawdza się w wielu sytuacjach, nie zawsze jest to najlepsze rozwiązanie. Jeśli czujesz, że Bootstrap Cię ogranicza, a Twoje potrzeby są nietypowe, warto rozważyć jedną z opisanych opcji.