Maj 16
layout strony głównej

Tworzymy layout strony głównej za pomocą Grid Bootstrap, Flexbox, Grid CSS

W programowaniu jest tak, że jedną rzecz możesz stworzyć na różne sposoby. Dzisiaj pobawimy się różnymi technologiami i stworzymy layout strony głównej za pomocą samodzielnie napisanego grida na wzór Bootstrapa 3, Gridu z Bootstrapa 4, Flexboxa i Gridu CSS-a.

Zauważyłam, że często dostaję od Was pytania, za pomocą której metody najlepiej stworzyć layout strony głównej, która zawierałabym 4 sekcje – Header, Aside, Main i Footer. Tak naprawdę ja nie potrafię odpowiedzieć na to pytanie. Dzisiaj pokażę Ci jak można stworzyć stronę za pomocą tych trzech, a właściwie czterech „technik”.

Na warsztat weźmiemy 4 technologie – Bootstrap 3, Bootstrap 4 (który opiera się już na flexboxie), Flexbox i Grid CSS.

Czym jest grid?

Na samym początku ustalmy sobie czym jest grid? Grid jest siatką, w której znajdują się wiersze i kolumny. Wyobraź sobie tabelę w Excelu. Masz tam wiersze – rows i kolumny – columns. To dzięki nim, możemy poukładać elementy naszej strony. Są one jak puzzle. Dobrze zaprojektowany grid, sprawi, że odejdzie nam masa pracy. Grid zrobiony na podstawie Bootstrapa 3 opiera się jeszcze na „starej metodzie” floatów. Nie jest to najlepsza z możliwych metod ale sądzę, że warto ją znać.

Dzisiaj spróbujemy sobie stworzyć takie same layouty strony głównej na podstawie 4 różnych rozwiązań. Zaczynajmy!

Własny grid na podstawie Bootstrap 3

Zaczniemy od grida zrobionego na podstawie Bootstrapa 3.

Wiesz już czym są rows i columns. To bardzo dobrze, bo to niezbędne do zrozumienia grida. Grid w Boostrapie 3 opiera się na 12 kolumnach. A to wszystko dlatego, że właśnie liczba 12, daje nam sporo możliwości rozmieszczenia elementów. Możemy np. chcieć umieścić jeden element na całą stronę – wtedy użyjemy col-12, który mieści się w całej dostępnej przestrzeni. Gdybyśmy chcieli umiejscowić 2 elementy (zajmujących tyle samo miejsca, po 50%), wtedy powinniśmy użyć dwóch kolumn, nazwanych col-6 (12/2 = 6). Gdybyśmy chcieli umieścić 3 równe elementy, umieszczone obok siebie, użyjemy col-4 (12/3=4). Gdybyśmy chcieli umieścić 4 równe elementy, obok siebie, użyjemy col-3 (12/4=3). Rozumiesz zasadę? Łatwizna, prawda? 🙂

A gdybyśmy chcieli umieścić 3 element, z których jeden zawiera 50% szerokości strony, a dwa pozostałe po 25%? Wtedy użylibyśmy w sumie 3 kolumn. Pierwsza 50% to col-6 (50% z 12 = 6), dwie pozostałe to col- 3 (25% z 12 = 3).

Na samym początku, tworzenia naszego grid’a musimy sobie zdefiniować box-sizing: border-box; . Ta właściwość sprawi, że do naszych elementów na stronie nie będą doliczane żadne paddingi i marginy. Kolejną ważną kwestią jest stworzenie clear-fixa. To taki trick, który programiści stosują przy używaniu floatów. Więcej na ten temat możesz poczytać tu – clear-fix.

Ponieważ chcemy, aby wszystkie kolumny znajdowały się w jednej linii, musimy dopisać taki kod:

Stwórzmy teraz klasy naszych kolumn z nadaniem im odpowiednich szerokości:

