Bootstrap jest wszędzie, ale nie zawsze jest odpowiednim narzędziem do pracy. Oto kilka świetnych alternatyw!
Jeśli w dzisiejszych czasach losowo sprawdzisz kod źródłowy front-endu witryny, prawdopodobnie znajdziesz pod nim Bootstrapa. Wszyscy tak bardzo przyzwyczailiśmy się do takich pojęć, jak kontener-fluid, wiersz, col-sm-6 itd., że trudno sobie wyobrazić, by jakikolwiek inny styl programowania front-endu był w ogóle możliwy. I tak kiedy musimy budować kolejny projekt, nieświadomie sięgamy po Bootstrap. To powiedziawszy, popularność nie sprawia, że Bootstrap dobrze pasuje do wszystkich projektów i potrzeb.
W rzeczywistości, w przypadku naprawdę szczupłych frontendów, ładowanie wszystkich Bootstrap CSS a JS może powodować poważne wzdęcia.
Ten artykuł ma dwa cele:
Myślę, że część wyjaśniająca jest naprawdę ważna, ponieważ w większości przypadków ludzie nawet nie zdają sobie sprawy, że mają problem lub że utrudniają sobie pracę, wybierając Bootstrap. Na koniec pamiętaj, że w żadnym wypadku nie jest to post anty-Bootstrap. Uwielbiam Bootstrap 4 i używam go, kiedy tylko mogę. Ale wtedy jestem indywidualnym programistą, który musi pomyśleć o użyciu najpopularniejszego rozwiązania; Ponadto nie jestem programistą interfejsu użytkownika per se, więc nie martwię się zbyt wieloma rzeczami podczas tworzenia front-endów.
I z tym przyjrzyjmy się, jakie mamy alternatywy.
Spis treści:
Siatka Flexbox
Pomyśl o tym przez chwilę: największym powodem, dla którego zacząłeś używać Bootstrapa i nadal go używasz, jest jego system grid. Jasne, zajęło trochę czasu przyzwyczajenie się do klas wierszy, col-md-6 itp., ale teraz myślenie o układzie w kategoriach wierszy, kolumn, przesunięć itp. to już druga natura.
A jeśli jesteś ze sobą szczery, przekonasz się, że wszystko inne w Bootstrap jest trochę uciążliwe. Jest mnóstwo zajęć do zapamiętania, niezależnie od tego, czy robisz formularze, nawigację, przyciski, tabele, czy cokolwiek innego. Jeśli jesteś podobny do mnie, nadal nie przyzwyczaiłeś się do wszystkich klas i tego, co robią, i często używasz Bootstrap tylko do siatki i sam piszesz wszystkie inne CSS.
Jeśli tak, możesz zrobić o wiele lepiej z Siatka Flexbox.
Flexbox Grid, jak sama nazwa wskazuje, jest systemem siatki opartym na CSS Flexbox nieruchomości. Jednak w przeciwieństwie do techniki CSS, cała złożoność jest ładnie wyabstrahowana, dzięki czemu możesz skupić się tylko na umieszczaniu elementów tak, jak chcesz. Najlepsze jest to, że wszystkie nazwy kodów i klas naśladują to, czego chciałbyś w Bootstrap 4, co oznacza, że przełączanie się między tymi dwoma narzędziami wymaga zerowego tarcia umysłowego. Na przykład, oto jak 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 dla tego systemu grid ma zaledwie 10,7 KB, co pozwala zaoszczędzić kilkaset KB w ostatecznym rozmiarze pobierania. W dzisiejszych czasach Flexbox Grid jest moim ulubionym, ponieważ nie chcę walczyć z Bootstrapem, aby go w pełni dostosować. Lubię zaczynać od elementów waniliowych i samodzielnie je stylizować, używając siatki Flexbox wszędzie tam, gdzie jest to potrzebne.
Uczyć się Flexbox tutaj, online.
Czysty CSS
Czy nie byłoby fajnie, gdyby Bootstrap był podzielony na moduły i można było zaimportować tylko potrzebny moduł?
Dobrze, Czysty CSS poszedł do przodu i właśnie to zrobił — jest to zestaw modułów obejmujących różne obszary funkcjonalne strony internetowej. Możesz pobrać jeden lub wszystkie, a rozmiar pobierania nie przekroczy 3,7 KB!
Tak, dobrze to przeczytałeś.
Wszystkie moduły spakowane razem i spakowane gzipem mają rozmiar 3,7 KB, chociaż pojedynczo stanowią więcej. Moduł grid ma tylko 0,8 KB, podczas gdy moduł Base to 1,0 KB. Zespół odpowiedzialny za PureCSS twierdzi, że został zbudowany w całości z myślą o urządzeniach mobilnych, dlatego każda linia CSS została dokładnie przeanalizowana pod kątem wydajności, zanim została uwzględniona.
Powiedzmy, że potrzebujesz tylko modułu siatki i formularzy. Cóż, po prostu pobierz te dwa (wraz z modułem Base), a skończysz w mniej niż 3,4 KB! Nie musisz dołączać CSS z modułów przycisków, tabel i menu, jeśli nie zamierzasz ich używać.
PureCSS ma jednak swoje klasy, a wynikowy kod nie naśladuje Bootstrapa, do którego możesz być bardzo przyzwyczajony:
<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żysz, że nie ma już 12-kolumnowej siatki. PureCSS ma swój system siatki, który określa, jaką szerokość powinna mieć kolumna. Tak więc pure-u-lg-1-4 oznacza, że ten element powinien zajmować 1/4 lub 25% dostępnej szerokości na dużych ekranach. Dostępne są również szerokości jako wielokrotności 1/5.
Podsumowując, PureCSS to wyzwalające i niesamowite narzędzie CSS (framework?), które możesz wybierać w razie potrzeby. To powiedziawszy, wiąże się z sporym wpisowym i krzywą uczenia się, ponieważ musisz nauczyć się nowego (nieco innego) sposobu robienia rzeczy.
PureCSS ma również własne klasy i domyślny styl, więc nie różni się zbytnio od Bootstrapa.
Zimit
The Zimit framework jest trochę dziwny na tej liście. Tak, jest to struktura do budowania interfejsów użytkownika, ale jest skierowana do określonych typów interfejsu użytkownika: makiet.
Są chwile, kiedy musisz opracować front-end, aby pokazać działanie produktu. Idealnym sposobem, aby to zrobić, byłoby oczywiście zaangażowanie projektanta/programisty UI i stworzenie makiet na jednym z zaawansowanych narzędzi do tworzenia szkieletów (przychodzą mi na myśl Moqups, Blasmic itp.). Strony byłyby idealne do piksela, kolorystyka elegancka i dobrze dobrana, a strony byłyby otwarte na uczestnictwo, recenzje, komentarze itp.
Ale prawdziwe życie nie jest idealne i często jesteś jedynym mężczyzną w pracy i musisz nosić wszystkie kapelusze i wykonywać swoją pracę. Wtedy potrzebujesz frameworka, który:
- Pozwala na kodowanie w HTML/CSS
- jest lekki
- Posiada obszerny zbiór podstawowych komponentów
- Ma przyzwoity i spójny język stylu
- Jeśli to możliwe, przypomina „szarawy” ton konstrukcji szkieletowej
- jest łatwy do nauczenia
- Ma wbudowany preprocesor CSS
Zimit zaznacza wszystkie te pola. Ma tylko 84 KB i oferuje szeroką gamę komponentów do wyboru. Oto kilka przykładów, które bardzo mi się spodobały, ponieważ samodzielne kodowanie zajmie dużo czasu.
Widok drzewa
Bułka tarta
Karty
Jest o wiele więcej gadżetów do odkrycia. Sprawdź je tutaj.
Spójrzmy, jak wygląda kod. Oto, jak możesz użyć 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 tutaj „kolumnę”, więc „c4” oznacza kolumnę obejmującą cztery jednostki (siatka ma rozmiar 12, podobnie jak w przypadku Bootstrapa). Bardzo podobny do Bootstrapa i moim zdaniem bardzo intuicyjny.
Podsumowując, Zimit jest kompletnym i łatwym frameworkiem do tworzenia prototypów interfejsu użytkownika, które są responsywne i szybko wyglądają dobrze. Jest lepszy niż Bootstrap (jeśli chodzi o prototypowanie), ponieważ Bootstrap to znacznie większy plik do pobrania, a wynikowy projekt jest, no cóż, tandetny.
Początek uruchomienia HTML
W większości projektów, które budujesz, szybkość ma kluczowe znaczenie. Największą przeszkodą w przyspieszeniu tworzenia stron internetowych jest część front-endowa, a największym „opóźnieniem” w programowaniu front-endowym jest potrzeba kodowania elegancko wyglądających, interaktywnych komponentów. Ponieważ komponent może się zachowywać na wiele sposobów i istnieje wiele rozmiarów ekranu do zarządzania, kodowanie i zarządzanie komponentami może stać się koszmarem dla programisty.
Początek uruchomienia HTML oferuje alternatywę.
Mówiąc prościej; to zbiór naprawdę eleganckich komponentów, które możesz po prostu wrzucić do swoich projektów i drastycznie skrócić czas programowania. Oto kilka fajnych komponentów, które znalazłem:
Upuścić
guziki
Karty (wyśrodkowane i z ikonami)
Zmaterializować
Jeśli lubisz Bootstrap za to, że ma gotowe rozwiązanie wszystkich typowych problemów z projektowaniem stron internetowych, ale jesteś fanem stylu Material design, powinieneś wypróbować Zmaterializować.
Materialise jest w większości podobny do Bootstrap — 12-punktowy system siatki, przesunięcia i znane komponenty, takie jak formularze, karty itp. Jednak ma pewne zalety, które mogą spodobać się wielu.
Pchać ciągnąć
Funkcja push/pull w Materialize CSS umożliwia zmianę kolejności kolumn. Przypomina to nowy standard CSS Grid, w którym układ różni się od 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>
Skutkuje to:
Zauważysz, że kolumny zamieniły się miejscami, co jest być może nieosiągalne w tradycyjnym CSS opartym na Bootstrap.
Gadżety JavaScript
Istnieje wiele funkcji i efektów JavaScript, które są dostarczane z Materialize. Podpowiedzi, tosty (efemeryczne powiadomienia w stylu Androida), paraleksy, pinezki itp. to tylko niektóre z nich. Jednym z naprawdę niesamowitych efektów, które mi się podobały, jest FeatureDiscovery, który w zasadzie pozwala podświetlić element na stronie podczas jakiegoś zdarzenia (powiedzmy, naciśnięcia przycisku), aby zwrócić uwagę użytkownika na ten element. Trudno opisać to w pełni słowami, więc przejdź do https://materializecss.com/feature-discovery.html, aby zobaczyć, co mam na myśli.
Podsumowując, Materialise jest świetną alternatywą dla Bootstrap lub dla tych, którzy chcą przyjąć w pełni funkcjonalny framework Material CSS.
Wniosek
Bootstrap jest synonimem responsywnego designu. To właśnie Bootstrap spopularyzował termin „projekt mobile-first” i pokazał, jak można to zrobić. Ale podczas gdy Bootstrap wykonuje zadanie przez większość czasu, samo wykonanie zadania nie zawsze wystarcza. Jeśli czujesz, że Bootstrap Cię ogranicza, a Twoje potrzeby są wyjątkowe, pomoże Ci jedna z wymienionych tutaj opcji.