Inspirowane decyzje projektowe: Avaunt Magazine

Nienawidzę tego przyznać, ale pięć czy sześć lat temu moje zainteresowanie projektowaniem stron internetowych zaczęło słabnąć. Oczywiście posiadanie firmy oznaczało, że musiałem dalej pracować, ale utrzymanie motywacji i oferowanie klientom najlepszego sposobu myślenia stało się codzienną walką.

Patrzenie w sieć nie poprawiło mojej motywacji. Projektowanie stron internetowych popadło w stagnację, przewidywalność zastąpiła kreatywność, a pomysły wydawały się mniej ważne niż dane.

Powody, dla których lubiłem pracować w sieci, nie wydawały się już istotne. Design stracił swoją radość. Złożone zestawy narzędzi do budowania i procesorów wyparły nawet prostą przyjemność pisania HTML i CSS.

Kiedy zacząłem pracować z legendarnym projektantem gazet i magazynów Markiem Porterem, zafascynowało mnie kierownictwo artystyczne i projektowanie redakcyjne. Jako ktoś, kto nie studiował ani w szkole artystycznej, wszystko w tej dziedzinie projektowania było ekscytujące i nowe. Przeczytałem wszystkie książki o wpływowych dyrektorach artystycznych, jakich udało mi się znaleźć, i zacząłem zbierać czasopisma z miejsc, które odwiedziłem na całym świecie.

Im bardziej zainspirowało mnie projektowanie czasopism, tym szybciej mój entuzjazm do projektowania stron internetowych wracał. Zastanawiałem się, dlaczego wielu projektantów stron internetowych uważa, że ​​projektowanie nadruków jest staromodne i nieistotne dla ich pracy. Zastanawiałem się, dlaczego tak niewiele z tego, co wyróżnia projektowanie druku, przenosi się do sieci.

Moim celem stało się poszukiwanie inspirujących przykładów projektowania redakcyjnego, badanie tego, co czyni je wyjątkowymi, i znajdowanie sposobów na dostosowanie tego, czego się nauczyłem, aby stworzyć bardziej przekonujące, angażujące i pomysłowe projekty dla sieci.

Moje regały są teraz przepełnione inspiracją do projektowania czasopism, ale moja kolekcja wciąż się powiększa. Mam ograniczoną przestrzeń, więc jestem wybredna co do tego, co podnoszę. Kupuję urozmaicony wybór i rzadko zbieram więcej niż jeden numer o tym samym tytule.

Szukam ekscytujących układów stron, inspirującej typografii i innowacyjnych sposobów łączenia tekstu z obrazami. Kiedy magazyn ma mnóstwo ciekawych elementów projektowych, kupuję go. Jeśli jednak magazyn zawiera tylko kilka inspiracji, przyznaję, że nie waham się ich sfotografować przed odłożeniem na półkę.

Kupuję nowe czasopisma tak regularnie, jak mogę, a tydzień przed świętami poznaliśmy się z kilkoma przyjaciółmi w Londynie. Żadna wycieczka do „Dyma” nie jest kompletna bez postoju w Magmie, a kupiłem kilka nowych magazynów. Po tym, jak wyjaśniłem mój dodatek do inspiracji, jeden z przyjaciół zasugerował, abym napisała o tym, dlaczego uważam projekt magazynu za tak inspirujący i jak magazyny wpływają na moją pracę.

Ta rozmowa zrodziła pomysł na serię o podejmowaniu inspirujących decyzji projektowych. Co miesiąc wybiorę publikację, omówię, co wyróżnia jej projekt i jak możemy wyciągnąć wnioski, które pomogą nam lepiej pracować w sieci.

Jako entuzjastyczny użytkownik HTML i CSS wyjaśnię również, jak wdrażać nowe pomysły przy użyciu najnowszych technologii; Siatka CSS, Flexbox i Kształty.

Miło mi powiedzieć, że znów jestem zainspirowany i zmotywowany do projektowania dla sieci i mam nadzieję, że ta seria również Cię zainspiruje.

Magazyn Avaunt: dokumentowanie niezwykłego

Jedno spojrzenie na mnie powie ci, że nie jestem wielkim poszukiwaczem przygód. Nie uważam się za osobę szczególnie kulturalną, a moja żona regularnie żartuje na temat mojego braku stylu.

Co więc przyciągnęło mnie do magazynu Avaunt i jego relacji o „przygodzie”, „kulturze” i „stylu”, skoro jest tak wiele konkurencyjnych i zróżnicowanych magazynów?