Teraz zostało nam napisać tylko nasz layout strony głównej. Pamiętaj, że każdy rząd, w którym umieszczasz kolumny, musi zaczynać się od:

Poniżej cały kod:

See the Pen Grid template by BedeProgramistka (@BedeProgramistka) on CodePen.

Gotowy grid z Bootstrap 4

Używając Bootstrapa 4 sprawa jest nieco łatwiejsza. Nie tworzymy samodzielnie całego kodu. Wystarczy do naszej sekcji head podpiąć style z Bootstrapa 4 PRZED naszymi stylami z pliku style.css i używać odpowiednich klas.

Kod, który musimy podpiąć, aby używać Bootstrapa 4:

Całą dokumentację do Bootstrapa 4 znajdziesz tu – dokumentacja Bootstrap 4.

Grid Bootstrapa 4 opiera się na Flexboksie. Flexbox daje niesamowite możliwości, ale o tym kiedy indziej. Generalnie chodzi w nim o to, że możemy układać wszystkie elementy na stronie, jak chcemy. Mogą to być bloki pionowe, poziome, od lewej do prawej, od prawej do lewej, itd.

Podstawowym elementem siatki grida Bootstrapa 4 jest container. Jeśli chcemy, aby nasz layout był responsywny, musimy użyć klasy .container, która rozdzieli nam sekcje na stronie (w naszym przypadku wszystko zamkniemy w 1 kontenerze).

Istnieją dwa rodzaje kontenerów. Jeden z nich jest wycentrowany i zajmuje maksymalną szerokość 1140px:

Drugi, z którego będziemy korzystać w naszym przykładzie, to kontener rozciągnięty na całą szerokość strony:

Grid Bootstrapa 4 składa się z rzędów (rows) i kolumn (columns). Jeśli chodzi o liczbę kolumn, to sytuacja ma się dokładnie tak samo, jak w przykładzie z budowaniem własnego grida na podstawie Bootstrapa 3. Kolumn mamy w sumie 12. Jednak jest tutaj jeszcze jedna ważna rzecz, o której muszę wspomnieć.

Bootstrap 4 jest w pełni responsywny. Mamy możliwość wybrania, jak nasze kolumny będą wyświetlały się w odpowiednich rozdzielczościach (tabela z dokumentacji Bootstrap 4)

Bootstrap 4 - rozdzielczość

Źródło: https://getbootstrap.com/docs/4.1/layout/grid/

Dlatego pamiętając o tym, że tworzymy projekt dla określonej/określonych rozdzielczości, tworząc nasze kolumny musimy pamiętać o wybraniu odpowiednich przedrostków: – .col- , .col-sm- , .col-md- , .col-lg- , .col-xl- .

Użycie klasy .col-* spowoduje, że kolumny zawsze będą wyświetlały się obok siebie, niezależnie od rozdzielczości.

Bootstrap 4 pozwała nam czynić cuda z naszymi projektami. Jednak wszystkich zainteresowanych jego możliwościami odsyłam do dokumentacji, gdyż dzisiaj pokazuję Wam tylko, jak stworzyć „nasz” layout strony głównej (dokładnie taki sam, jak poprzedni).

Cały kod (otwórz w nowym oknie, żeby zobaczyć rozdzielczość dla komputerów):

See the Pen Bootstrap 4 template by BedeProgramistka (@BedeProgramistka) on CodePen.

Zauważcie, że w naszym projekcie, nie używam @media, aby sprawić, że strona będzie responsywna. Właśnie przez to, że użyłam w kodzie klas „col-lg-12” i „col-sm-12”, dla naszych kolumn, wyświetlają się one poprawnie dla rozdzielczości > 992 px i dla rozdzielczości > 576 px.

Flexbox

Flexbox to jest taki cud miód i orzeszki 🙂 . Za jego pomocą możemy wyczarować różne cuda na stronie. Ja tutaj nie będę się rozpisywać co możemy z nim zrobić. Skupimy się na naszym layoucie i na właściwościach, które w nim wykorzystujemy.

