Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Magia grida czyli kolumny w designie i kodzie z Zurb Foundation

Artykuł pojawił się 19.12.2016, autorem jest Agressiva i wpadł do kategorii Frontend

Odkąd responsive design wkroczył do życia webdesignerów, wydawało mi się, że projektowanie przy pomocy grida jest czymś oczywistym. Jednak na podstawie kilku rozmów i obserwacji zauważyłam, że nie każdy koder i nie każda agencja korzysta z tego rozwiązania. Dlaczego uważam, że warto i jak wykorzystywać grid na etapie projektu graficznego a później w kodzie przeczytacie w tym artykule.

Czym jest grid i jak go stosować w projekcie graficznym?

Grid to inaczej układ kolumnowy. Zazwyczaj mówimy o 12 kolumnach, które można z sobą łączyć w sposób niemalże dowolny, tworząc układy elementów stron internetowych i aplikacji mobilnych. Pomiędzy kolumnami znajduje się gutter czyli wolna przestrzeń, która oddala je nieco od siebie – jej obecność nie jest obowiązkowa.

Jak stworzyć układ gridowy w Photoshopie?

  1. W pierwszej kolejności tworzymy nowy dokument o szerokości contentu jaki ostatecznie nas interesuje, np 1200 px.
  2. Z menu wybieramy Widok – Nowy układ linii pomocniczych
  3. Możemy wybrać układ z bazy gotowych układów proponowanych przez Adobe Photoshop lub stworzyć własny
    grid_01Na podanym przykładzie tworzymy grid, składający się z 12 kolumn z gutterem (odstępem) o szerokości 20 px.
    Układ linii pomocniczych utworzony zostanie automatyczne przez program po kliknięciu OK
  4. Dokument zostanie „ubrany” w nowy element czyli linie pomocnicze, które na dalszym etapie prac posłużą jako wytyczne do szerokości kolumn.
  5. Po wstawieniu grida, przechodzimy do Obraz – Rozmiar obszaru roboczego i poszerzamy go wg uznania. Osobiście ustawiam na szerokość viewport 1680px.

Ten scenariusz pozwoli utworzyć grid dla szerokości contentu, którą chcemy sami narzucić. Jeżeli natomiast chcielibyśmy utworzyć grid, którego szerokość maksymalna jest nam obojętna, ale chcemy aby pojedyncza kolumna miała przykładowo 40 px szerokości + 20 px szerokości odstępu to w oknie pokazanym wyżej wybieramy dodatkowo opcję „Wyśrodkuj kolumny” i podajemy „Szerokość” przy parametrach kolumn.

Jeżeli nie jesteście fanami możliwości Adobe Photoshop w tej dziedzinie możecie skorzystać z zewnętrznych narzędzi:

Mając ustawiony grid możemy zacząć zabawę z designem. Ważne jest aby w miarę możliwości trzymać się wyznaczonych linii, a jeżeli planujecie wstawienie sekcji na całą szerokość viewport warto to zaznaczyć lub zasygnalizować frontendowi. Podobnie jak inne elementy, które będą nieco wystawać poza wyznaczone linie pomocnicze.

Łączenie kolumn

Kolumny jakie uzyskaliśmy za pomocą linii pomocniczych tworzą nam masę możliwości. Należy pamiętać, że kolumny można łączyć w sposób dowolny. Poniżej przedstawiam dwie wersje. Kiedy gutter ma szerokość 20 px oraz wersję gdzie guttera w ogóle nie ma (generalnie zaleca się ich używanie, aczkolwiek framework cssowy np. Zurb Foundation pozwala na ich usunięcie za pomocą jednej małej klasy, o której napiszę w dalszym dziale).

Tak wygląda szkielet 12 kolumnowego grida z gutterem o szerokości 20 px.
Szerokość całkowita contentu 1200 px.

pandify_12columns_grid

 

A tutaj mamy szkielet contentu o takiej samej szerokości, jedynie bez guttera.

pandify_12columns_grid_nogutter

 

Obrys kolumn został naniesiony przeze mnie celowo, aby zobrazować, że kolumny przylegają do siebie.

