O frameworkach CSS na przykładzie Bootstrapa

Arleta HTML i CSS od postaw 9 marca, 2020 | 1

Korzystanie z frameworków CSS jest codziennością w bardzo wielu projektach komercyjnych. W mojej opinii nie ma w tym nic złego, szczególnie jeżeli pracujemy nad rozbudowaną biznesowo aplikacją, która służy np. do zarządzania danymi. Kiedy priorytetem zamawiającego jest przejrzystość i funkcjonalność, a oryginalność i wyjątkowy design nie są szczególnie wartościowe, użycie frameworka może znacząco skrócić czas wytwarzania oprogramowania.

Co to jest framework?

Framework to zestaw narzędzi i reguł, który z definicji ma wspierać efektywność i wydajność pracy swoich użytkowników. Frameworkiem jest np. Scrum, czyli jedna z metodologii zwinnego wytwarzania oprogramowania. Oferuje użytkownikom pewne ramy (wytyczne, role, spotkania), które mają prowadzić do usprawnienia pracy zespołu. W praktyce efekt poszczególnego zespołu zależy zawsze od czynnika ludzkiego: interpretacji i adaptacji zasad oraz odpowiedniego wykorzystania narzędzi.

Nie inaczej sprawa wygląda z frameworkami wykorzystywanymi przy pisaniu kodu. Tutaj również stopień powodzenia zależy od znajomości narzędzia, prawidłowego wykorzystania oraz umiejętności sprawnego adaptowania pewnych elementów do własnych potrzeb.

Frameworki CSS

W świecie front-endu frameworki pojawiają się i znikają z prędkością światła. Są jednak taki, które funkcjonują już dłuższy czas i mają się dobrze. Przykładem tego ostatniego jest właśnie Bootstrap. Zadebiutował w sierpniu 2011 roku, obecnie stabilną wersją jest 4.4.1, a pierwsza beta Bootstrapa 4 ujrzała światło dzienne w 2017 roku. W przyszłości ma pojawić się wersja 5, która nie będzie już wspierała przeglądarki Internet Explorer 10 oraz nie będzie oparta o bibliotekę JavaScript jQuery 1. Inne popularne frameworki to m. in. Foundation, Materialize czy Bulma.

Bootstrap

W swojej dotychczasowej karierze korzystałam z Materialize i Bootstrapa, ale to z tym drugim frameworkiem mam o wiele większe doświadczenie. Obecnie wykorzystuję jego warianty w aplikacjach pisanych we frameworkach JS Angular i React, czli ng-bootstrap i react-bootstrap. W codziennej pracy Bootstrap jest dla mnie nieoceniony: pisanie ręcznie wszystkich rozwiązań byłoby kłopotliwe.

W tym wpisie prezentuję wybrane możliwości tego frameworka i to wyłącznie te, które nie wymagają pisania kodu JavaScript. Omówione przeze mnie elementy są jedynie drobnym wstępem, ponieważ możliwości wykorzystania dobrodziejstw tego narzędzia są ogromne. Zainteresowanych odsyłam do bardzo dobrej dokumentacji.

Dodawanie Bootstrapa do projektu

Żeby skorzystać z Bootstrapa w projekcie, należy go najpierw do niego dołączyć. W tym wpisie zupełnie pomijam rozważania dotyczące JavaScript czy projektów z Webpackiem, więc nie będę rozwijać tematu instalowania zależności przez managery paczek.

Najprostszym sposobem dodania zasobów Bootstrapa do projektu jest dołączenie linka do arkusza w sekcji <head> pliku index.html: (rekomendacja ze strony Bootstrap, wersja na dzień 9 lutego 2020)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Należy pamiętać, aby ten wpis znalazł się nad wszystkimi pozostałymi stylami. Aktualne linki do CDN można znaleźć tutaj.