Aby zacząć budowę naszego layouta strony głównej, do głównego contenera strony musimy dodać kod:

Dzięki temu, że naszym elementom nadaliśmy display flex, zostały one ułożone obok siebie.

Właściwości kontenera / rodzica

Istnieje szereg właściwości, za pomocą których możemy manipulować naszymi elementami na stronie. My w naszym kontenerze posłużymy się dwoma.

Pierwsza to flex-direction, która określa kierunek, w którym ułożone są elementy. Domyślną wartością jest row, czyli rozmieszczenie naszych elementów w rzędzie od lewej do prawej. W naszym kodzie pojawia się ta wartość, ale równie dobrze może jej nie być (row jest wartością domyślną). Gdybyśmy jednak chcieli ułożyć elementy w pionie, wtedy powinniśmy nadać wartość column.

W tym miejscu powinnam Ci napisać o jeszcze jednej ważnej rzeczy. Decydując czy nasz flex-direction ma być row lub column, decydujemy, która oś jest osią główną dla naszego kontenera. Istnieją dwie osie – main-axis (oś główna) i cross-axis (oś przeciwstawna). W przypadku wyboru row naszą osią główną jest oś pozioma – x, w przypadku column – oś pionowa – y.

Drugą właściwością, którą się posłużymy jest flex-wrap. To właściwość, za pomocą której możemy kontrolować, jak mają zachowywać się dzieci naszego kontenera (czyli klasy, który posiada display: flex;), w momencie, gdy już nie mieszczą się w kontenerze. Flex-wrap przyjmuje kilka wartości. Domyślną wartością jest no-wrap (elementy nie zawijają się do kolejnych linii). W naszym przypadku użyjemy wartości wrap, czyli elementy będą się zawijać do kolejnych linii.

Jeśli chcielibyśmy zapisać flex-direction i flex-wrap w jednej linii powinniśmy użyć flex-flow. W naszym przypadku zapis flex-flow wyglądałby następująco:

Czyli pierwszą wartością jest flex-direction a drugą flex-wrap. Domyślną wartością dla flex-flow jest row no-wrap.

Aby sprawić, żeby nasze elementy w kontenerze zawsze układały się na środku dodamy właściwość justify-content z wartością center. Justify-content pozycjonuje elementy względem main-axis, czyli względem głównej osi. Jeśli chciałbyś wypozycjonować elementy względem cross-axis musiałbyś użyć właściwość align-content. Co ważne, aby align-content zadziałał musisz mieć w kodzie flex-wrap ustawiony na wrap.

Ostatecznie nasz kontener powinien mieć taki kod:

Jeśli chciałbyś dowiedzieć się więcej o pozycjonowaniu elementów za pomocą flexboxa, serdecznie polecam Ci kurs kodu.je Zrozumieć Flexboxa.

Właściwości itemów / dzieci

W każdej naszej sekcji musimy dodać kod, który zdecyduje, jak będą dane elementy (header, sidebar, aside, footer) rozciągnięte. Do tego użyjemy właściwości flex. Tę właściwość ustawiamy na dzieciach rodzica, czyli w naszym przypadku na itemach.

Ponieważ header i footer mają być rozciągnięte na 100% nasz kod będzie wyglądał mniej więcej tak:

Właściwość flex posiada tutaj trzy wartości – 0 0 100%. Odpowiadają one po kolei takim właściwościom jak flex-grow, flex-shrink i flex-basis. Domyślnie ta właściwość przyjmuje wartość 0 1 auto. Właściwość ta może przyjąć jedną, dwie lub trzy wartości.

Gdy przyjmuje jedną i jest to wartość bez jednostek, oznacza wówczas flex-grow:

Gdy przyjmuje jedną z jednostkami oznacza flex-basis:

 