Dlatego poprawnie wyznaczone linie pomocnicze w PS są tak istotne?

Wyznaczone linie pomocnicze w Photoshopie mają kluczowe znacznie dla kodera, który będzie „ożywiać” Wasz projekt. Z nich jest w stanie wyczytać jaką szerokość ma content strony i jaką szerokość ma mieć gutter (odstępy). Te dane koder wprowadza do pliku konfiguracyjnego, głównego pliku SCSS. Aby zobrazować praktyczne zastosowanie użyję przykładowego kodu, który jest standardowy dla projektów kodowanych za pomocą Zurb Foundation i tak wygląda tutaj na Pandify.

Jak to wygląda w praktyce?

Gotowy projekt zaprojektowany na gridzie trafia do kodera. Ten w celu sprawdzenia wszystkich parametrów zamieszczonych elementów pobiera m.in. szerokość contentu i guttera.
Według filozofii Foundation te dane mogą trafić do kilku miejsc:

  • nasz główny plik stylu SCSS, do którego importujemy inne pliki SCSS składowe (w naszym przypadku jest to zawsze main.scss)
  • lub _settings.scss w głównym katalogu Foundation
    (z tej opcji nie korzystam, ponieważ na co dzień używamy Sage opartego o Zurb Foundation i wprowadzenie zmiany byłoby nietrwałe ze względu na możliwość zaktualizowania Foundation poprzez Bower. Jeżeli natomiast korzystanie z czystej wersji frameworka w edycji SCSS to spokojnie możecie te zmiany wprowadzić w pliku ustawień)

Foundation ma możliwość zdefiniowania w podobny sposób sporej ilości parametrów. O nich przeczytać można w każdym dziale dokumentacji.

Za określenie w Zurb Foundation w edycji SCSS szerokości contentu odpowiada parametr $global-width.
Parametr niżej czyli $grid-column-gutter to wspomniana wyżej szerokość odstępów między kolumnami.

Tworzymy kod oparty o kolumny

Zdaję sobie sprawę, że to co teraz opiszę jest dla osób, które dopiero planują lub są na początku wdrażania się w pracę z Zurb Foundation. Są podstawy, które pomogą zrozumieć jak kolumny z designu odzwierciedlić w kodzie HTML/SCSS.

Przede wszystkim trzeba zrozumieć, że kolumny zawsze w Zurb Foundation owijamy divem o klasie .row.
Pojedyncza kolumna to div, który przypisany ma kilka klas. Najważniejszą jest .columns lub .column (tutaj istnieje dowolność, autorzy frameworka specjalnie przygotowali dwie wersje gramatyczne, które mają to samo zadanie). Klasa ta posiada przypisany padding left i right, które decydują o naszym gutterze (odstępie) oraz float:left, który ustawia je jedną za drugą w płaszczyźnie horyzontalnej.

Drugą ważną sprawą jest przypisanie temu divowi klasy, która zdefiniuje szerokość kolumny. Dodatkowo w tym samym miejscu decydujemy jaką szerokość mają mieć kolumny w wersji desktop (.large-x), tablet (.medium-x) oraz smartphone (.small-x). W miejsce X wstawiamy odpowiednią liczbę, która definiuje szerokość kolumny. Warto pamiętać, że w rzędzie łączna zsumowana wartość kolumn powinna wynieść 12.

W pojedynczym .row może znaleźć się dowolna ilość .columns lub tylko tyle ile w sumowaniu uzyskamy liczbę 12.

Jak należy interpretować klasy .large-x, .medium-x i .small-x? To inaczej punkty „łamania” układu na poszczególnych szerokościach viewport czyli zachowanie responsywności. Poniższy kod pokazuje swoje defaultowe wartości dla breakpointów. Można je bardzo łatwo zmienić przenosząc ten kod do swojego pliku SCSS i edycji wartości.

Tak wygląda zakodowana wersja szkieletu pokazanego nieco wyżej na ilustracji z gutterem (wszystkie .columns znajduje się w jednym .row):