Często wystarczy mi tylko kilka przewrotów stron, aby zdecydować, czy dany magazyn oferuje inspirację, której szukam. Coś musi się wyróżnić w tych pierwszych kilku sekundach, abym mógł przyjrzeć się bliżej, czy to ekscytujący układ strony, inspirujący zabieg typograficzny, czy innowacyjne połączenie obrazów z tekstem.

Avaunt ma to wszystko, ale najbardziej uderzył mnie sposób, w jaki dyrektor artystyczny wykorzystał kolor, układ i czcionkę na różne sposoby, zachowując spójną atmosferę w całym magazynie. Istnieją charakterystyczne wątki projektowe, które przewijają się przez strony Avaunt. Szczególnie uderzające są odważne zastosowania szablonu szeryfowego i geometrycznego kroju bezszeryfowego, podobnie jak powtórzenie czerni, bieli i czerwieni, które projektanci Avaunt wykorzystują na różne sposoby. Wiele kreatywnych wyborów Avaunt jest równie ryzykownych, jak historie, które opowiada.

Wiele czasopism poświęca swoje pierwsze rozkładówki na błyszczącą reklamę, a Avaunt robi to samo. Przerzucając te reklamy, można znaleźć stronę zawartości Avaunt i jej fascynującą czterokolumnową siatkę modułową.

Ten układ utrzymuje porządek treści w obrębie stref przestrzennych, ale zachowuje energię, dzięki czemu każda strefa ma inny rozmiar. Ten układ może być dostosowany do wielu rodzajów treści online i powinien być łatwy do wdrożenia za pomocą CSS Grid. Nie mogę się doczekać, żeby to wypróbować.

W przypadku nagłówków bezszeryfowych, stand-pierwszych i innych elementów pisma, które są mocne, Avaunt używa MFred, zaprojektowanego początkowo dla magazynu Elephant przez Matta Willeya w 2011 roku. Matt następnie kierował grafiką przy uruchomieniu Avaunt i zamówił krój pisma szablonowego dla odważne nagłówki magazynu i charakterystyczne cyfry.

Avaunt Stencil został zaprojektowany w 2014 roku przez londyńskie studio A2-TYPE, które od tego czasu udostępniło go na licencji. Dostępnych jest wiele czcionek szablonowych, ale znalezienie takiego, które łączy w sobie śmiałość i elegancję, może być trudne — szukasz szablonu szeryfowego hostowanego w Google Fonts? Stardos byłby dobrym wyborem dla typu rozmiaru wyświetlacza. Potrzebujesz czegoś bardziej wyjątkowego, wypróbuj Caslon Stencil z URW.

Wykorzystanie przez Avaunt siatki modułowej nie kończy się na stronie spisu treści i jest podstawą do rozpowszechniania ciekawostek z moskiewskiego Muzeum Politechniki Zimnej Wojny, które po raz pierwszy przyciągnęły mnie do magazynu. Ten rozkład wykorzystuje trzykolumnową siatkę modułową i różnej wielkości strefy przestrzenne.

To, co mnie fascynuje w tym spreadzie z czasów zimnej wojny, to sposób, w jaki moduły na stronie verso łączą się, tworząc pojedynczą kolumnę na treść tekstową. Nawet w tej kolumnie proporcje siatki modułów nadal informują o położeniu i rozmiarze elementów wewnątrz.

Podczas gdy projekt wielu stron Avaunt jest poświęcony wspaniałemu czytaniu, wiele innych przesuwa siatkę i wyciąga swoje podstawowe style typografii w różnych kierunkach. Biały tekst na ciemnym tle, rozkładówki w jasnych kolorach, w których obiekty są odcinane, aby zmieszać się z tłem. Gigantyczne inicjały, które wypełniają szerokość kolumny, oraz duże inicjały z szablonem, które dominują na stronie.

Zabawne projekty Avaunt dodają zainteresowania, a układ stron tworzy rytm, który bardzo rzadko widuję w sieci. Te różnice w projektowaniu łączy konsekwentne wykorzystanie Antwerpii — również zaprojektowanej przez A2-TYPE — jako kroju pisma dla tekstu oraz motywu czarno-biało-czerwonego, który przewija się przez cały magazyn.