Gdy przyjmuje dwie wartości, pierwsza zawsze jest interpretowana jako flex-grow. Jeśli druga wartość jest bez jednostek wtedy wiemy, że jest to flex-shrink:

Gdy jednak pojawią się jednostki, wtedy pierwsza jest flex-grow a druga flex-basis:

 

Pełny zapis, tak, jak wspominałam na początku to zapis z trzema jednostkami: flex-grow, flex-shrink i flex-basis.

 

No dobra, ale przejdźmy do opisu, co te właściwości oznaczają.

Flex-grow to właściwość, która mówi naszym elementom, ile mogą zająć miejsc w wolnej przestrzeni względem main-axis, czyli osi głównej. Wartości, które możemy nadać muszą być w przedziale większe lub równe 0. Wartością domyślną, którą przyjmuje flex-grow jest 0, czyli elementy nie wykorzystują wolnego miejsca (nie rozciągają się). Za pomocą tej wartości możemy manipulować wielkością naszych elementów. W naszym przykładzie w item2 i w item3 ustawimy flex-grow w odpowiedniej wielkości.

 

Flex-shrink to właściwość, która kontroluje czy nasze elementy mają kurczyć się tak, aby wszystkie zmieściły się w jednej linii. Właściwość ta kontroluje elementy względem main-axis, czyli osi głównej. Wartość dla flex-shrink to liczba z zakresu większa lub równa 0. Wartością domyślną, którą przyjmuje flex-shrink jest 1. Jeśli zostawimy tę wartość niezmienioną, dla wszystkich naszych elementów lub wszystkim nadamy taką samą liczbę, będą one kurczyć się w dokładnie taki sam sposób. Wartość 0 wyłącza kurczenie. Jeśli jakiemuś elementowi ustalilibyśmy wartość większą od pozostałych, element ten kurczyłby się dwa razy bardziej, na tle pozostałych elementów.

Flex-basis to właściwość, za pomocą której ustawiamy szerokość bądź wysokość elementów w zależności od naszej głównej osi. Jeśli naszą główną osią jest oś pozioma (flex-direction: row) wtedy ustawimy szerokość elementu. Jeśli natomiast naszą główną osią będzie oś pionowa (flex-direction: column) wtedy ustawimy wysokość elementu. Wartością domyślną dla flex-basis jest wartość auto. Jednostki, które możemy ustawić dla flex-basis są dokładnie takie same jak dla width i height. Dlatego możemy użyć %, vh, vw, rem, em, px, itd. Każdy element może mieć inny flex-basis (tak samo, jak każdy element może mieć inny flex-grow i flex-shrink).

 

Przedstawiłam Ci sporą dawkę wiedzy na temat flexboksa. Zobaczmy teraz kod naszego layouta.

See the Pen Flexbox template by BedeProgramistka (@BedeProgramistka) on CodePen.

Grid CSS

Na koniec został nam Grid CSS-a. To bardzo wdzięczne narzędzie, jednak przed stosowaniem warto sprawdzić jakie przeglądarki go wspierają. Ja zawsze używam https://caniuse.com.

Niektórzy twierdzą, że Grid będzie następcą Flexboksa. Czy tak się stanie? Zobaczymy. Jednak myślę, że warto go znać i powoli wdrażać w swoje projekty.

Grid CSS-a to kolejna siatka, która pozwala nam układać elementy w naszych projektach. Za pomocą Gridu możemy w bardzo łatwy sposób tworzyć strony responsywne. Ale wróćmy do naszego projektu layouta strony głównej.

Musimy wiedzieć, że Grid tworzy nam szkielet za pomocą siatek (polecam Ci ściągnąć sobie Firefox w edycji developers. Ma wbudowane świetne narzędzie do „sprawdzania” Girdu). I właśnie za pomocą tych siatek rozmieszczamy elementy w projekcie – pamiętaj, że i w tym przypadku mamy wiersze – row – jak i kolumny – column.