Oczywiście w tym wypadku pojawienie się stylów na stronie internetowej uzależnione jest m. in. od tego czy użytkownik ma połączenie z internetem, jednak z reguły korzystanie ze stron www wymaga takiego połączenia 😉 Zdarza się jednak, że chcemy stronę testować lokalnie i jeżeli przypadkowo będziemy offline, to style się nie załadują.

Istnieje również możliwość pobrania paczki z plikami Bootstrapowymi i dołączenie ich do swojego projektu. Aktualne pliki można pobrać stąd.

Wsparcie przeglądarek

Bootstrap całkiem dobrze wspiera wyświetlanie na różnych sprzętach i przeglądarkach. Wystarczy spojrzeć na deklarowane wsparcie:

Oczywiście jak zwykle mogą zdarzyć się problemy, szczególnie ze wsparciem starszych wersji Internet Exporer, na szczęście jej używanie przestało być standardem. Podobnie jest z mniej popularnymi przeglądarkami. Informacje o najczęstszych problemach są dostępne w dokumentacji frameworka: link.

Breakpointy i responsywność

Bootstrap umożliwia dostosowanie layoutu do wielu urządzeń. W tym celu oferuje tzw. breakpointy, czyli przedziały szerokości wyświetlaczy, dla których możemy dostosowywać layout. Z uwagi na to, że Bootstrap został opracowany zgodnie z podejściem mobile first (projektowanie, które za punkt wyjścia stawia urządzenia mobilne, co powinno przekładać się na przełożenie środka ciężkości na treść), domyśle wartości są równoważne z najmniejszym breakpointem na skali: XS.

XS (extra small) < 576px
S (small) ≥ 576px
MD (medium) ≥ 768px
L (large) ≥ 992px
XL (extra large) ≥ 1200px

Breakpointy działają zatem w taki sposób, że chcąc np. zadeklarować wartość wybranej właściwości na 1 dla XS i S, a dla M, L i XL ustawić wartość 2, należy jedynie zadeklarować właściwość dla XS oraz nadpisać dla M. Pozostałe brekpointy „odziedziczą” wartości po tych „z dołu”.

Korzystanie z Bootstrapa

Jak wykorzystać Bootstrapa w praktyce? W oryginalnym wydaniu operuje on na klasach css (inaczej jest np. w react-bootstrap) oraz na selektorach elementów. Oznacza to, że jeżeli chcę użyć jakiegoś ustawienia dla mojego elementu, to najczęściej w jego atrybucie [class] dopisuję klasę, którą dołączyłam do projektu w arkuszu stylów w moim index.html.

Skąd wziąć te klasy? Zostały opisane w dokumentacji, również w tym artykule podam garść przykładów.

Dobrym sposobem sprawdzenia co tak naprawdę kryje się za daną klasą, jest zerknięcie w arkusz stylów. Ten zaimportowany z CDN jest zminifikowany (ma usunięte wszystkie spacje, entery, wcięcia: nie da się go czytać), ale z adresu można usunąć fragment .min i uzyskać adres do wersji bez minifikacji:

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css

Jest o tyle przydatne, że czasem chcemy nadpisać jedną lub dwie deklaracje i dobrze wiedzieć w której klasie się znajdują.

Kontenery

Kontenery to najbardziej podstawowe elementy layoutu Bootstrapa. Ich użycie jest konieczne do poprawnego korzystania z grida (następny akapit). Bootstrap oferuje trzy rodzaje kontenerów:

.container – klasa, która ustawia wartość właściwości max-width dla każdego z breakpointów
.container-fluid – klasa, której szerokość to zawsze 100% szerokości dla każdego z breakpointów
.container-{breakpoint} – klasa, która nadaje szerokość 100% dla wybranego breakpointu (w miejsce {breakpoint} należy wstawić skrót nazwy breakpointu, czyli np. .container-md)

W praktyce różnice są następujące:

<div class="container">
  <p>Lorem ipsum...</p>
</div>
<div class="container-fluid">
  <p>Lorem ipsum...</p>
</div>