Studiowanie projektu magazynu Avaunt może uczyć i inspirować. W jaki sposób siatka modułowa może pomóc w kształtowaniu treści w kreatywny sposób bez poczucia statyki. (Dowiedz się więcej o siatkach modułowych później.)

W jaki sposób dobrze zdefiniowany zestaw stylów może stać się podstawą wyróżniających i różnorodnych projektów, a wreszcie, jak tworzenie rytmu w serii stron może pomóc czytelnikom pozostać zaangażowanym.

Następnym razem, gdy będziesz mijać najbliższy sklep z czasopismami, wskocz i odbierz egzemplarz magazynu Avaunt. Chodzi o przygodę, ale założę się, że może zainspirować twoje projekty do większej przygód.

Przywitaj się z chudymi kolumnami

Przez, jak się wydaje, wieczność, w projektowaniu sieci wprowadzono bardzo niewiele innowacji. Miałem nadzieję, że wyzwania związane z responsywnym projektowaniem zaowocują kreatywnym podejściem do layoutu, ale niestety wydaje się, że jest odwrotnie.

Zamiast oryginalnych projektów siatek normą stały się jedno, dwu, trzy lub cztery blokowe układy treści. Siatki frameworków, takie jak te zawarte w Bootstrap, pozostają punktem wyjścia dla wielu projektantów, niezależnie od tego, czy używają tych frameworków, czy nie.

To prawda, że ​​jest więcej powodów, dla których tak duża część sieci wygląda tak samo, jak projektanci stron internetowych używający tej samej siatki. W końcu przez dziesięciolecia istniały podobne konwencje dla magazynów i gazet, ale jakoś magazyny nie straciły swojej osobowości, tak jak wiele stron internetowych.

Zawsze szukam inspiracji do layoutu, a magazyny są bogatym źródłem. Czytanie Avaunt przypomniało mi technikę, na którą natknąłem się lata temu, ale której nie próbowałem. Ta technika dodaje jedną bardzo wąską kolumnę do konwencjonalnej siatki kolumn. W druku ta wąska kolumna jest często określana jako „bękart lub miara” i opisuje blok treści, który nie jest zgodny z resztą siatki. (Jest to publikacja przyjazna rodzinie, nazwę ją „chudym felietonem”).

W tych pierwszych przykładach ściśnięcie obrazu w jednej kolumnie zmniejsza jego wagę wizualną i zaburza równowagę mojej kompozycji. Wypełnianie obrazu przez dwie standardowe kolumny również zaburza tę delikatną równowagę.

Dzielenie ostatniej kolumny, a następnie dodanie połowy jej szerokości do drugiej, tworzy idealną przestrzeń dla mojego obrazu i przyjemniejszy ogólny wynik.

Mógłbym użyć wąskiej kolumny, aby poinformować o szerokości elementów projektu. To logo Mini Cooper pasuje do szerokości mojej chudej kolumny, a jego rozmiar jest zrównoważony z resztą mojej kompozycji.

Czasami treść nie mieści się wygodnie w jednej kolumnie, ale łącząc szerokości standardowych i chudych kolumn, zapewniam więcej miejsca i lepszą miarę do wyświetlania tekstu. Mogę umieścić chudą kolumnę w dowolnym miejscu układu, gdziekolwiek potrzebuję moich treści.

Pusta, chuda kolumna dodaje białą przestrzeń, która pozwala oczom wędrować po projekcie. Asymetria stworzona przez umieszczenie cienkiej kolumny między dwiema standardowymi kolumnami sprawia, że ​​strukturalny układ wydaje się bardziej dynamiczny i energetyczny.

Kolejna pusta, chuda kolumna wycina w tym projekcie szeroką rynnę i ogranicza mój ciągły tekst do jednej kolumny, tak aby jej wysokość odzwierciedlała pionowy format obrazu. Mogę również użyć wąskiej kolumny, aby zmienić elementy typograficzne w ekscytujące elementy projektu.

Rozwijanie się za pomocą chudych kolumn

Projekty takie jak te są zaskakująco proste do zaimplementowania przy użyciu dzisiejszego CSS. Potrzebuję tylko czterech elementów konstrukcyjnych; logo, nagłówek, rysunek oraz artykuł zawierający mój bieżący tekst:

 <body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>

Zaczynam od projektu dla ekranów średniej wielkości, stosując siatkę CSS do elementu body w moim pierwszym zapytaniu o media. W tym rozmiarze nie potrzebuję chudej kolumny, więc zamiast tego opracowuję symetryczną siatkę z trzema kolumnami, która rozszerza się równomiernie, aby wypełnić szerokość rzutni:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