Siatka Grid

Źródło: https://www.mozilla.org/media/img/firefox/developer/hero-screenshot.08ecc51c8cac.png

Wróćmy jednak do początku. Aby używać Gridu musimy w naszym kontenerze zawrzeć kod:

Definiujemy nasz szkielet

Aby zdefiniować nasze siatki, czyli szkielet naszego layouta, musimy posłużyć się właściwościami grid-template-columns (definiujemy liczbę i rozmiar naszych kolumn) i grid-template-rows (definujemy liczbę i rozmiar naszych wierszy).

Tutaj muszę napisać o jednostce, którą wprowadził Grid, mianowicie fr, czyli fraction of available space – po polsku możemy ją nazwać frakcją. Za pomocą tej jednostki określamy rozmiar naszego elementu (w przypadku columns – szerokość kolumny, w przypadku rows – wysokość wiersza). Przeglądarka interpretuje tę jednostkę w ten sposób, że określa rozmiar elementu w sposób proporcjonalny do wolnego miejsca w kontenerze. W naszym przypadku mamy podzielony nasz szkielet na 2 kolumny i 3 wiersze. Pierwsza kolumna to 3fr, druga kolumna to 1fr. Patrząc w kod (rows) wiemy, że pierwszy wiersz jest 3 razy mniejszy od drugiego – pierwszy wiersz 1fr, drugi 3fr i trzeci znowu 1 fr.

Gdybyśmy chcieli np. mieć dwie kolumny, które zajmowałyby równo po 50%, nasz kod musiałby wyglądać tak:

Gdybyśmy chcieli stworzyć 3 kolumny, każda po 1 fr zamiast pisać tak:

moglibyśmy ten zapis skrócić i użyć repeat (repeat – powtórz (3 kolumny, po 1 fr):

Wszystkie elementy, w których używamy frakcji, są responsywne! 🙂

Jednostki, które możemy używać w przypadku grid-template-columns i grid-template-rows to wspominane fr, px, %, rem, em (możemy używać ich naprzemiennie),vh, vw, itp..

 

Zamiast pisać w dwóch liniach grid-template-columns i grid-template-rows możemy użyć skróconego zapisu: grid-template. Pierwsza jego wartość przyjmuje grid-template-rows następnie piszemy slash (/) i drugą wartość grid-template-columns.

Tworzymy sekcje

Kolejną ważną właściwością jest grid-template-areas. Za jej pomocą określamy nazwy naszych sekcji/elementów.

Chcemy, żeby na samej górze naszej strony był header. W drugim rzędzie ma być 2 rzeczy: główna sekcja – content i sidebar . I w trzecim rzędzie ma być footer. Ponieważ zdefiniowaliśmy sobie, że nasz grid zawiera 2 kolumny (3fr, 1 fr) i 3 rzędy (1fr, 3fr, 1fr) zapis naszego grid-template-areas musi wyglądać następująco:

Widzicie, że mamy tutaj 2 kolumny i 3 wiersze.

W pierwszym wierszu, w obu kolumnach znajdzie się header (chcemy, żeby był rozciągnięty na całej dostępnej przestrzeni). W drugim wierszu znajdzie się content (który zajmie 3fr) i sidebar (który zajmie 1fr). I w trzecim wierszu znajdzie się footer (w obu kolumnach, rozciągnięty na całą dostępną przestrzeń).

Następną rzecz, którą musimy zrobić to zdefiniować, które nasze itemy (patrz kod html), znajdą się w określonym przez nas obszarze (grid-template-areas). Do tego służy polecenie grid-area. 

Zobacz na nasz kod HTML:

Header znajduje się w klasie item1. Sidebar w klasie item2. Content w klasie item3. Footer w klasie item4.

Więc teraz w kodzie CSS musimy zapisać, że item1 ma znaleźć się na zdefiniowanym przez nas miejscu (grid-area) o nazwie header. Item2 ma się znaleźć w grid-area: sidebar. Item3 ma być w miejscu grid-area: content, a item4 ma wejść do miejsca: footer.

Dzięki takiemu zabiegowi, ułożyliśmy sobie nasze klocki układanki, w taki sposób w jaki chcieliśmy. Prawda, że łatwo?

Poniżej cały kod:

See the Pen Grid CSS template by BedeProgramistka (@BedeProgramistka) on CodePen.


To, co przedstawiłam powyżej to mała część z tego, co możemy robić za pomocą Gridu CSS-a. Jeśli chcecie wiedzieć więcej, to bardzo polecam darmowy kurs Wes Bosa – o tu.


Podsumowanie

To by było na tyle 🙂 . Ciekawe czy dobrnąłeś do końca tego wpisu. Jest to chyba najdłuższy do tej pory, mój wpis na blogu. Jeśli Ci się udało przebrnąć przez tyle tekstu, to widzisz, że udało nam się osiągnąć ten same efekt naszego layout’u, za pomocą czterech różnych technologii. Jednak musisz mieć świadomość, że to, co tutaj przedstawiłam to kropla w morzu. Zachęcam Cię, żebyś drążył dalej, bo być może, można to samo uzyskać jeszcze łatwiej, prościej i intuicyjnej 🙂 .

W każdym z tych przykładów użyłam innego sposobu na centrowanie tekstu w divach. Nie opisywałam teraz tego, ale coś czuję, że może z tego wyjść niezły, kolejny wpis 🙂 .

Pamiętaj, że ćwiczenia, sprawiają, że najłatwiej i najszybciej uczymy się nowych rzeczy. Więc ćwicz, ćwicz i jeszcze raz ćwicz. I testuj różne możliwości.

Powodzenia!

Ciał! Natka.

14
Dodaj komentarz

avatar
7 Comment threads
7 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
KrzysztofMateusz DąbrowskiDominikAgnieszkaMateusz Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Krzysztof
Gość
Krzysztof

Ooo, więcej takich wpisów 😉 rzeczowo, prosto, treściwie – czytanie to nie był stracony czas.

Mateusz Dąbrowski
Gość

Po długim czasie developowania backendu wracam trochę do frontendu i potrzebowałem czegoś łatwego do przyswojenia.
Dziki za wpis, bardzo mi się przydał.

Dominik
Gość

Hej!
Do nauki Flexboxa i Grida mogę polecić 2 gry przeglądarkowe:
https://cssgridgarden.com/
oraz
https://flexboxfroggy.com/
A sam artykuł bardzo ciekawy, obszerny i przyjemnie się go czyta! 🙂
Pozdrawiam!

Agnieszka
Gość
Agnieszka

Witam
czy masz do polecenia jakis kurs bootsrapa w wersji polskiej?
Dzieki za wartościowy wpis, akurat kończe 4 tydzien kursu kodilli na front-end i ten temat idealnie rozjaśnia metody tworzenia layoutu.

Mateusz
Gość
Mateusz

A ja dodam coś od siebie. Czytam co jakiś czas twojego bloga. Jestem front-endowcem od conajmniej 3 lat 😉 przez ten czas zdążyłem niemal na pamięć nauczyć się dokumentacji bootstrapa 3. No i niestety masz błąd w artykule (lub ja czegoś nie rozumiem). Chodzi o bootstrap3. Przecież w nim również funkcjonują kolumny typu col-sm, col-lg itp. To jest cała możliwość bootstrapa. A w artykule niemal sama tworzysz ideologię bs3 :p liczę na wyjaśnienia. Pozdrawiam, Mat

Kasia
Gość
Kasia

Super wpis, fajnie to wszystko wytłumaczyłaś i zachęciłaś do dalszej nauki. Big thanks! 🙂

Paweł
Gość
Paweł

Bardzo fajne ‚lekkie’ zestawienie ! dzięki 🙂