Aby usunąć wszystkie odstępy między kolumnami w przykładowym układzie należy do klasy .row dopisać klasę .collapse. A co jeżeli na wersji „small” nie chcecie usuwać guttera? Żaden problem, wtedy do klasy .row zamiast .collapse należy dodać: .medium-collapse. Ta klasa pozwoli usunąć gutter tylko dla medium i large. Tego typu zabawek jest sporo.  Nie chcę tutaj przepisywać całej dokumentacji Zurb Foundation, a jedynie pokazać kilka ważnych rzeczy i to, że można więcej o czym przekonacie się tutaj: foundation.zurb.com/sites/docs

Ilość kolumn inna niż 12…

Dość kłopotliwy na pierwszy rzut oka może wydać się przypadek kiedy potrzebujemy innej ilości kolumn niż 12. Szczególnie gdy chcemy aby zajęły 100% szerokości contentu lub viewport. Do tego celu przychodzi nam z pomocą Block Grid.
Defaultową wartością dla block grida w Foundation jest wartość 8. Jednak możemy ją zmienić na podobnej zasadzie jak breakpointy czy szerokość contentu. Do naszego pliku głównego SCSS należy przenieść parametr: $block-grid-max i podać wartość jaką chcemy ostatecznie używać.
Np.

$block-grid-max: 11;

Należy pamiętać, że block grid działa nieco inaczej. Tak jak wyżej każdej kolumnie osobno deklarowaliśmy klasę o szerokości. Tak tutaj szerokość kolumn dla poszczególnych breakpointów podajemy divowi nadrzędnemu. Deklarując wartość 11 dla maksymalnej ilości kolumn możemy użyć każdej innej, ale niższej wartości.
Przykładowo chcemy stworzyć układ 7 logotypów ustawionych jeden obok drugiego w 2 wierszach – tak będzie na large ze względu na dużą ilość miejsca. Na medium chcemy ustawić aby obok siebie było 5 logotypów, a na small – 2.
W kodzie wyglądać to będzie tak:

Zagnieżdżanie:

Oczywiście można zagnieżdżać kolumny, czyli daną kolumnę dzielić na kolejne. Poniższy przykład pokaże jak tworzyć taki układ poprawnie. Zagnieżdżeń może być tyle ile potrzebujecie.

Flexbox

Co ważne Zurb Foundation posiada również obsługę flexbox. Rozszerzając tym samym możliwości w układzie gridowym. O tej zabawce napiszę w jednym z kolejnych artykułów, ponieważ warto poświęcić jej nieco więcej czasu.

Czy to wszystko co może Zurb Foundation?

Nie. To dopiero początek. Zurb Foundation w połączeniu z tworzeniem kreacji na gridzie jest bardzo mocnym narzędziem. Dysponuje także masą innych gotowych rozwiązań, które sprawią, że nie będziecie musieli korzystać ze zbyt dużej ilości zewnętrznych skryptów. Oczywiście nie jest jedynym i niezastąpionym frameworkiem. Do wyboru jest jeszcze Bootstrap, 960 grid system Skeleton etc.
Ale jako osoba, która od prawie 6 lat koduje za pomocą tego narzędzia i zna historię jego rozwoju – polecam go szczególnie. Dzięki niemu usprawnicie tworzenie responsywnych projektów. Sprawicie, że kod będzie jednolity i czytelny do edycji przez każdego frontend developera jakiego macie w zespole. Wdrożycie narzędzie używane przez specjalistów RWD i zaczniecie tworzyć wygodne, nowoczesne responsywne produkty (strony internetowe, aplikacje mobilne oraz szablony mailingowe). I co ważne zwiększycie wydajność poprzez usprawnienie pracy swoje teamu.
Polecam również używanie Roots Sage – czyli startowego motywu WordPress opartego o Zurb Foundation. O nim możecie przeczytać w tym artykule.

Agressiva

Od 10 lat pracuję w branży IT. Początkowo zajmowałam się tylko projektowaniem stron internetowych pod względem graficznym, ale bardzo szybko stałam się web designerem i web developerem w jednym. Poza pracą żyję też kolarstwem, street foodami i rysowaniem.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.

  • A jak sensownie w locie (windows) kodować SCSS do CSS?