Używam numerów wierszy do umieszczania elementów w kolumnach i wierszach siatki. Umieszczam swoje logo w wąskiej pierwszej kolumnie i pierwszym wierszu, używając selektora pasującego podciągu. Dotyczy to obrazu z „logo” w dowolnym miejscu w jego wartości źródłowej:

 [src*="logo"] { grid-column: 1; grid-row: 1; }

Następnie umieszczam element nagłówka — zawierający mój nagłówek i pierwszy akapit — w drugim wierszu. Używając numerów wierszy od 1 do -1, ten nagłówek rozkłada się na wszystkie kolumny:

 header { grid-column: 1 / -1; grid-row: 2; }

Z display:grid; po zastosowaniu, wszyscy bezpośredni potomkowie kontenera siatki stają się elementami siatki, które mogę umieścić za pomocą obszarów, numerów wierszy lub nazw.

Ten projekt zawiera element postaci z dużym obrazem Mini oraz tekst podpisu dotyczący oryginalnego projektu modelu Coopera. Ta liczba jest kluczowa, ponieważ opisuje związek między img a podpisem graficznym. Jednak chociaż ta liczba sprawia, że ​​moje znaczniki są bardziej znaczące, tracę możliwość umieszczania img i figcaption za pomocą CSS Grid, ponieważ żadne z nich nie są bezpośrednimi potomkami ciała, w którym zdefiniowałem moją siatkę.

Na szczęście istnieje właściwość CSS, która — jeśli zostanie użyta rozważnie — może rozwiązać ten problem. Nie muszę stylizować figury, wystarczy, że stylizuję jej zdjęcie i podpis. Stosując display:contents; do mojej sylwetki skutecznie usuwam go z DOM w celach stylizacyjnych, więc jego potomkowie zajmują jego miejsce:

 figure { display: contents; }

Warto zauważyć, że chociaż wyświetlanie skutecznie usuwa moją figurę z DOM dla celów stylizacji, wszelkie właściwości, które dziedziczą — w tym rozmiary i style czcionek — są nadal dziedziczone:

 figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }

Umieszczam artykuł i stylizuję jego tekst w trzech kolumnach, używając układu wielokolumnowego, jednej z moich ulubionych właściwości CSS:

 article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Czas na zaimplementowanie projektu, który zawiera wąską kolumnę dla większych ekranów. Używam zapytania o media, aby wyizolować te nowe style, a następnie tworzę pięciokolumnową siatkę, która zaczyna się od wąskiej kolumny o szerokości 1 fr:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr repeat(4, 2fr); } } 

Następnie dodaję wartości, aby zmienić położenie nagłówka, img i figcaption oraz artykułu, pamiętając o zresetowaniu liczby kolumn, aby pasowała do nowej szerokości:

 header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }

Radykalna zmiana wyglądu projektu przy użyciu samego CSS, bez wprowadzania zmian w strukturze HTML, sprawia, że ​​uśmiecham się nawet po prawie dwóch dekadach. Uśmiecham się również, gdy zmieniam kompozycję, aby stworzyć dramatycznie inny układ bez zmiany siatki. W przypadku tego alternatywnego projektu dążę do bardziej uporządkowanego wyglądu.

Aby poprawić czytelność mojego biegnącego tekstu, dzielę się na trzy kolumny. Następnie, aby oddzielić ten blok treści od innych elementów tekstowych, umieszczam moją chudą kolumnę między pierwszymi dwiema standardowymi kolumnami. Nie ma potrzeby zmieniania struktury mojego kodu HTML. Wszystko, czego potrzebuję, to drobne zmiany wartości siatki w moim arkuszu stylów. Tym razem moja szeroka, chuda kolumna 1fr mieści się między dwiema standardowymi szerokościami kolumn:

 @media screen and (min-width : 64em) { body { grid-template-columns: 2fr 1fr 2fr 2fr 2fr; } }

Umieszczam mój nagłówek w drugim rzędzie, a artykuł w rzędzie bezpośrednio pod nim:

 header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Ponieważ ani img, ani figcaption nie są bezpośrednimi potomkami elementu body, w którym zdefiniowałem swoją siatkę, do ich umieszczenia potrzebuję display:contents; własność ponownie:

 figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }

W zależności od tego, jak ich używasz, wprowadzenie chudych kolumn do projektów może sprawić, że treść będzie bardziej czytelna lub przekształcić statyczny układ w taki, który będzie dynamiczny i energetyczny.

Chude kolumny to tylko jeden z przykładów uczenia się techniki z druku i używania jej do ulepszania projektu internetowego. Bardzo chciałem wypróbować chude kolumny i nie zawiodłem się.

Dodanie cienkiej kolumny do swoich projektów często może być inspirującą decyzją. Zapewnia dodatkową elastyczność i może przekształcić statyczny układ w taki, który jest wypełniony energią.

Projektowanie siatek modułowych

Magazyn Avaunt zawiera mnóstwo inspirujących layoutów, ale chcę skupić się w szczególności na dwóch stronach. Ten rozkładówka zawiera obiekty „projektu z czasów zimnej wojny” w ramach projektu, który można zastosować do szerokiej gamy typów treści.

Na pierwszy rzut oka siatki modułowe mogą wyglądać na skomplikowane, jednak są łatwe w obsłudze. Dziwi mnie, że korzysta z nich tak niewielu projektantów stron internetowych. Chcę to zmienić.

Jeśli rozważnie używasz siatek modułowych, mogą one napełnić Twoje projekty energią. Doskonale nadają się do porządkowania dużej ilości zróżnicowanej zawartości, ale mogą również tworzyć atrakcyjne wizualnie układy, gdy jest ich bardzo mało.

W tym projekcie — inspirowanym Avaunt — moją siatkę modułową opieram na sześciu symetrycznych kolumnach i czterech równomiernie rozmieszczonych rzędach. Moduły siatki definiują rozmieszczenie i rozmiar moich treści.

Łączę ze sobą kilka modułów, aby utworzyć strefy przestrzenne dla dużych obrazów i tekstu w jednej kolumnie po lewej stronie. Linie graniczne pomagają podkreślić wizualną strukturę strony.

Ten typ układu może początkowo wydawać się skomplikowany, ale w rzeczywistości jest pięknie prosty do wdrożenia. Zamiast opierać swoje adiustacje na szacie graficznej, zaczynam od najodpowiedniejszych elementów do opisu treści. W przeszłości używałbym elementów tabeli do implementacji siatek modułowych. Kilka lat później podziały zastąpiły te komórki tabeli. Niewiarygodne, teraz potrzebuję tylko dwóch strukturalnych elementów HTML, aby wykonać ten projekt; jeden artykuł, po którym następuje uporządkowana lista:

 <body> <article>…</article> <ol>…</ol> </body>

Ten artykuł zawiera nagłówek, akapity i tabelę zawierającą informacje tabelaryczne:

 <article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>

Modułowa siatka planów Mini jest najbardziej skomplikowanym wizualnym aspektem mojego projektu, ale opis, który ją opisuje, jest prosty. Plany są uporządkowane według dat, więc uporządkowana lista wydaje się najbardziej odpowiednim elementem HTML:

 <ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>

Mój kod HTML waży tylko 2 KB i ma mniej niż sześćdziesiąt wierszy. Dobrym pomysłem jest zweryfikowanie tego znacznika, ponieważ trochę czasu spędzonego na wczesnej walidacji zaoszczędzi dużo więcej czasu na późniejszym debugowaniu CSS. Otwieram również stronę bez stylu w przeglądarce, ponieważ zawsze muszę mieć pewność, że moja treść jest dostępna bez arkusza stylów.

Rozpoczynam opracowywanie symetrycznego, trzykolumnowego układu dla ekranów średniej wielkości, wyodrębniając style siatki za pomocą zapytania o media:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

Artykuł i uporządkowana lista są jedynymi bezpośrednimi potomkami ciała, ale to właśnie one zawierają, które chcę umieścić jako elementy siatki. Używam display:contents; aby umożliwić mi umieszczenie ich zawartości w dowolnym miejscu w mojej siatce:

 article, ol { display: contents; }

Każdy element mojego artykułu powinien obejmować wszystkie trzy kolumny, więc umieszczam je za pomocą numerów wierszy, zaczynając od pierwszego wiersza (1) i kończąc na ostatnim wierszu (-1):

 .standfirst, section, table { grid-column: 1 / -1; }