Pierwszy element z klasą container nie zajmuje całej szerokości rodzica. Jeżeli prześledzimy style Bootstrapa to zauważymy, że do stylów

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

„gratisem” otrzymaliśmy jeszcze

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

Niech Was nie przeraża zapis @media: oznacza on, że poniższy kod stosuje się do elementów o klasie .container dla urządzeń o minimalnej szerokości 768 pikseli (więcej napiszę o tym we wpisie o responsywności).

Oczywiście tekst z drugiego akapitu również nie jest idealnie „przyklejony” do boków, ponieważ klasa .container-fluid zapewnia 15px paddingu (marginesu wewnętrznego) z lewej i prawej strony kontenera.

Grid

Grid to nic innego jak siatka złożona z rzędów i kolumn. Za pomocą siatki możemy zaplanować układ elementów na stronie oraz wyrównywać je względem siebie.

Grid w Bootsrapie oferuje możliwość podzielenia strony na maksymalnie 12 kolumn. Nie oznacza to, że wszystkie 12 trzeba wykorzystać: można np. podzielić stronę na 3 sekcje-kolumny, z których każda będzie miała szerokość 4, ponieważ 3 x 4 = 12. Przykłady:

<div class="container">
  <div class="row">
    <div class="col-12">col-12</div>
  </div>
  <div class="row">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
  </div>
</div>

W przypadku kiedy w każdym z layoutów (wersji mobilnej, desktopowej itd). chcemy uzyskać ten sam równy efekt, wystarczy w klasie każdego elementu <div> wstawić klasę .col bez dodatkowego oznaczenia liczby kolumn – Bootstrap automatyczne podzieli szerokość na równe części.

Jeżeli jednak w layouty mają się różnić należy nadpisać klasy mobilne klasami dla desktopu itd.

<div class="container">
  <div class="row">
    <div class="col-12">col-12</div>
  </div>
  <div class="row">
    <div class="col-12 col-md-4">.col-12 .col-md-4</div>
    <div class="col-12 col-md-4">.col-12 .col-md-4</div>
    <div class="col-12 col-md-4 >.col-12 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
  </div>
</div>

W gridzie możemy wykorzystać tzw. offeset, czyli przerwę o szerokości wybranej liczby kolumn. Offset stosuje się w elemencie, przed którym ma się znaleźć odstęp:

<div class="container">
  <div class="row">
    <div class="col-1">.col-1</div>
    <div class="col-10 offset-1">.col-10</div>
  </div>
</div>

Kolory

Bootstrap oferuje swoją domyślą paletę kolorystyczną. Każdy z kolorów ma swoją nazwę, kolejno: primary, secondary, success, danger, warning, info, etc. Domyślną kolorystykę dobrze ilustruje poniższy przykład:

Podobnie kolor tekstu lub linków z oznaczeniem primary, secondary, etc będzie kolorystycznie taki sam jak na powyższym przykładzie. Dla przykładu, kod:

<p class="text-danger bg-info">.text-danger .bg-info</p>
<a href="#" class="bg-success text-light">.bg-success .text-light</a>

da efekt w postaci:

Dlaczego drugi element ma tło wyłącznie pod tekstem, a nie tak jak element pierwszy na całej szerokości? Ponieważ element <p> jest elementem blokowym (display: block;) i domyślnie jego szerokość to 100%, a element <a> to element liniowy (display: inline;) i jego szerokość równa jest szerokości jego zawartości.

Nagłówki

Aby uzyskać stylowanie nagłówków wystarczy użyć odpowiedniego znacznika, np. <h2> lub użyć odpowiedniej klasy, w tym przypadku .h2. To dlatego, że w arkuszu stylów Boostrapa znajdziemy zapis:

h2, .h2 {
  font-size: 2rem;
}

Zatem dla kodu

<h2>Nagłówek</h2>
<p class="h2">Nagłówek - akapit</p>

efekt będzie następujący:

Czy zatem oba zapisy są równoważne? Absolutnie nie! Jak pisałam w tekście na temat semantycznego kodu HTML nagłówki (w postaci elementów, tj. <h1>, <h2>, etc.) powinny stanowić logiczną strukturę odzwierciedlającą hierarchię treści na stronie, a nagłówek <h1> może wystąpić tylko jeden raz.

Alerty

Alerty to zdefiniowany z Bootstrapie sposób komunikowania użytkownikowi pewnych istotnych treści w postaci tekstu w kolorowych ramkach. Na przykład:

<div class="alert alert-primary" role="alert">
  .alert .alert-primary
</div>
<div class="alert alert-danger" role="alert">
  .alert .alert-danger
</div>
<div class="alert alert-success" role="alert">
  .alert .alert-success
</div>

wyświetli się w przeglądarce Chrome następująco:

Przyciski

Buttony są elementem prawie każdej strony czy aplikacji internetowej, która umożliwia interakcje z użytkownikiem. Bootstrap umożliwia nadawanie im uniwersalnych stylów, nie tylko kolorystycznych.

<button type="button" class="btn btn-info">
  .btn .btn-info
</button>
<button type="button" class="btn btn-link">
  .btn .btn-link
</button>
<button type="button" class="btn btn-success btn-lg">
  .btn .btn-success .btn-lg
</button>
<button type="button" class="btn btn-secondary btn-sm">
  .btn .btn-secondary .btn-sm
</button>
<button type="button" class="btn btn-danger btn-lg btn-block">
  .btn .btn-danger .btn-lg .btn-block
</button>

Proste formularze

Boostrap oferuje gotowe przykłady użycia dla większych partii kodu, niż tylko pojedyncze elementy, jak np. paski nawigacji czy rozwijane menu. Część z nich wymaga dodania kodu JavaScript, jednak sam wygląd pól jest sterowany wyłącznie za pomocą kodu HTML i klas CSS.

Jednym z przykładów możliwych do zastosowania grup elementów są formularze. Poniżej prezentuję kod oraz widok prostego formularza, który może służyć do rejestracji. Składa się z pola email, hasła, powtórnego hasła oraz checkboxa do potwierdzania zaznajomienia się z regulaminem, do którego prowadzi łącze.

<form>
  <div class="form-group">
    <label for="emailInput">Adres email</label>
    <input type="email" class="form-control" id="emailInput">
  </div>
  <div class="form-group">
    <label for="passwordInput">Hasło</label>
    <input type="password" class="form-control" id="passwordInput"
    aria-describedby="passwordHelp">
    <small id="passwordHelp" class="form-text text-muted">
      Hasło musi zawierać cyfry, litery i znaki specjalne
    </small>
  </div>
  <div class="form-group">
    <label for="passwordInputRepeat">
      Powtórz hasło
    </label>
    <input type="password" class="form-control"
    id="passwordInputRepeat">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="rulesCheck">
    <label class="form-check-label" for="rulesCheck">
      Akceptuję a href="#">regulamin/a>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Zapisz/button>
</form>

Ten rozbudowany przykład zawiera kilka interesujących klas. Np .form-control to:

.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Klasa zawiera dość sporo dyrektyw i szczegółowo doprecyzowuje wygląd elementu i jego lementów-potomnych. To jednak nie wszystko: klasa .form-control w akruszu stylów Bootstrapa występuje 73 razy i pozostałe użycia definiują stany formularza np. w różnych rozdzielczościach oraz czy przy użyciu różnych pseudo-klas, np. :focus.

Podsumowanie

Podkreślam raz jeszcze: Bootstrap to potężne narzędzie z wieloma możliwościami, których jedynie skromny wierzchołek zaprezentowałam w tekście powyżej. Mam nadzieję, że tym samym zachęciłam do własnego eksplorowania tego frameworka 🙂

Jedna odpowiedź

Brianrap pisze:

24 marca, 2020 o 11:00 pm

I love this website – its so usefull and helpfull.

Odpowiedz