Szybkie siatki dla projektantów układów. Co to jest siatka modułowa

Specjalnie dla użytkowników serwisu zapewniamy praktyczną lekcję obsługi systemu 960 Grid. Wyobraź sobie, że otrzymaliśmy projekt układu. Najpierw musimy nakreślić plan wdrożenia struktury serwisu, a dopiero potem przejść bezpośrednio do kodu. Po przestudiowaniu tego artykułu będziesz w stanie obsłużyć dowolny klasyczny układ w możliwie najkrótszym czasie i Naturalny kolor włosy przez wiele lat (bez siwych włosów). Oto nasz projekt:

1. Utwórz siatkę

Jak już wiecie, system 960 Grid wykorzystuje całą gamę klas i występuje w kilku wariantach (wersja 12-kolumnowa i 16-kolumnowa). Główny kontener, niezależnie od liczby kolumn, będzie zawsze miał szerokość 960px. Do tego projektu wybierzemy system 12-kolumnowy. Każdy blok w systemie siatki 960 ma margines(margines) 0 10 pikseli. Gwarantuje nam to równomierne, proporcjonalne wypełnienie wynoszące 20px. Tym, którzy są zdezorientowani rozmiarem 960 pikseli, radzę przyjrzeć się temu diagramowi. Ten rozmiar jest optymalny dla zdecydowanej większości rozdzielczości monitorów. Mamy więc możliwość tworzenia bloków o tej szerokości:

  • 140 pikseli
  • 220 pikseli
  • 300 pikseli
  • 380 pikseli
  • 460 pikseli
  • 540 pikseli
  • 620 pikseli
  • 700 pikseli
  • 780 pikseli
  • 860 pikseli
  • 940 pikseli

Każdy rozmiar ma swoją klasę, której nazwa opiera się na schemacie grid_X, gdzie X to liczba kolumn. Jeśli potrzebujesz bloku 960px, powinieneś wybrać klasę grid_12. Aby aktywować system 960 Grid należy ustawić kontener nadrzędny na klasę kontener_12 lub kontener 16. Poniżej mały przykład strony składającej się z 3 bloków. Szerokość pierwszego jest równa szerokości 960px, pozostałe 2 są o połowę mniejsze:

Pamiętaj, że wypełniając wiersz blokami o klasie grid_X zadbaj o to, aby w sumie było ich nie więcej niż 12. Przykładowo tak jak my - dwa bloki grid_6 + grid_6 = 12. Mniej jest możliwe: 6, 4 , 2 itd. d. Teraz, gdy omówiliśmy podstawowe zasady, możemy rozpocząć ćwiczenie praktyczne:

2. Stwórz makietę

Spróbujmy zbudować diagram tego, co musimy uzupełnić. Przede wszystkim potrzebujemy 2 bloków po 960 pikseli. Jeden na logo, drugi na nawigację. Następne są 2 bloki (w jednej linii), na plakat i prezentację strony internetowej, blok separujący (na całej szerokości), 4 kolumny (w jednej linii), ponownie blok separujący i stopka. Coś takiego:

Myślę, że po zobaczeniu obrazka już wiecie jakich zajęć potrzebujemy. Wypróbuj je samodzielnie, a następnie spójrz na poniższy kod, aby sprawdzić, czy myślisz poprawnie:

Pamiętaj, że musimy wstawić na końcu każdej linii, aby normalnie wyświetlać się we wszystkich przeglądarkach. Nie zapomnij również umieścić na swojej stronie w sekcji nagłówka 960 Grid CSS.

Szkielet jest gotowy, więc czas zacząć dekorować. Ustaw wysokość i kolor tła separatory bloków. Wysokość bloku menu będzie zależała od samego menu. Nie zapomnij również dodać swojego logo:

Div.spacer ( kolor tła: #8FC73E; wysokość: 1em; ) div#navbar ( kolor tła: #8FC73E; dopełnienie: 10px 0; )

Oto co powinniśmy otrzymać:

W tej chwili w ogóle nie interesują nas informacje, więc możesz wstawić treść stąd do środkowych kolumn ta strona. Zanim zaczniesz Górna część, zajmijmy się dolnym. W naszym projekcie tło stopki jest kolorowe szary kolor. W tej chwili nie możemy tego wdrożyć, ponieważ jeśli pamiętasz, pomiędzy blokami jest pewne wgłębienie, które nie pozwoli nam całkowicie zamalować tego obszaru. Aby rozwiązać ten problem, przenieśmy 3 bloki związane ze stopką do oddzielnych bloków z id = stopka. Jeszcze jeden szczegół: gdy korzystamy z klas w obrębie klas, dobrze byłoby ustawić wartości alfa (aby wskazać, który blok będzie pierwszy, a omega - ostatni):

Div#stopka ( kolor tła: #e5e5e6; )

Doskonały! Nasza stopka ma teraz kolor tła. Dodaj do tego trochę tekstu i przejdźmy do bloku nawigacyjnego. Zgodnie ze wszystkimi prawami współczesnych zasad układu nawigacja jest listą nienumerowaną. Dodaj następujący kod i styl:

  • Artykuły
  • Tematy
  • O
  • Redaktorzy
  • Kontakt

Div#navbar ul ( styl listy: brak; wyświetlacz: blok; margines: 0 10px; ) div#navbar ul li ( float: lewy; margines: 0 1.5em; czcionka: pogrubiona 1em Arial; )

Fajny! Wszystko idzie nam dobrze. Pozostał już tylko blok z plakatem i prezentacją strony, jednak zanim zaczniemy je wdrażać, chciałbym powiedzieć kilka słów o frameworkach CSS w ogóle.

3. Frameworki CSS nie rozwiążą wszystkich Twoich problemów

Zanim zaczniesz układać swój projekt za pomocą frameworka CSS, powinieneś wziąć pod uwagę niektóre wady tych systemów. Czytając ten artykuł, nie można nie zauważyć, że zasady budowania strony są bardzo rygorystyczne. Wszystko ma swój własny, stały rozmiar. Zmieniając szerokość jednego bloku, musisz zmienić inne. W każdym razie coś trzeba poświęcić. Na przykład, co zrobisz, jeśli masz projekt o rozdzielczości 1000 pikseli, a siatka 960 pozwala na utworzenie maksymalnej szerokości 960 pikseli... A chcesz 1000 pikseli! Bez masowej zmiany kodu nie da się tego wdrożyć. Na przykład klient chciał szerszej witryny lub projektant nie zgadza się z Twoją realizacją. Jest jeszcze jeden problem związany z wysokością głośników. Jeśli trzy kolumny mają ten sam kolor tła (jak nasza stopka), konieczne jest, aby kolumny te miały tę samą wysokość. Kolejna istotna wada: zastosowanie dodatkowych wcięć i tworzenie ramek prowadzi do zniszczenia całego układu. Aby dodać to, co konieczne i niczego nie zniszczyć, musisz zrekompensować dodane wymiary. Teraz pokażę ci jak. Zacznijmy wykańczać górną część.

4. Część górna

Najpierw rozwiążmy problem z wysokością kolumny - napraw go. Następnie utwórzmy puste elementy div w jednym i drugim bloku. Będą zawierać rysunek lub informacje tekstowe. Nie będziemy ustawiać wewnętrznych wyściółek, ponieważ... możesz zmienić proporcje szerokości siatki. Utwórzmy małe zewnętrzne wcięcie dla znaczników p, aby tekst wyglądał ładnie.

W tym wypadku lepiej jest stworzyć klasę dla stylu niż ID, bo musimy zastosować to do kilku bloków. W razie potrzeby pozwoli nam to również zmienić wysokość w 2 liczbach. Tak wyglądają nasze zajęcia:

Div.topSection div ( obramowanie: pełne 10 pikseli #e5e5e6; wysokość: 280 pikseli; ) div.topSection div p ( margines: 10 pikseli; )

Fajny! Zobaczmy, co mamy:

Gotowy do wypełnienia? Następnie dodaj trochę tekstu do lewego bloku, ale nie przesadzaj, aby nie przekroczyć wysokości. W rzeczywistości w prawdziwych projektach projektant musi to wszystko obliczyć (liczbę znaków, która będzie odpowiadać rozmiarowi bloku); Zanim wstawisz obraz do odpowiedniego bloku, musisz zdecydować o jego wymiarach, jeśli jeszcze tego nie zrobiłeś. Można to zrobić na wczesnym etapie projektowania lub za pomocą FireBug. Kliknij Sprawdź. Kliknij potrzebny div. Wybierz kartę Układ. Następnie zobaczysz wszystkie potrzebne informacje. Poniższy obraz będzie Ci pomocny:

Na zrzucie ekranu plakat ma wymiary 360x280. Znajdź obraz i stylizuj go:

Img#plakat ( szerokość: 360px; wysokość: 280px; )

To wszystko! Szablon jest gotowy. Teraz pozostaje tylko wypełnić go prawdziwą treścią i opublikować w Internecie:

5. Poznaj swoje możliwości

Teraz, gdy wszystko jest gotowe, podsumujmy. Siatka 960 pozwoliła nam na nitowanie szablonu w 15 minut. Fajny? Tak! Czy testowaliśmy to w IE6, IE7? NIE! Musieć? NIE. To dopiero początek! Więc co jest teraz? Teraz trzeba to pokazać klientowi i zobaczyć reakcję. Jeśli będzie z tego zadowolony, to możemy przystąpić do testów, jeśli jednak nie, a klient będzie chciał czegoś bardziej skomplikowanego, to będzie musiał sam napisać wszystko od zera. Powtórzę to jeszcze raz. Frameworki CSS nie rozwiązują wszystkich problemów. Mimo to tysiące programistów używa ich jako zwykłego narzędzia do tworzenia stron internetowych, ponieważ, jak każde narzędzie, frameworki CSS mają własne pole do szerokiego zastosowania. W każdym razie, jeśli wymagania projektowe nie są zbyt szczegółowe (80% przypadków), wówczas stosując 960 Grid, możesz zaoszczędzić dużo czasu - a czas to pieniądz!

  • Rozwój strony internetowej

    • Każdy projektant układu, który stoi przed kolejnym zadaniem zaprojektowania układu adaptacyjnego, potrzebuje siatek. W większości przypadków używany jest stary dobry bootstrap i w kodzie HTML zaczynają pojawiać się elementy div z klasami takimi jak col-xs-6 col-sm-4 col-md-3. I wszystko wydaje się być dobre i szybkie, jednak w tym podejściu często kryje się wiele pułapek. W tym artykule przyjrzymy się tym pułapkom i rzucimy zgniłymi pomidorami w nasz sposób na bezproblemowe sieci.

    Problemy Siatki niestandardowe

    Tak więc nasz projektant układu ma bardzo mało czasu, układ się pali, wszystko trzeba zrobić na wczoraj. Dlatego bierze za podstawę popularny bootstrap frameworku CSS i rozpoczyna swoją pracę. A potem, w trakcie swojej pracy, nagle natrafia na blok banerów „5 w rzędzie”. Każdy, kto pracował z bootstrapem, wie, że jego domyślna siatka jest 12-krotna, więc nie można utworzyć 5 kolumn z rzędu przy użyciu standardowej siatki bootstrap. Tak, oczywiście, możesz złożyć dowolną siatkę w bootstrapie, ale jest to czas do stracenia, pobierania zależności, zbierania mniej (a piszemy np. Sass).


    Może podłączyć jakąś bibliotekę dla niestandardowych siatek? Generalnie jest to dobre rozwiązanie, jedyną wadą tego podejścia jest to, że prawie wszystkie są przeznaczone albo do długiego i żmudnego pisania @media(min-width:)() , albo generują własny zestaw klas, z garść prawdopodobnie niepotrzebnych col15-xs-offset-3 , które zostaną uwzględnione w końcowym CSS.


    Dlatego z dużym prawdopodobieństwem projektant układu po prostu napisze wszystkie style ręcznie (w zasadzie nie ma tam zbyt wiele do pisania).

    Bardzo często w standardowej siatce bootstrap brakuje dodatkowych punktów przerwania, czyli są xs, sm, md, lg - wszystkie do szerokości 1200px. Ale co z duże monitory? Jakiś punkt przerwania xl w rozdzielczości 1600px aż prosi się o włączenie go do standardowego zestawu. Ale znowu go tam nie ma i pojawiają się te same opcje rozwiązania, co w poprzednim akapicie. Ale punktów kontrolnych może być wiele - 320, 360, 640, 768, 992, 1200, 1600, 1900..

    Redundancja i gadatliwość

    I tu stopniowo się zbliżamy następny problem. Wyobraź sobie, że musisz określić różne rozmiary bloków dla każdej siatki, a otrzymasz coś takiego:



    Czy to za dużo? Dodaj tutaj możliwe pull/push i widoczne/ukryte i wtedy możesz bezpiecznie zacząć szaleć. Ale wszystkie te klasy są napisane w css, wyobraź sobie, ile klas trzeba napisać w css dla wszystkich kombinacji 60-krotnej siatki!

    Oddzielanie stylów od znaczników

    Każdy projektant układu wie, że style wbudowane są złe. Dlaczego więc piszemy style w klasach znaczników? col-xs-6 , widoczny-sm i nie daj Boże tekst-prawy - to są wszystkie style i jeśli zajdzie potrzeba wprowadzenia zmian w już rozplanowanym układzie, na pewno pojawi się problem, który będzie miał projektant układu poprosić projektanta zaplecza o zmianę col-sm-6 na col-sm-4.

    Zastępowanie niepotrzebnych stylów

    Często cały framework CSS jest dołączany tylko ze względu na siatki i kilka małych funkcji, co w konsekwencji skutkuje nadmiernym resetowaniem stylów i podwójnym rozmiarem końcowego CSS. Na przykład cały plik bootstrap.min.css jest łączony, a następnie cienie i zaokrąglone rogi .btn, .form-control i tym podobnych są radośnie i wesoło usuwane, w tym :hover, :focus, :first-child . W rezultacie zamiast pomagać, framework zaczyna przeszkadzać. Nie wspominając o często niepotrzebnych funkcjach, takich jak .glyphicon . Oczywiście możesz ponownie złożyć bootstrap z tego, czego potrzebujesz, ale nadszedł czas ponownie.

    Standardy i styl kodu innych ludzi

    Załóżmy, że projektant układu przestudiował BEM i zaczął go używać. Ale potrzeba użycia bootstrap dyktuje wyjątki - w nim wszystkie klasy są pisane łącznikiem, nie przestrzegając zasad BEM. I tu pojawia się problem wyboru - albo pogodzić się z mieszaniną nazw klas (btn-block wyłączony komponent__btn komponent__btn_disabled), albo wyrzucić bootstrap.

    Przestarzałe metody

    Jak wiesz, siatki w Bootstrap 3 opierają się na zmiennoprzecinkowych. To, co często sprawia problemy, jednym z najczęstszych jest różna wysokość bloków, w efekcie czego piękna siatka „pęka”. Przestań używać pływaków do innych celów; wszystkie przeglądarki, które nie obsługują Flexbox, prawie wyginęły!

    Susy! - czy to jest wyjście?

    W poszukiwaniu rozwiązania wszystkich powyższych problemów sięgnąłem po wspaniały framework gridowy Susy! Ogólnie bardzo dobrze. Ale nie miałem wystarczającej prędkości, bo susy! zasugerowano opisanie kolumn dla każdego punktu przerwania osobno:


    .col ( @media (min-width: 768px) ( @include galeria(4 z 12); ) @media (min-width: 1200px) ( @include galeria(3 z 12); ) )

    To jest suuuper! zakłada, że ​​sam poradzisz sobie z punktami przerwania. Także, Susiu! nie pisze display: flex dla linii dla ciebie, musisz pamiętać, aby napisać je samodzielnie. Wcięcia pomiędzy kolumnami w nim są ustawione wyłącznie względnie (nie będzie możliwości ich utrwalenia w pikselach). Niedawno nauczył się też flexu, a wcześniej budował siatki za pomocą float i:nth-child() . Ogólnie rzecz biorąc, susy! to dobrze, ale chciałbym szybkości i łatwości opisywania siatek dla wszystkich punktów przerwania, tak jak miało to miejsce w przypadku bootstrapu.


    Poszukiwania innych systemów gridowych również nie dały zbyt wielu rezultatów - wszyscy albo podążają ścieżką susy!, zapominając o punktach przerwania, albo podążają ścieżką bootstrap, dostarczając zestaw wygenerowanych klas do zarządzania gridami w html.

    Produkcja rowerów

    Postanowiono więc napisać coś własnego i w rezultacie narodził się fast-grid. To, podobnie jak Susy, jest zbudowane na bezczelności. Jakie są jego główne zalety w porównaniu z innymi rozwiązaniami, w szczególności susy!? Po pierwsze, szybkość wynikająca z mniejszej ilości kodu, weźmy standardowy przykład bootstrapu:


    1 2

    Używając szybkiej siatki, taką siatkę można bardzo łatwo opisać:


    @import "~szybka-siatka/szybka-sieć"; .row ( @include siatka-wiersz(); ) .col ( @include siatka-row(6 4 3 2); )

    Przyjrzyjmy się teraz naszym niedociągnięciom i zobaczmy, jak szybka sieć rozwiązuje wszystkie te problemy.

    Siatki niestandardowe

    @import "~szybka-siatka/szybka-sieć"; .cols ( $grid: (przerwa: 5 pikseli); @include grid-row($grid); &__item ( @include grid-col(12 6 null (1 z 5), $grid); ) ) Potrzebujesz własnego ustawionego punktu przerwania - ov @import "~szybka-siatka/szybka-siatka"; .cols ( $grid: (punkty przerwania: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), kolumny: 60); @include grid-row($grid); &__item ( @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) ) Redundancja i gadatliwość / Oddzielanie stylów od znaczników

    fast-grid to framework gridowy do użycia w CSS zamiast HTML, oparty na wygenerowanych zestawach klas. Dzięki temu znaczniki są oddzielone od stylów, co jest korzystne dla przyszłej pomocy technicznej. Eliminuje to również potrzebę generowania grupy klas pomocniczych (.col-xs-push-4 itp.), które są w większości nieużywane.

    Zastępowanie niepotrzebnych stylów

    Ponieważ fast-grid jest zestawem miksów, sam w sobie nie generuje żadnych reguł w css. Dlatego tutaj nie spotkasz się z faktem, że framework stylizuje elementy w sposób, którego nie potrzebujesz. Ogólnie rzecz biorąc, są to tylko siatki i nic więcej.

    Standardy i styl kodu innych ludzi

    fast-grid to miksy, których powinieneś używać wewnętrznie twój zajęcia o nazwach, które sam preferujesz. Czy podoba Ci się BEM? Bez problemu!

    Przestarzałe metody

    Domyślnie stosowany jest flexbox, który otwiera wiele możliwości i rozwiązuje problemy klasycznych spławików. Na przykład możesz łatwo zmienić kolejność kolumn.


    W poniższym przykładzie wyświetlamy pasek boczny pod główną treścią wersja mobilna i uczyń go pierwszym blokiem na dużych ekranach.


    Oczywiście można to osiągnąć za pomocą ciągnięcia/pchania, ale jest to bardzo trudne.

    Wniosek

    Ogólnie rzecz biorąc, postawione mi zadanie zostało wykonane - teraz siatki nie sprawiają mi już żadnych problemów, a układanie jest szybkie i łatwe. Więcej o możliwościach fast-grida możesz przeczytać w repozytorium i obejrzeć przykłady:



    Czy nadal używasz bootstrapu? W takim razie idziemy do Ciebie!

    Tagi:

    • css
    • bezczelne
    • siatka
    Dodaj tagi

    Układ oparty na siatce to układ z poziomymi i pionowymi prowadnicami, który pomaga uporządkować zawartość i zachować spójną strukturę podczas tworzenia projektu.

    Od bardzo dawna profesjonalni projektanci wykorzystują siatki do opracowywania projektów o optymalnych proporcjach. One z kolei pomagają poprawić czytanie tekstu. Siatka stosowana dziś w projektowaniu stron internetowych została stworzona jeszcze w latach dwudziestych XX wieku przez bardzo utalentowanych szwajcarskich projektantów i od tego czasu wymyślony przez nich projekt stał się światowym standardem organizacji treści na stronach projektów internetowych.

    Aspekty dobry układ

    Dzięki temu standardowi projektanci stron internetowych mogą z łatwością rozwiązać wiele problemów, jakie napotykają podczas pracy z układami opartymi na siatce. Przyjrzyjmy się kilku aspektom dobrego układu, który można ożywić za pomocą systemu siatkowego.

    Responsywność i elastyczność

    Podział treści na określone kolumny pomaga twórcom stron internetowych zrozumieć, jakie będą ich działania różne rozmiary ekrany. Możesz także utworzyć „elastyczną siatkę” w HTML i CSS opartą na wartościach procentowych, a nie na stałych wartościach. Móc w prosty sposób zmniejszyć liczbę niektórych kolumn, przekształcić treść.

    Wyrównanie i równowaga

    Cała treść zostanie wyrównana wzdłuż pionowych kolumn na całej długości strony. Pozwala to uzyskać doskonałą równowagę wizualną, stosując w całym pomieszczeniu te same odstępy i poziome pojemniki.

    Jednolitość

    Jeśli w całym projekcie używasz tego samego układu siatki, możesz przedstawić tylko jeden spójny układ i utworzyć szablon organizujący tekst. W ten sposób możesz zaoszczędzić czas, używając tego samego układu różne strony witryny, a wszystkie elementy będą miały te same wymiary.

    Konfigurowanie i użytkowanie systemu grid

    Przyjrzyjmy się przykładowej witrynie korzystającej z systemu siatki.

    Na zdjęciu widać 12-kolumnową siatkę, która jest najpopularniejszym układem w projektowaniu stron internetowych. Dzięki tak dużej liczbie kolumn możesz łatwo podzielić treść na cztery, trzy lub dwie kolumny. Jeśli wybierzesz układ 16-kolumnowy, możesz uzyskać więcej możliwości, ale jednocześnie pojawi się szereg trudności w pracy z projektem. Układ ośmiokolumnowy jest dobrą opcją, ale nie pozwala na podzielenie treści na więcej niż trzy kolumny. Dlatego profesjonalni projektanci stron internetowych zalecają stosowanie siatki 12-kolumnowej.

    Podstawowa zasada tworzenia własnego układu siatki

    Główną zasadą projektowania układu siatki jest to, że każda kolumna siatki powinna mieć tę samą szerokość i równe odstępy między nimi. Aby obliczyć szerokość kolumn, możesz użyć prostej matematyki.

    Na przykład szerokość strony będzie wynosić 1140 pikseli, siatka będzie składać się z 12 kolumn i będzie 11 spacji. Początkowo musisz zrozumieć, jaka będzie szerokość spacji: na przykład 12 pikseli.


    Po dokonaniu wszystkich obliczeń otrzymamy układ, który będzie miał 12 kolumn po 84 piksele i 11 spacji po 12 pikseli, a cała szerokość będzie wynosić 1140 pikseli. Technikę tę można zastosować do dowolnych obliczeń, najważniejsze jest poznanie szerokości strony i spacji.

    Dopasowywanie krzywych w Photoshopie

    Jest to dość nudne i czasochłonne zadanie. Aby proces ten był szybszy i przyjemniejszy, większość projektantów zaleca korzystanie z programu Photoshop CC 2014. Można w nim znaleźć Nowa cecha, który jest nazywany układem przewodnika. Dzięki niemu w krótkim czasie możliwe będzie stworzenie pożądanej siatki o krzywiznach pionowych i poziomych.


    W kratach występują pewne niuanse, które utrudniają ich dostrzeżenie. Zanim zaczniesz konfigurować układ, musisz upewnić się, że używany system siatki będzie łatwy w użyciu dla twórców stron internetowych podczas tworzenia projektu.

    Korzystanie z siatek przy opracowywaniu projektu układu projektu internetowego może być bardzo pomocne. Ta praktyka jest dość prosta i popularna wśród większości projektantów.

    Przykłady projektów internetowych opartych na siatce

    Przyjrzyjmy się kilku całkiem interesującym przykładom stron internetowych oraz sposobowi wykorzystania siatki i wypełnienia ją tekstem.





    W tej lekcji przygotujemy układ strony przy użyciu układu PSD, wykorzystując wyłącznie Grid System z frameworka Bootstrap 4. Nauczywszy się tej metody układu, oszczędzasz się możliwe problemy dzięki możliwości dostosowania witryny jest to szczególnie dobre dla początkujących.

    Możliwość dostosowania witryny podczas układu Siatka bootstrapowa zapewniają flexboxy obsługiwane przez wszystkie główne przeglądarki, a nawet Internet Explorer, zaczynając od IE9+. Aby uzyskać więcej wcześniejsze wersje niż IE 9, łączymy skrypty, które pomagają poprawnie wyświetlić nasz układ.




    A co najważniejsze, układ PSD należy początkowo narysować z uwzględnieniem dalszych Układ Bootstrapa. Nie ma więc innych powodów, dla których nie miałbym używać siatki bootstrap, zarówno w swoich projektach, jak i na zamówienie. Postaram się podawać mniej teorii, wody i więcej praktyki.

    Przygotowanie do układu

    Otwórz układ w Photoshopie i upewnij się, że ma on układ 12 kolumn wzdłuż prowadnic i że wszystkie elementy projektu są dopasowane do wytycznych. Odległość między zewnętrznymi prowadnicami wynosi zwykle 1170 pikseli.

    Pobierz na stronie internetowej https://getbootstrap.com/ skompilowany CSS i JS dla łatwej integracji z Twoim projektem.

    Skopiuj z sekcji Wprowadzenie/szablon startowy- szablon strony startowej i wklej go do indeksowego pliku HTML swojego projektu. Stworzyliśmy szablon przyszłego dokumentu HTML.

    Czy powinienem pobrać plik bootstrap.min.css, czy użyć linku do niego?

    Uważa się, że plik bootstrap.min.css załaduje się szybciej, ponieważ znajduje się na kilku serwerach, a nie na jednym serwerze. Oznacza to, że strona otworzy się szybciej. Jeśli nadal decydujesz się na pobranie tego pliku dla siebie, to podaj poprawną ścieżkę do folderu z plikami Bootstrap. W każdym razie musisz utworzyć pusty plik CSS, w którym będziesz pisać swoje style.

    Ważny! Twój plik CSS w pliku indeksu powinien znajdować się niżej niż bootstrap.min.css .





    Łączymy czcionki. Można zobaczyć, jakich czcionek i ikon używa projektant w układzie Program do Photoshopa lub w rozszerzeniu przeglądarki Chrome – WhatFont.



    Dlaczego potrzebujemy dwóch plików CSS?

    Plik CSS bootstrap.min.css to biblioteka, do której nawet nie musisz wchodzić. Pracujemy tylko z jednym plikiem - main.css, ale musimy się upewnić, że nazwy nowych klas w Twoim pliku CSS nie pokrywają się przypadkowo z klasą „biblioteczną”.

    W pliku bootstrap.min.css zostały już utworzone style dla siatki flexbox i zapisane zapytania o media, pozostaje nam jedynie zarejestrować odpowiednie klasy w wymagane bloki na stronie HTML. Nazwy klas można znaleźć na stronie frameworka w sekcji Siatka. Doświadczeni projektanci układu Bootstrap łączą wtyczki (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) z edytorem kodu Sublime Text.

    Dzielenie układu PSD na bloki

    Widzimy, że witryna składa się z 8 bloków: nagłówka z menu nawigacyjnym (nav), 6 sekcji (sekcja) i stopki.

    W sekcjach (sekcja: #usługi, #portfolio) pojawiają się kolumny, które będziemy układać w oparciu o główny komponent Bootstrapa - siatkę.

    Najpierw tworzymy znaczniki HTML głównej struktury, będziemy dodawać szczegóły w miarę postępu układu.








    W dalszej części zajmiemy się układem, ale nie całym układem, ale jego poszczególnymi blokami. Ponieważ celem tych lekcji jest pokazanie początkującym, jak skutecznie połączyć konwencjonalny układ z układem siatki Bootstrap.

    Witaj, Habr. Czytam Cię od prawie 10 lat, ale nigdy nie napisałem artykułu. Na początku nie było nic do powiedzenia, potem nie było czasu. Ale dzisiaj gwiazdy się wyrównały i pojawił się odpowiedni temat. Siatka modułowa.


    Wydawać by się mogło, że naszkicowanie siatki zajmuje pięć minut. Wszystko zostało dla nas przeżute, a bootstrapsy na każdy gust, a „Annushka już rozlała swój olej…”. Ale w praktyce projektanci często mają pytania. Wiele osób jest zdezorientowanych nawet niewielkimi odchyleniami od zwykłych 12-kolumnowych siatek, ponieważ nie do końca rozumieją zasady konstrukcji.


    Dawno, dawno temu temat ten był szeroko omawiany w serii artykułów Aleksieja Czerenkiewicza, ale teksty te zniknęły. otwarty dostęp. I choć nadal można je znaleźć w archiwach, same teksty z biegiem lat stały się nieco nieaktualne.


    Jednym słowem, po raz kolejny odpowiadając na pytanie o siatkę modułową i nie znajdując ani jednego odpowiedniego linku, postanowiłem jakoś podsumować w notatce wszystko, co rozprzestrzeniło się w dziesiątkach komentarzy na różnych stronach.

    Jak działa siatka

    Każdy układ zawiera elementy. A czasami jest ich mnóstwo. Pomiędzy elementami powstają optyczne połączenia i przyciągania, które przestrzegają teorii bliskości, a w szczególności zasady tego, co zewnętrzne i wewnętrzne.


    Siatka pomaga zastosować się do tej zasady bez konieczności obliczania każdej odległości i wymiaru osobno. Ustalasz kluczowe wzorce raz, kiedy budujesz siatkę, a potem po prostu się ich trzymasz.


    W odróżnieniu od siatki słupowej, siatka modułowa wyznacza pionowy rytm i podstawowe proporcje elementów, wspierając je w całej aranżacji. Jest wygodny, elastyczny i cichy prosty system. Pod warunkiem, że dostatecznie zagłębiłeś się w jego zasady.

    Co decyduje o strukturze siatki

    Siatka modułowa zbudowana jest w dwóch kierunkach: poziomym i pionowym. Z grubsza mówiąc, jest to połączenie kolumn i wierszy z układem podzielonym na linie.


    To drugie jest intuicyjnie jasne dla wszystkich starszych osób, które miały okazję narysować setki rysunków za pomocą ołówka i linijki. linie poziome na arkuszach abstrakcyjnych. Nie zdziwiłbym się jednak, gdyby studenci nadal to robili.


    Jeśli więc chcesz zbudować siatkę od zera, zaczniesz od dwóch rzeczy. Po pierwsze z treści, które należy umieścić w układzie: teksty, ilustracje, tabele, zestawienia, pliki multimedialne. Po drugie, na proporcjach i powierzchni medium: kartka papieru, ekran, płótno lub coś bardziej egzotycznego.


    Jeśli treść jest prosta i niezmienna oraz znana Ci z góry, wtedy najłatwiej będzie na niej zbudować. Jeśli treść jest złożona i nieprzewidywalna (na przykład wygenerowana przez użytkowników), siatka będzie w dużej mierze zdeterminowana formatem multimediów i ogólne zasady typografia i kompozycja.

    Rozpoczęcie budowy. Rytm pionowy

    Jeśli chodzi o strony internetowe lub materiały drukowane, projekt w dużej mierze zależy od typografii i właściwości tekstu. Dlatego wygodnie jest rozpocząć budowę siatki z rytmem pionowym.


    Przede wszystkim musisz znaleźć dwa powiązane ze sobą kluczowe parametry: wysokość linii bazowej i podstawowy rozmiar czcionki. Mówiąc najprościej (he, hee), podstawowa interlinia i rozmiar czcionki. I to proste zadanie ciągle dezorientuje ludzi. „Jak sprawdzić wymaganą wysokość wiersza?”, „Jakiej czcionki użyć?”, „Ile wierszy zrobić w broszurze? A na wizytówkę? i tak dalej.

    Opcja „A”. Podejście liniowe

    Jeśli Twoje multimedia mają stały rozmiar i znasz już całą kluczową treść, możesz z góry oszacować lead.


    Aby to zrobić, musisz sobie wyobrazić, że każdy element projektu, łącznie z wcięciami, zajmuje określoną liczbę abstrakcyjnych linii na wysokości. Następnie zsumuj wszystkie linie i podziel przez nie wysokość układu. A następnie podziel każdą abstrakcyjną linię na N rzeczywistych linii odpowiadających wymaganemu interlinii - tak, aby dany tekst odpowiednio się w nich zmieścił.


    Proste, ale szczegółowy przykład z obrazkiem

    Załóżmy, że musisz sporządzić listę najlepszych pracowników miesiąca na kartce A4. Masz ich trzech. Dla każdego pracownika tworzysz kartę blokową: zdjęcie po lewej stronie, tekst po prawej. Zdjęcie jest większe, więc wysokość karty jest równa jej wysokości. Dodatkowo należy umieścić nagłówek z tytułem na arkuszu, a blok na dole informacje kontaktowe[związek zawodowy geniuszy].


    Analizujesz problem i w myślach szacujesz względne wysokości wszystkich elementów. Zakładasz, powiedzmy, że wysokość przyszłego nagłówka zajmie około połowy wysokości zdjęcia. A w piwnicy będzie wiele rzeczy i okaże się, że mają one wysokość równą zdjęciom. Plus minus łopata. Jeśli zajdzie taka potrzeba, policzysz to jeszcze raz.


    Jeśli teraz przyjmiesz, że wysokość nagłówka to jedna „linia”, oznacza to, że cała treść składa się z 9 abstrakcyjnych „linii”. Jeśli trudno ci abstrahować od wiodących, nazwij te „linie” wierszami lub poziome bloki. Powiedzmy, że chcesz także dodać 1/2 linii powietrza przed górną i dolną krawędzią arkusza. W sumie układ należy podzielić na 10 linii:



    W rezultacie dzielisz swoje media (arkusz A4) według wysokości na 10 „linii”. Powstałe bloki mają około 3 centymetry wysokości. Oczywiście jest to zbyt duży układ, aby wpisywać na nim teksty, dane kontaktowe i inne drobne rzeczy.


    Patrzysz na swoje teksty i zdajesz sobie sprawę, że przy każdym zdjęciu masz opis składający się z około 10-12 linijek tekstu. Oznacza to, że każdy blok należy podzielić na kolejne 5-6 części. Załóżmy, że grasz ostrożnie i przyjmujesz większą wartość, tak aby wcięta była jedna linia na raz. Bingo. Twój układ składa się teraz z 10 bloków po 6 linii każdy. Czyli 60 linii. Biorąc pod uwagę wysokość arkusza (~300 mm), każda linia okazała się mieć wysokość ~5mm. To wszystko, możesz wykonać prototyp prototypu, a następnie zaprojektować projekt.



    Ale co z rozmiarem czcionki? Och, teraz wszystko jest bardzo proste! Zgodnie z tą samą logiką „zasad zewnętrznych i wewnętrznych”, prowadzenie powinno wynosić około 150-200% wysokości punktu. Oznacza to, że rozmiar czcionki będzie 1,5-2 razy mniejszy niż wysokość linii. A to jest od 2,5 do 3,3 mm. Rozmiar ten można łatwo wybrać punktowo lub nawet na oko.


    Podkreślam, że nie trzeba mierzyć części tysięcznych za pomocą kalkulatora. Masz oko i poczucie proporcji - to powinno wystarczyć. I nawet jeśli nie są jeszcze opracowane, po stu lub dwóch układach będziesz mógł trafić palcem w siatkę z dokładnością do 1-2 pikseli, nawet przy ukrytych prowadnicach i wyłączonym przyciąganiu. I nie zapominaj, że ludzkie oko postrzega rozmiary i odległości z korektami fizjologicznymi. Dlatego sama siatka nie jest dogmatem, a jedynie przybliżoną pomocą w obliczeniach. Ostateczne słowo ma zawsze kompensacja optyczna. Do tego tematu wrócimy poniżej.


    Jeszcze chwila. Zdarza się, że po wszystkich obliczeniach okazuje się, że czcionka jest za duża lub interlinia za mała. W takim przypadku albo przeliczysz siatkę, albo po prostu użyjesz wartości proporcjonalnych. Z reguły opcja kompromisowa to połowa lub półtora wiodąca.

    Opcja „B”. Podejście „od szpilki”.

    Nie zawsze będziesz mieć przewidywalną treść i stałe płótno. Przy projektowaniu stron internetowych znacznie częściej pracujesz z całkowitą niepewnością.


    Czasami wygląda to jak artystyczne modelowanie ze smarka. Wysokość układu jest warunkowo nieskończona, szerokość jest zmienna, główna treść jest niestandardowa, osadzone widżety są dostarczane przez artel Pupkin and Sons, a klient pokaże Ci rzeczywisty tekst strony na około dzień przed uruchomieniem witryny . Ale to nie jest dokładnie.


    W takiej sytuacji oczywiście nie ma sensu ustalać liczby linii. Ale możesz tańczyć odwrotnie: od rozmiaru czcionki (punktu). I jest to jeszcze łatwiejsze.


    Wszystko, co musisz zrobić, to wybrać podstawową czcionkę do swojego projektu, która jest wystarczająco duża, aby dobrze ją czytać, ale jednocześnie wystarczająco mała, aby zmieścić 7-8 słów w wierszu podstawowych bloków tekstu. Ściśle mówiąc, w języku rosyjskim wystarczy 5-6 słów, ponieważ średnio nasz jest oczywiście dłuższy i silniejszy. Jest to jednak wytyczna, a nie dogmat. Trzeba polegać na konkretnym układzie, określoną czcionkę plus moja własna wizja i doświadczenie.


    Ogólnie rzecz biorąc, podstawowy rozmiar czcionki dla komputerowych wersji witryny będzie wynosić od 14 do 22 pikseli. Co więcej, panuje tendencja do rozszerzenia.


    Co do pedantów, zaznaczę: tak, już je wymyślono do szpilek jednostki względne pomiary i to jest świetne. Ale jeśli się w to tutaj zagłębimy, to starość pozostanie niezauważona, a nasz młody czytelnik uzupełni pierwszą siatkę mniej więcej wtedy, gdy w pełni poczuje daremność swoich składek na fundusz emerytalny. Dlatego tutaj i dalej w tekście „px” są zwykłymi kwadratowymi pikselami. Bez uwzględnienia siatkówek, bez uwzględnienia możliwości adaptacji, a także „bez głośników, bez wzmacniacza i bez ochrony przed głupcem, z którym się tu bawisz”.

    Natychmiastowa odpowiedź na często zadawane pytanie: „podstawowy” nie znaczy „najmniejszy”. W każdym układzie prawie zawsze będą mniej zauważalne napisy: przypisy, notatki, akapity międzywierszowe itp. Mówimy tutaj o czcionce, której będziesz używać do pisania większości tekstu. Pamiętaj o jakimkolwiek Edytor tekstu. otwierasz nowy plik i zaczynasz pisać jakąś „tylko czcionką”, pozbawioną specjalnego formatowania - jest to czcionka podstawowa, basefont. Jeśli chcesz zmniejszyć napis, nikt nie zabrania używania małej czcionki, jest to normalne.


    Zdecydowaliśmy się więc na czcionkę podstawową. Co dalej? A potem - prowadzenie. Zgodnie ze wspomnianymi już tradycjami współczesnej typografii będzie to 150-200% rozmiaru. A czasem więcej.


    (Podkreślam: mówimy o współczesnych realiach. Proszę nie zrzucać winę na Bringhursta i innych klasyków typografii książkowej - na pewno wysadzili swój parkiet, ale od tego czasu świat trochę się zmienił. Te 120-180% nadal liczone było dla książek, a nawet po łacinie).


    Zatem podstawowa interlinia prawie zawsze będzie mieściła się w przedziale od 22 do 40 pikseli.


    Z własnego doświadczenia wynika, że ​​w przypadku prostych witryn komercyjnych podstawowa interlinia wynosząca 15 pikseli jest całkiem wygodna. (To oznacza 30 pikseli, ale na poziomie układu wygodniej jest od razu pracować z połową, ponieważ daje to dobre marginesy 15 i 45 pikseli. Ważne jest, aby zrozumieć, że w kontekście siatki modułowej liczby 15 i 30 są takie same rzecz - po prostu pracujesz albo z połową wartości „trzydzieści”, albo z całkowitą wartością „piętnaście”). Chociaż przy całej mojej miłości do klasycznych siatek modułowych nie zaprzeczam zaletom tej samej modnej 4-pikselowej siatki w projektowaniu interfejsu użytkownika. Potrzebne są różne siatki, różne siatki są ważne. To narzędzie, a nie religia.

    Wynik pionowy

    Teraz, gdy mamy już podstawowe prowadzenie, możemy wyrównać układ i ostatecznie podążać za pionowym rytmem. Oznacza to, że każdy element projektu będzie zajmował określoną liczbę linii wysokości. Rytm staje się wygodny i łatwy w obsłudze. Nie trzeba kalkulować dokładne wartości w pikselach. Wszystko mierzysz liniami. Nagłówek pierwszego poziomu – 4 linie, ilustracja – 8 linii, awatar – 3 linie, przycisk – 3 linie, menu – 5 linii, wcięcie – 1 linia itd. (Mam nadzieję, że rozumiesz, że jest to przykład obrazowy, a nie przepis na sukces).


    Nawiasem mówiąc, sztywny rytm jest szczególnie wygodny w przypadku układu z preprocesorami CSS. Projektant układu musi jedynie zastąpić jedną zmienną podstawową interlinią, aby cała witryna była proporcjonalnie mniejsza lub większa. Nie oznacza to, że na tym zakończy się jego praca, ale wyeliminuje mnóstwo rutynowych operacji związanych z dostosowywaniem każdego elementu projektu z osobna.

    Kolumny i odstępyCo decyduje o liczbie kolumn

    Przede wszystkim z treści. Tutaj wszystko jest prostsze niż w przypadku wysokości. W przypadku materiałów drukowanych w zdecydowanej większości przypadków liczbę kolumn można odgadnąć już na etapie pierwszych szkiców.


    Na przykład, jeśli układasz blok dotyczący pór roku, twoją magiczną liczbą będzie prawdopodobnie 4. Możesz pogrupować je w jednym lub dwóch rzędach. W tym przypadku liczba kolumn będzie wielokrotnością dwóch lub czterech. Oznacza to, że warto polegać na liczbach 2, 4, 6, 8, 12 lub 16.


    Skomplikujmy to. Załóżmy, że pod blokiem z porami roku masz blok z trzema reklamy. Oczywiście w tej części układu wygodniej byłoby mieć liczbę kolumn będącą wielokrotnością trzech: 3, 6, 12... Ale siatka 3-kolumnowa najwyraźniej nie jest odpowiednia dla pór roku. Dlatego trzeba szukać dla nich jakiegoś wspólnego mianownika. Poprzedni akapit sugeruje, że potrzebujesz siatki składającej się z 6 lub 12 kolumn.


    *Inny przykład. Musisz zaprojektować typowy blok wizytówki składający się z logo/avataru (po lewej) i danych kontaktowych (po prawej). Ile kolumn potrzebujesz? Rozwiążmy to.


    Jeśli chcemy stworzyć zbilansowaną kompozycję, to poradzimy sobie nawet z dwoma kolumnami. W takim przypadku wyrównanie logo będzie centralne, a tekst będzie musiał zostać umieszczony wzrokowo. Możesz też założyć, że tekst zajmuje około dwukrotnie większą szerokość logo i odpowiednio utworzyć blok trzech kolumn. Możesz też pójść jeszcze dalej i dodać dopełnienie siatki. Załóżmy, że po lewej i prawej stronie będzie 1 kolumna marginesu, logo zajmie 2 kolumny, tekst zajmie 4 plus 1 kolumna wcięcia między logo a tekstem – łącznie 8 kolumn.*



    To prosty sposób rozumowania, gdy rozważamy siatkę. Jeśli treści jest dużo, ale twoje oko nie jest wytrenowane, możesz przelecieć za pierwszym razem i po opracowaniu szczegółów układu zorientujesz się, że siatka nie jest odpowiednia. Jest okej. W porządku.


    Jeśli chodzi o pojedynczy układ, dostosowanie projektu do nowej siatki nie jest trudne. Jeśli projekt jest duży i obejmuje wiele stron lub układów o jednym zarysie (strona internetowa, broszura, książka itp.), lepiej jest zachować pewien margines bezpieczeństwa w siatce i dokładnie przetestować ją z losową zawartością z różnych stron . Margines bezpieczeństwa zwykle osiąga się poprzez wielokrotne zwiększenie liczby kolumn: na przykład teraz potrzebujesz tylko 3, ale instalujesz 6 lub 9.


    Zwrócę uwagę na jeden niuans. Jeśli tworzysz coś z silną kompozycją centralną i często używasz poziomego wyrównania do środka, korzystne jest posiadanie nieparzystej liczby kolumn. Pozwoli to na bardziej równomierne rozłożenie wcięć i treści. Zalecenie dotyczy również wewnętrznego kruszenia kolumn. W powyższym przykładzie, jeśli miałeś 3 kolumny i musiałeś je uszczegółowić, przy kompozycji centralnej podzielisz każdą kolumnę na 3 kolejne, ale przy kompozycji symetrycznej - na 2 lub 4. W rezultacie w pierwszym przypadku nie będzie będzie 9 kolumn, a w drugiej - 6 lub 12.

    Dlaczego wszyscy uwielbiają siatki 12-kolumnowe

    Tutaj wszystko jest proste. Liczba 12 dzieli się na: 12, 6, 4, 3, 2, 1. Dlatego siatka jest elastyczna i pozwala organicznie układać bloki o niemal dowolnej liczbie i szerokości. Co więcej, odrzucając 1 lub 2 kolumny na krawędziach układu jako marginesy, otrzymasz blok pośrodku, który jest również podzielny przez 10, 5 lub 8.


    Z osobiste doświadczenie Dodam, że rysowanie jest bardzo wygodne responsywne układy, zaczynając od szerokości 1200 pikseli, zwłaszcza bez odstępów międzykolumnowych. Otrzymujesz 12 kolumn o ładnej szerokości dokładnie 100 pikseli i podczas pracy stale osiągasz orgazm z okrągłych liczb. A kiedy trzeba umieścić płytkę przycisku na układzie, nie przeciągasz krawędzi prostokąta tam i z powrotem, ale od razu i bez zastanowienia wpisujesz rozmiar: 300 na 60 i klikasz na układ. Swoją drogą warto przyzwyczaić się do pozycjonowania elementów nie za pomocą myszki i strzałek, ale poprzez wpisywanie numerów wcięć za pomocą X i Y – układy staną się ładniejsze.


    Jeśli treść nie wymaga układu od końca do końca, wygodnie będzie utworzyć 24 kolumny i pracować z nimi w taki sam sposób, jak w przypadku odstępów międzykolumnowych, po prostu wstawiając w razie potrzeby wcięcie całej kolumny o wielkości 50 pikseli. Tworzy to wystarczającą ilość powietrza wokół zawartości, a układ wygląda na kosztowny. Jeśli wymagany jest mniejszy odstęp, pobierana jest dokładnie połowa kolumny, czyli 25 pikseli. Wszystkie obliczenia wykonywane są na bieżąco, liczby są wygodne.

    Odstępy międzykolumnowe (rynna)

    Dlaczego i kiedy trzeba dodawać wcięcia między kolumnami?


    Nie zawsze wykonujemy mozaiki. Najczęściej treść nie jest ułożona od końca do końca - pomiędzy dwoma blokami musi być pewna odległość, aby nie sklejały się ze sobą i nie zachodziły na siebie.


    Ponadto czasami potrzebne jest powietrze, aby odciążyć oko widza. Biała przestrzeń. Gdy w układzie jest mało miejsca, a informacji dużo (np. w gazecie), zwiększenie odstępów między kolumnami staje się praktycznie jedynym sposobem na oddzielenie bałaganu tekstowego od graficznego.


    W większości przypadków odstępy między kolumnami są znacznie mniejsze niż szerokość kolumny. O jego wielkości decyduje także charakterystyka treści. Jeśli projektujesz interfejs z wieloma klasycznymi kontrolkami, wąskie odstępy między kolumnami służą jako wygodny separator. Na przykład pomiędzy pasek wyszukiwania a przyciskiem lub pomiędzy polem wyboru a jego etykietą. (Chociaż ogólnie rzecz biorąc, warto pomyśleć o siatce „kwadratowej”: 4px lub innej, w ogóle bez żadnych kolumn i są ku temu również powody). Jeśli układasz stronę z dużymi blokami tekstu zorganizowanymi tylko w 2-3 kolumnach, sensowne jest zwiększenie odstępu między kolumnami, aby zapewnić maksymalny przepływ treści.


    Jak wspomniano powyżej, z własnego doświadczenia wiele rzeczy można ułożyć przy zerowej odległości międzykolumnowej duża liczba kolumny W tym przypadku za wcięcie przyjmuje się szerokość całej kolumny, a wszystkie marginesy są duże, charakterystyczne dla „szlachetnej” typografii.


    Tylko nie dajcie się zwieść przyjemnemu słowu „szlachetny” – w segmencie komercyjnym taki projekt nie zawsze jest dobry. Ogólnie rzecz biorąc, im bardziej aktywny i agresywny jest schemat sprzedaży, tym bardziej głodni i wściekli są marketerzy klienta, tym gęstszy będzie układ i tym mniej powietrza w nim pozostanie. Ostatecznym (a raczej skrajnym) przypadkiem są gazety darmowe reklamy a la „Hand to Hand”, gdzie zajmowana przestrzeń bezpośrednio determinuje zarobki. Oczywiście nie ma co zachwycać się estetyką gigantycznymi polami. Równie dobrze możesz sięgnąć do kieszeni założyciela i pożyczyć stamtąd kilkaset dolarów do przyszłej zimy. Nie ma różnicy i jest mniejsza koordynacja.

    Moduł

    Właściwie w ten trudny sposób dotarliśmy do definiującego pojęcia „modułu”, od którego pochodzi nazwa siatki modułowej. Zwykle od tego zaczynają, ale sądząc po pytaniach projektantów, to podejście nie działa. Czym dokładnie jest i dlaczego jest potrzebny?



    W zasadzie to tylko proporcja. Szerokość modułu jest równa szerokości kolumny, a wysokość to kilka linii. Ile dokładnie? Zależy od Twojego projektu i efektu, jaki chcesz osiągnąć.


    *Kilka lat temu miałem okazję stworzyć stronę internetową poświęconą pylonom – słupom do tańca. Naturalnie moduł był tam bardzo wydłużony w pionie. Zastosowałem stosunek szerokości do wysokości prawie 1:3. Po pierwsze dlatego, że zdecydowana większość ilustracji była w orientacji pionowej i też była wydłużona. Po drugie, sam produkt i cały styl sugerowały pewną dozę fallicznej symboliki. Moduł zależy od treści, kompozycji i stylu.


    Jeśli robisz coś „stabilnego”, to odwrotnie: warto pomyśleć o module lekko wydłużonym w poziomie. Jeśli układasz ogromny, długi stół, który służy jako główna zawartość układu, oczywiste jest, że musisz wziąć jeden lub dwa podstawowe wiersze tego samego stołu jako moduł. Jednym słowem pomyśl.*


    W zasadzie nikt nie zabrania Ci budowania bardziej skomplikowanych siatek. Na przykład mogą zmieniać moduły o różnych wysokościach. Najważniejsze, że jest w tym jakaś logika i wzór, który utrzymuje pionowy rytm.


    Załóżmy, że tworzysz portal. Masz menu o wysokości 3 linii, po którym następuje główny baner wiadomości o wysokości 9 linii, następnie seria niektórych liczb (kursy walut, pogoda itp.) o wysokości 3 linii, a następnie seria kilku drugorzędnych wiadomości o wysokości 9 linii. Oznacza to, że cała treść jest naprzemienna: 3-9-3-9-3-9-3... W praktyce technika ta jest rzadko uzasadniona, nie jest zbyt elastyczna. Pamiętaj jednak, że rytm może być złożony.

    Siatka w siatce

    Tak, to też się zdarza. Gdy projekt jest złożony i wieloelementowy, można zastosować wiele zagnieżdżonych siatek. Najprostszy przykład: Ogólny układ wykorzystuje gigantyczne kolumny z dużym tekstem, a wewnątrz jednej z nich znajduje się formularz kalkulatora z wieloma elementami sterującymi rozmieszczonymi na kwadratowej siatce o wielkości 4 pikseli. Nie ma w tym nic szczególnie kryminalnego.


    Co więcej, jeśli chodzi o strony internetowe, część Twoich treści może być całkowicie obca i osadzona: odtwarzacze, mapy online, widżety, ramki płatności itp. Milion opcji. Elementy te będą miały własne wewnętrzne siatki, nad którymi nie masz kontroli. I to też jest w porządku.


    Jedyne, co możesz zrobić, to przestrzegać zasady wewnętrznej i zewnętrznej pojemniki zawierające te bloki. A dokładniej, należy zapewnić odpowiednią ilość powietrza wokół (również w pionie), aby nie przyklejały się do reszty treści, wyglądały osobno i nie przeciągały obcych elementów do swojej strefy wizualnej. Wszystkie odstępy i proporcje w układzie są względne, więc, ogólnie rzecz biorąc, możesz zrównoważyć zawartość innej osoby „na zewnątrz” niemal tak samo dobrze, jak zmienić rozmiar jej treści „wewnątrz”.

    Kompensacja optyczna

    Ten punkt może być trudny do zrozumienia dla projektantów-perfekcjonistów. Siatka to po prostu metodologia upraszczająca obliczenia. To nie jest credo, nie jest prawem wszechświata i nie jest panaceum. Co więcej, proporcje matematyczne, ze względów czysto fizjologicznych, nie są idealne dla ludzkiej percepcji. Siatka nie uwzględnia występowania złudzeń i zniekształceń optycznych.


    Jeśli więc Twoje oko powie Ci, że jakiś element należy przesunąć o kilka pikseli na prawo od linii siatki, możesz to zrobić. (Nie jest faktem, że projektant układu zauważy i uratuje twoją kulę optyczną, ale jednak).


    Oddzielny ważny punkt: Elementy siatki są ułożone według masy wizualnej, a nie granic wymiarowych. Oznacza to, że (w idealnym przypadku) okrąg wyrównany do lewej prawie zawsze będzie znajdował się kilka pikseli na lewo od kwadratu wyrównanego do tego samego marginesu. A małą interlinię pod dużym nagłówkiem prawie zawsze trzeba przesunąć w prawo, bo optycznie lewa krawędź pierwszej litery nagłówka będzie bardziej na prawo niż „zgodnie z obliczeniami”. Jest to szczególna kompensacja optyczna.


    Takich subtelności jest całkiem sporo. Ale ważne jest, aby zrozumieć, że przy projektowaniu stron internetowych prawie nigdy nie uzyskasz idealnego obrazu. Układ strony internetowej jest często sformalizowany; opiera się na formalnych zależnościach frameworków, aby elastycznie dostosowywać się do różnych urządzeń i platform. A odpowiednie skalowanie 3-pikselowego przesunięcia nagłówka, biorąc pod uwagę wszystkie funkcje wygładzania, wygładzania i innych brudnych słów, jest prawie niemożliwe. Należy to traktować filozoficznie.

    Streszczenie

    Być może to wszystko. Tekst jest już obszerny, nie potrzeba żadnych specjalnych wniosków: albo można się w niego zagłębić, albo nie. W każdym razie dziękuję za uwagę i zainteresowanie podstawami projektowania i typografii. Powodzenia.

    Tagi: Dodaj tagi