Pozycje z mojej uporządkowanej listy są równomiernie rozmieszczone w trzykolumnowej siatce. Jednak mój projekt wymaga, aby niektóre elementy obejmowały dwie kolumny, a jeden dwa rzędy. Selektory typu nth-of-type są idealnymi narzędziami do kierowania elementów bez uciekania się do dodawania klas do moich znaczników. Używam ich, słowa kluczowego span i liczby kolumn lub wierszy, które mają obejmować elementy:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 

Przeglądając mój projekt w przeglądarce, widzę, że nie wygląda dokładnie tak, jak planowałem, ponieważ niektóre moduły siatki są puste. Domyślnie normalny przepływ dowolnego dokumentu układa elementy od lewej do prawej iz góry na dół, tak jak w przypadku języków zachodnich. Gdy elementy nie mieszczą się w przestrzeni dostępnej w siatce, algorytm umieszczania siatki CSS pozostawia spacje puste i umieszcza elementy w następnym wierszu.

Mogę nadpisać domyślną wartość algorytmu, stosując właściwość grid-auto-flow i wartość gęstą do mojego kontenera siatki, w tym przypadku do ciała:

 body { grid-auto-flow: dense; }

Wiersz to domyślna wartość automatycznego przepływu siatki, ale możesz także wybrać kolumnę, gęstość kolumn i gęstość wierszy. Mądrze używaj grid-auto-flow, ponieważ przeglądarka wypełnia każdy pusty moduł kolejnym elementem w przepływie dokumentu, który może zmieścić się w tej przestrzeni. To zachowanie zmienia porządek wizualny bez zmiany źródła, co może mieć wpływ na dostępność.

Mój średniej wielkości projekt wygląda teraz tak, jak planowałem, więc nadszedł czas, aby dostosować go do większych ekranów. Muszę wprowadzić tylko niewielkie zmiany w stylach siatki, aby najpierw zmienić mój artykuł w pasek boczny — który obejmuje całą wysokość mojego układu — a następnie umieścić określone elementy listy w modułach na większej siatce z sześcioma kolumnami:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }

Śledzenie linii rozmieszczenia siatki może czasem być trudne, ale na szczęście CSS Grid oferuje więcej niż jeden sposób na zrealizowanie modularnego projektu siatki. Korzystanie z obszarów szablonów siatki jest podejściem alternatywnym i wydaje mi się, że nie poświęca się temu wystarczająco dużo uwagi.

Korzystając z obszarów szablonów siatki, najpierw definiuję każdy moduł, nadając mu nazwę, a następnie umieszczam elementy w jednym module lub kilku sąsiednich modułach, zwanych strefami przestrzennymi. Ten proces może wydawać się skomplikowany, ale w rzeczywistości jest to jeden z najłatwiejszych i najbardziej oczywistych sposobów korzystania z CSS Grid.

Nadaję każdemu elementowi wartość obszaru siatki, aby umieścić go w mojej siatce, zaczynając od logo i artykułu:

 [src*="logo"] { grid-area: logo; } article { grid-area: article; }

Następnie przypisuję obszar siatki do każdego elementu mojej listy. Wybrałem prostą wartość i+n, ale mogłem wybrać dowolną wartość, w tym słowa, a nawet litery, takie jak a, b, c lub d.

 li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }

Moja siatka ma sześć jawnych kolumn i cztery niejawne wiersze, których wysokość jest definiowana przez wysokość zawartej w nich zawartości. Rysuję siatkę w CSS za pomocą właściwości grid-template-areas, gdzie każda kropka (.) reprezentuje moduł siatki:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }

Następnie umieszczam elementy w tej siatce, korzystając z wartości obszaru siatki, które zdefiniowałem wcześniej. Jeśli powtórzę wartości w wielu sąsiednich modułach — w kolumnach lub wierszach — ten element rozszerzy się, tworząc strefę przestrzenną. Pozostawienie kropki (.) tworzy pusty moduł:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }

W każdym dotychczasowym przykładzie wyizolowałem style układu dla różnych rozmiarów ekranu za pomocą punktów przerwania zapytań o media. Ta technika stała się standardowym sposobem radzenia sobie ze złożonością responsywnego projektowania stron internetowych. Istnieje jednak technika tworzenia responsywnych siatek modułowych bez użycia zapytań o media. Ta technika wykorzystuje zdolność przeglądarki do ponownego przepływu zawartości.

