station

Grid system, czyli układ bloków, to opis rozstawienia elementów html na stronie. Kluczem dobrego zaprojektowania witryny jest stworzenie takich stylów, by były one w łatwy sposób dostępne w różnych fragmentach strony.

Poniżej opiszę zadania, które pozwolą Ci zrozumieć, jak tworzyć grid system, oraz dlaczego warto korzystać z bibliotek, takich jak bootstrap lub foundation. Dowiesz się także, jak z nich korzystać w sposób jak najbardziej efektywny.

1. Stwórz własny Grid System, bazując na zdjęciu poniżej.

  • W utwórz plik HTML oraz osobny plik ze stylami. W przypadku wątpliwości, możesz zajrzeć do poprzedniego wpisu, „Szkielet dokumentu HTML”.
  • Następnie spraw, by w przeglądarce wyświetlały się słowa: column1, column2 oraz column3 w takiej formie, jak na obrazku poniżej.

grid system

Użyteczne wskazówki:

1. Podziel stronę na dwanaście części i sprecyzuj klasy dla kolumn o szerokościach od 1 do 12.

3. Nie używaj elementów: <table>, <td>, <th>, <tr>, <tbody>, <thead>

2. Do wystylizowania dokumentu, będziesz potrzebować:

  • Znajomości elementów: <div>
  • Znajomości atrybutów stylów:
    • padding
    • margin
    • background-color
    • float
    • border
    • width.

3. Nie używaj stałej szerokości kolumn. Jeśli sprecyzujesz atrybut width: 600px, na klasę: column-8, to po zmniejszeniu ekranu przeglądarki blok ten wyjdzie poza ekran. Błąd ten będzie miał miejsce także, gdy umieścisz tę kolumnę w jakimś mniejszym <div>-ie. Skorzystaj z określenia elementu za pomocą procentów.

Przystanek bootstrap.

Jeśli tu jesteś, to albo powyższe zadanie jest zakończone pomyślnie, albo sfrustrowało Cię stylizowanie tabeli. Wolałbym pierwszą opcję, ale… niezależnie od wszystkiego, na pewno po stylizacji ręcznej dostrzeżesz, ile czasu możesz oszczędzić, jeśli zaczniesz korzystać z takich bibliotek, jak bootstrap, czy foundation.

Różnica między nimi jest dość znaczna, ja korzystam z obu, zależnie od projektu. Profesjonalny FrontEnd developer powinien czuć się biegle w korzystaniu z obu tych bibliotek, ale spokojnie możesz zostawić to sobie na później.

Wychodzę z założenia, że najlepiej człowiek się uczy przez praktykę, przyswajając to, co na bieżąco jest mu potrzebne, więc nie polecam wkuwania na pamięć całej gamy elementów i klas, które oferują. Po co, skoro dostępna jest dokumentacja, do której zawsze można zajrzeć?

2. Stwórz Układ bloków przy pomocy biblioteki bootstrap.

Wykonaj to samo zadanie co powyżej, jednak tym razem skorzystaj z gotowych szablonów stylów. Zainstaluj bootstrapa poprzez pobranie biblioteki do folderu z plikiem *.html. Proces instalacji bootstrapa znajdziesz na stronie projektu, więc nie będę się tu powtarzał.

Użyteczne wskazówki:

1. Dokumentacja projektu pozwoli Ci w prosty sposób zapoznać się z zasadami stylizowania. Zachęcam do poeksperymentowania. Po instalacji wtyczki testować plik *.html możesz poprzez kopiowanie kodu ze strony projektu ;).

2. Szczególnie przydatny będzie ten link.

3. Ogromną pomocą jest skorzystanie z narzędzi developera, które udostępnia przeglądarka chrome. Aby otworzyć narzędzie, kliknij prawym przyciskiem na miejsce, które chcesz zbadać, po czym wybierz: „zbadaj element”. Otworzy się panel, w którym możesz podejrzeć kod HTML danego elementu, oraz jak napisane są style CSS do tych elementów.

inspector chrome

Responsive design.

To, co opisaliśmy, to wierzchołek góry lodowej. Zauważ, że na stronie witryny, tabelka przedstawiona na screenach wygląda zupełnie inaczej po zmniejszeniu okna przeglądarki i układ bloków się zmienia! Nie to co w starej wersji, która po prostu się zmniejsza.

Efekt ten został osiągnięty poprzez dodanie dwóch różnych klas do każdego z <div> odpowiedzialnych za wyświetlanie kolumn.

  • „xs” – (x-small) wyświetla się tylko na bardzo małych ekranach.
  • „sm” – (small) wyświetla się na małych ekranach.
  • „md” – (medium) ten układ bloków zobaczymy jedynie na średnich ekranach.
  • „lg” – (large) duże ekrany.

Dlaczego układ bloków nie wyświetla się zawsze?

Jest za to odpowiedzialny atrybut @media, bliżej o nim opowiadam w artykule: „Jak stworzyć szablony responsywne”, do którego lektury gorąco zachęcam.

Jeśli masz pytania, zostaw komentarz, a na pewno na niego odpowiem.

Sekrety Produktywności

Sekrety Produktywności

DARMOWE szkolenie mailingowe! 10 porad jak zwiększyć produktywność w programowaniu.

Dziękujemy za zapisanie się na kurs. Wkrótce otrzymasz wiadomość email z potwierdzeniem zapisu.

Polub nas na facebooku!

Jeśli podoba Ci się ten blog, polub nas na facebooku! Dzięki temu nie ominą Cię nowe treści!

You have Successfully Subscribed!