Zanim przejdziemy dalej, warto pamiętać, że mój projekt wymaga tylko dwóch strukturalnych elementów HTML; jedna uporządkowana lista zawartości i artykuł, który przekształcam w pasek boczny, gdy dostępna jest wystarczająca szerokość, aby oba elementy mogły stać obok siebie. Gdy szerokość jest niewystarczająca, te elementy układają się pionowo w kolejności zawartości:

 <body> <article>…</article> <ol>…</ol> </body>

Uporządkowana lista stanowi najważniejszą część mojego projektu i powinna zawsze zajmować minimum 60% szerokości okna. Aby się upewnić, że tak się stanie, używam deklaracji minimalnej szerokości:

 ol { min-width: 60%; }

Chociaż zwykle zalecam używanie CSS Grid do ogólnego układu strony i Flexbox do elastycznych komponentów, aby zaimplementować ten projekt, stawiam tę radę na głowie.

Przekształcam element body w elastyczny kontener, a następnie upewniam się, że artykuł rośnie, aby wypełnić całą poziomą przestrzeń, używając właściwości flex-grow o wartości 1:

 body { display: flex; } article { flex-grow: 1; }

Aby upewnić się, że moja uporządkowana lista zajmuje również całą dostępną przestrzeń, gdy te dwa elementy stoją obok siebie, przypisuję jej absurdalnie wysoką wartość flex-grow 999:

 article { flex-grow: 999; }

Korzystanie z flex-base zapewnia idealną szerokość początkową artykułu. Ustawiając opakowanie kontenera elastycznego na zawijanie, upewniam się, że dwa elementy stosują się po osiągnięciu minimalnej szerokości listy i nie ma wystarczającej ilości miejsca, aby mogły stać obok siebie:

 body { flex-wrap: wrap; } article { flex-basis: 20rem; }

Chcę stworzyć elastyczną siatkę modułową, która pozwoli na dowolną liczbę modułów. Zamiast określać liczbę kolumn lub wierszy, użycie powtarzania pozwala przeglądarce utworzyć tyle modułów, ile potrzebuje. autouzupełnianie wypełnia całą dostępną przestrzeń, w razie potrzeby zawijając zawartość. minmax daje każdemu modułowi minimalną i maksymalną szerokość, w tym przypadku 10rem i 1fr:

 ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }

Aby uniknąć pozostawania pustych modułów, ponownie używam grid-auto-flow z wartością gęstą. Algorytm przeglądarki zmieni układ mojej zawartości, aby wypełnić puste moduły:

 ol { grid-auto-flow: dense; }

Tak jak poprzednio, niektóre elementy listy obejmują dwie kolumny, a jeden obejmuje dwa wiersze. Ponownie używam selektorów n-tego typu do kierowania na określone elementy listy, a następnie kolumnę siatki lub wiersz siatki ze słowem kluczowym span, po którym następuje liczba kolumn lub wierszy, które chcę rozciągnąć:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }

Ten prosty CSS tworzy responsywny projekt, który dostosowuje się do środowiska bez potrzeby wielu zapytań o media lub oddzielnych zestawów stylów.

Korzystając z nowoczesnego CSS, w tym Grid i Flexbox, polegając na zdolności przeglądarek do ponownego przepływu treści oraz kilku inteligentnych wyborach dotyczących minimalnych i maksymalnych rozmiarów, podejście to jest najbliższe osiągnięciu celów prawdziwie responsywnej sieci.

Czytaj więcej z serii

1. Inspirowane decyzje projektowe: Avaunt Magazine
2. Inspirowane decyzje projektowe: Prasa ma znaczenie
3. Inspirowane decyzje projektowe: Ernest Journal
4. Inspirowane decyzje projektowe: Alexey Brodovitch
5. Inspirowane decyzje projektowe: Bea Feitler
6. Inspirowane decyzje projektowe: Neville Brody
7. Inspirowane decyzje projektowe: Otto Storch
8. Inspirowane decyzje projektowe: Herb Lubalin
9. Inspirowane decyzje projektowe: Max Huber
10. Inspirowane decyzje projektowe: Giovanni Pintori
11. Inspirowane decyzje projektowe: Emmett McBain
12. Inspirowane decyzje projektowe: Bradbury Thompson

NB: Członkowie Smashing Członkowie Smashing mają dostęp do pięknie zaprojektowanego PDF magazynu Andy's Inspired Design Decisions oraz pełnych przykładów kodu z tego artykułu. Możesz kupić plik PDF tego wydania i przykłady, a także każdy inny numer bezpośrednio ze strony internetowej Andy'ego.