CSS Izgara Şablon Alanları ile Web İçin Sanat Yönetmenliği

( Bu makale CoffeeCup Software tarafından desteklenmektedir .) Pekala, doğrudan konuya gireceğim. CSS Izgarası önemlidir, gerçekten önemlidir, "Bütün tarayıcılar desteklediğinde kullanacağım" özelliklerinden biri olamayacak kadar önemlidir. Bunun nedeni, CSS Grid ile artık erişilebilirlik, yanıt verebilirlik veya kullanılabilirlikten ödün vermeden baskıda olabildiğince web'deki mizanpaj konusunda yaratıcı olabiliriz.

Web tasarımı veya geliştirme konusunda ciddiyseniz, CSS Izgarasını öğrenme ve kullanma konusunda da ciddi olmalısınız. Bu yazıda bir yönün nasıl kullanılacağını, grid-template alanlarının nasıl kullanılacağını, benim gibi büyük, aptal bir kupanın bile anlayabileceği ve yeterince dikkat çekmeyen öğeleri düzenlemenin bir yolunu açıklayacağım.

Şimdi, biraz aksiyon ve biraz kod görmek istiyorsunuz, bunu biliyorum, ama bir dakika bekleyin. Sen "nasıl"ı öğrenmeden önce, sana "neden"i öğretmek istiyorum, diğer medyalarda onlarca yıldır gördüğümüz, ancak çoğunlukla web'de bulunmayan türden mizanpajlar yapmak önemlidir.

sinirli hissetmek

Sanırım "bu iki düzenden hangisini bugün tasarlıyorsunuz?" tweetler, web'deki mevcut tasarım durumuna ağıt yakıyor. Ben bile web tasarımının "ruhunu" nasıl kaybettiğinden bahsetmiştim. Bahse girerim, insanların dergilerden posterler veya sayfalar oluşturmak için CSS Izgarası kullandığını da görmüşsünüzdür. Bu teknik gösteriler harika ve CSS Grid ile karmaşık mizanpajların diğer yöntemlerle karşılaştırıldığında ne kadar kolay uygulanabileceğini gösteriyorlar, ancak bu şeyleri yapmanın neden önemli olduğunun dibine inmiyorlar.

Peki nedeni nedir? Düzen neden tasarımın bu kadar önemli bir parçası? Her şey tek bir şeye bağlı, o da iletişim.

Sonsuza dek gibi görünen bir süre boyunca, web tasarımcıları şablonlar oluşturdular, ardından içerik ve düzen arasındaki ilişkiyi çok az dikkate alarak onları doldurdular. İçerik yönetim sistemleri, tasarımları duyarlı hale getirme ihtiyacımız ve şimdiye kadar kullandığımız CSS özelliklerinin sınırlamaları göz önüne alındığında, bunun kaçınılmaz olduğunu düşünüyorum. Elbette, esnek, kullanılabilir tasarımlar yaptık, ancak bulmacanın önemli bir parçasını, mizanpajın bir mesaj iletmede oynadığı rolü kaçırdık.

Birkaç kez çevrenizde bulunduysanız, bir tasarım için doğru tonu ayarlamada rengin oynadığı rolü bilirsiniz. Bu tipin de rol oynadığını söylememe gerek yok. Yanlış yazı tipini seçerseniz, etkisiz iletişim kurma ve insanları istediğiniz gibi hissetme riskiyle karşı karşıya kalırsınız.

Düzen - 'ölçü' gibi tipografi yönleriyle yakından bağlantılı - eşit derecede önemli bir rol oynar. Simetri ve asimetri, uyum ve gerilim. Bu ilkeler insanları içeriğinize çeker, onlara rehberlik eder ve içeriğinizi daha kolay anlamalarına yardımcı olur. Bu nedenle doğru düzeni oluşturmak, en uygun yazı tipini seçmek kadar önemlidir. Baskı tasarımcıları bunu yıllardır biliyorlar.

Sanat Yönetmenliği Yoluyla Hikayeler Anlatmak

Sanat yönetimi, basılı medya da dahil olmak üzere diğer medyada olduğu kadar Web'de de önemlidir ve anlatacağım şey, hikaye anlatmak kadar dijital ürünleri tanıtmak için de geçerlidir.

'Sanat yönetimi' terimini duyduğunuzda aklınıza ne geliyor? HTML'deki <picture> öğesini veya 'boyutları' kullanarak çeşitli ekran boyutlarına alternatif kırpmalar, boyutlar veya yönler sunan duyarlı görüntüler hakkında mı düşünüyorsunuz? Kullanışlı duyarlı tasarım ve sanat yönetimi araçları haline geldiler, ancak web tasarımında araçlardan daha fazlası var.

Jason Santa Maria ve Trent Walton gibi, bazen bir girdiye kendi ayırt edici görüntüsünü, düzenini ve tipografisini vererek yazılarını yöneten tasarımcıları düşünüyor musunuz? Bu bizi sanat yönetimini anlamaya daha da yaklaştırıyor, ancak görüntüler, düzen ve tipografi, sanat yönetiminin anlamı değil, yalnızca sonucudur.

Peki sanat yönetmenliği tam olarak bunlar değilse, tam olarak nedir? Bir cümleyle, bir içerik parçasından temel, kesin bir anlam veya amaç çıkarma sanatıdır - bu dergi makalesi veya en yeni başlangıçtan en havalı uygulamayı kullanma nedenlerinin bir listesi olabilir - ve bu anlamı veya amacı iletme sanatıdır. tasarım kullanarak daha iyi. Web'de sanat yönetmenliği hakkında pek bir şey duymuyoruz, ancak başka bir mecrada, belki de en akılda kalanları dergiler ve bir dereceye kadar gazetelerde iyi yerleşmiş durumda.

Alexey Brodovitch'in 1934'ten 1958'e kadar Harpers Bazaar dergisindeki çalışmalarını ilk elden hatırlayacak kadar yaşlı değilim.

Neville Brody'nin Face dergisi için yaptığı sanat yönetmenliğini hatırlıyorum ve hâlâ her gün ondan ilham alıyorum.

Sanat yönetmenliği, web ile ilgili olarak o kadar nadiren tartışılır ki, alakasız olduğunu düşündüğünüz için affedilebilirsiniz. Belki de sanat yönetmenliğini web'den çok baskı dünyasına uygun bir etkinlik olarak görüyorsunuz? Bazı insanlar sanat yönetmenliğini bir şekilde elitist olarak düşünebilir.

Bunların hiçbirinin doğru olduğunu düşünmüyorum. Hikayeler, nerede veya hangi araçla anlatıldığı önemli değil, hikayelerdir. ProPublica'da yayınlananlar gibi düşündürücü olabilir veya şirketinizin ve insanların neden sizinle iş yapması gerektiğinin hikayesi olabilir. Hayır derneğinizin iyi bir amacı nasıl desteklediğinin ve insanların neden ona bağış yapması gerektiğinin hikayesi var. Ardından, girişiminizin yeni uygulamasının hikayesi ve neden birisinin onu indirmesi gerektiği var. Tüm bu hikayelerde, yaptığınız veya sattığınız şeylerle ilgili gerçekleri anlatmanın ötesinde daha derin bir mesaj var.

Sanat yönetmenliği, bu mesajları anlamak ve sözcüklerin ve görsellerin organizasyonu ve sunumu yoluyla en iyi nasıl iletileceğine karar vermekle ilgilidir. Sanat yönetimi web için uygun mu? Elbette. Sanat yönetmenleri, insanların bir içeriğin önemini daha iyi anlamalarına yardımcı olmak için tasarımı kullanır ve bu, web'de basılı olduğu kadar önemlidir. Aslında sanat yönetmenliğinin temel ilkeleri basılı ve dijital arasında değişmedi.

Bir hikayenin anlamının cihazlar ve ekran boyutları arasındaki boşluklarda kaybolmaması için sanat yönetmenliğinin birden fazla kanalda uyumlu deneyimler yaratmak için gerekli olduğunu söyleyerek daha da ileri gideceğim.

Eskiden The Guardian ve New Statesman'dan ve diğer birçok yayının tasarımcısı olan David Hillman şunları söyledi:

"En iyi biçimiyle (sanat yönetimi), sanat yönetmeninin derginin ne söylediğine dair tam ve derinlemesine bir anlayışa sahip olmasını ve tasarım yoluyla onun nasıl söylendiğini etkilemesini içerir."

Tesadüfen The Guardian'ın eski Kreatif Direktörü arkadaşım Mark Porter da şunları söyledi:

"Tasarım, uzaydaki öğelerin dağılımından sorumlu olmaktır."

CSS Grid, öğelerin dağıtımından sorumlu olmayı hiç olmadığı kadar mümkün kılıyor.

Sert Bir Hikayeyi Yöneten Sanat

Sanırım şimdi konuya girmenin zamanı geldi, bu yüzden size bunlardan bazılarını bir dizi Haşlanmış örnekte nasıl çalıştıracağınızı anlatacağım. Mizanpaj ve bunun hikaye anlatımına nasıl yardımcı olduğu konusunda bir el feneri yakacağım ve ardından CSS Grid kullanarak bu tasarımlardan birini nasıl geliştirebileceğinizi anlatacağım.

İlk olarak, arka plan. Hardboiled Web Design'ın (1) 2010 basımının kapağında, kırmızı elbiseli gizemli bir kadın (her zaman kırmızı elbiseli bir kadın vardır) özel sikimize silah doğrultuyor. (Sheesh, bu hissi biliyorum.) 2015'teki Beşinci Yıl Dönümü Baskısıyla (2), hikaye ilerledi ve dedektif ofisimizin kapısında uğursuz bir gölge hareket etti. Kapı hızla açılır, iki kötü adam içeri girer (3) ve yumruklu bir dövüş başlar (4). Gizemli kadınımız kesinlikle yumruk atmayı biliyor ve sen "öp beni, ölümcül" demeden önce bir kötü adam bir sandalyeye bağlı ve fasulyeleri dökmeye hazır (5).

Üçüncü bölüm

Bu hikayeyi, o iki kötü adamın kapıyı kırıp açtığı patlama anında anlatmaya başlayacağım. Şimdi, Scott McCloud'un 'Çizgi Romanları Anlamak' kitabını okuduysanız, panel boyutunun insanların bir alana bakmak için ne kadar zaman harcadıklarını etkilediğini bilirsiniz, bu yüzden etkisini en üst düzeye çıkarmak için kötü adamlarımızın görüntüsünü mümkün olduğunca büyük yapmak istiyorum. (1). Davlumbazların bilmediği şey, kadınımızın onları beklediği. Göz çizgilerini birleştirerek gerilim eklemek için mizanpaj kullanıyorum, (2) aynı zamanda okuyucunun gözlerini içeriğin başladığı yere çekiyorum.

Bölüm dört

İlk kötü adam sahneye çıktığında, açık kapıyı (1) temsil etmek için sayfanın sol kenarını kenar boşlukları olmadan kullanıyorum. Eylemin çoğu sağda gerçekleştiğinden, sayfanın yüksekliğinin ve genişliğinin çoğunu kullanarak geniş bir boşluk alanı oluşturuyorum (2).

Şimdi, yumruklar her yöne uçtuğunda, mizanpajımızın da aynısını yapması gerekiyor, bu yüzden içeriğim yukarıdan geliyor - beyaz boşluğun gözü kalın paragrafa (3) çektiği yer - ve muazzam başlığın (4) olduğu soldan . Sağ üstteki küçük resimden neden bahsetmediğimi merak ediyor olabilirsiniz, ama buna birazdan geleceğim.

Beşinci Bölüm

Dövüş bitti ve dedektifimiz kontrol tekrarda, bu yüzden bu son sayfada, geri verilen düzeni yansıtmak için daha yapılandırılmış bir düzen kullanıyorum. Etraflarında bol miktarda boşluk bulunan düz metin (1) sütunları, sakinlik hissine katkıda bulunur. Aynı zamanda, sağa hizalanmış resim yazısı (2), gerçekleşen silah zoruyla sorgulama gibi, sinirli ve rahatsız edici geliyor.

Dands Kirlenmek

Bir itiraf zamanı. CSS Grid kullanarak mizanpaj geliştirme hakkında bilmeniz gereken her şeyi size öğretmeyeceğim, çünkü bunu daha önce yapmış çok sayıda akıllı insan var:

• Rachel Andrew tarafından Örneğe Göre Izgara
• Wes Bos ile CSS Izgarasını Öğrenin
• Chris House'dan CSS Püf Noktaları Üzerine Eksiksiz Bir Kılavuz Kılavuzu

Bunun yerine, size bir ızgaranın ilhamını, CSS Izgarasında sütunları ve satırları kullanarak (geniş ekran) bir düzene nasıl çevirdiğimi ve ardından ızgara-şablon alanları özelliği kullanılarak oluşturulan boşluk bölgelerine öğeleri nasıl yerleştirdiğimi göstereceğim. Son olarak, daha küçük ekran boyutları için tasarımı bozup değiştireceğim.

Mükemmel Beat

Kullandığım düzen için ilham kaynağım Neville Brody'nin The Face Magazine için hazırladığı bu 1983 tasarımından geldi. Brody'nin hem yatay hem de dikey ekseni ve ana görüntünün kapladığı geniş alanı nasıl akıllıca yarattığına ilgi duydum.

Aynısını, sayfamın kenar boşluksuz <body> öğesine, bir kesir birim genişliğindeki sütunların aralarında 2vw boşluk olacak şekilde beş kez tekrarlandığı aşağıdaki CSS Izgara özelliklerini uygulayarak yaptım:

 body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 

CSS Grid'de bir grid modülünü ona bir isim vererek tanımlarız, ardından grid-template-areas özelliği ile bir elementi tek bir modüle ya da uzaysal bölgeler olarak bilinen çoklu bitişik modüllere yerleştiririz. Kulağa karmaşık geliyor ha? Hayır gerçek değil. CSS Grid'i kullanmanın en kolay ve en belirgin yollarından biridir, o yüzden işe koyulalım.

Her şey sırayla. Konumlandırmam gereken beş öğe var ve bunlar benim "Öp Beni Ölümcül" başlığım, en büyük 'banner' görseli, ana içerik, bir kenara paragraf ve iki görsel, fig-1 ve fig-2. HTML'im şuna benziyor:

 <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

Bu işaretlemeyi, tıpkı bir anlatı oluştururken yaptığım gibi, en anlamlı olan sırayla yazdım. Küçük ekranlarda ve hatta stilleri olmadan bir rüya gibi okunur. Her öğeye, bir anda onu ızgarama yerleştirmek için kullanacağım bir ızgara alanı değeri veriyorum:

 [role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }

Izgara alanı değerlerinizin, öğe türlerinizi yansıtması gerekmez. Aslında, herhangi bir değeri, hatta a, b, c veya d gibi tek harfleri bile kullanabilirsiniz.

Izgaraya geri döndüğümde, daha önce oluşturduğum sütunlara üç satır ekliyorum. Her satırın yüksekliği, içindeki içeriğin yüksekliğine göre otomatik olarak tanımlanır:

 body { grid-template-rows: repeat(3, auto); }

İşte sihrin gerçekleştiği yer. Her noktanın (.) bir boş modülü temsil ettiği grid-template-areas özelliğini kullanarak CSS'de ızgarayı kelimenin tam anlamıyla çiziyorum:

 body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }

Şimdi, daha önce oluşturduğum ızgara alanı değerlerini kullanarak öğeleri bu ızgarada konumlandırmanın zamanı geldi. Her öğenin değerini ızgaradaki bir modüle yerleştiriyorum ve bu değeri birden çok bitişik modülde tekrarlarsam - ya sütunlar ya da satırlar boyunca, o öğe bir uzay alanı oluşturmak için bunların arasında genişleyecektir. Nokta (.) bırakmak boş bir alan yaratacaktır:

 body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }

CSS düzenini bitirmeden önce bir küçük ayrıntı daha. Kenar öğesinin içeriğinin altta oturmasını istiyorum - başlığa yakın ve birinin gözünü aşağı çekmek için üzerinde yeterli boşluk bırakarak - bu yüzden Flexbox'ı öğrenmekten aşina olabilecek bir align-self özelliği kullanıyorum, ancak 'end'in yeni değeri.

 aside { align-self: end; } 

Geriye kalan tek şey, çarpıcı bir ters renk şeması ve başlıktaki "Ölümcül" kelimesini kadın elbisemizin rengine bağlayan parlak, kırmızı bir vurgu da dahil olmak üzere tasarımı hayata geçirmek için birkaç stil eklemek:

 <h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }

Dumana Çıkmak

Şimdi, o daha küçük dövüş imajını merak ettiğini biliyorum ve bir şeyi itiraf etmeliyim. Natalie Smith, Hardboiled Shot kapaklarım için yalnızca bir tane bitmiş yumruk uçan illüstrasyon yaptı, ancak eskizleri boşa harcanmayacak kadar iyiydi. Bir kurşun kalem çiziminin ters çevrilmiş bir versiyonunu tabancanın üzerine yerleştirmek için CSS Izgarasını kullandım ve bir duman bulutu oluşturmak için bir CSS dönüşümü ile döndürdüm.

yıkmak

Bu makalede, büyük ekranlar için nasıl bir düzen oluşturulacağını gösterdim, ancak gerçekte, küçük bir tane ile başlıyorum ve sonra stil eklemek veya değiştirmek için kesme noktaları kullanarak çalışıyorum. CSS Izgarası ile, bir düzeni çeşitli ekran boyutlarına uyarlamak, öğeleri farklı ızgara şablonu alanlarına konumlandırmak kadar kolaydır. Bunu yapabilmemin iki yolu var, ilk önce ızgaranın kendisini değiştirerek:

 body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }

İkincisi, öğeleri aynı ızgara üzerinde farklı ızgara şablonu alanlarına yerleştirerek:

 body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 

CSS Izgara Oluşturucuyu Kullanma

Izgara şablon alanları, sanata yönelik düzenler geliştirmeyi o kadar kolay hale getirir ki benim gibi düz bir ayak bile yapabilir, ancak kirli işleri yapmak için araçları seven biriyseniz, CoffeeCup Software'den CSS Grid Builder tam size göre olabilir. sen. WYSIWYG editörlerini daha önce kullanmış olabilirsiniz, bu yüzden tükürdükleri kodun ne kadar kötü olduğunu hatırlıyor olabilirsiniz. Dur seni orada durdurayım. CSS Grid Builder, temiz CSS ve erişilebilir işaretleme çıktıları verir. Belki kendi yazdığınız kadar temiz değil, ama oldukça yakın ve onu geliştiren küçük ekip onu daha da iyi hale getirmeyi planlıyor. El yazısı HTML'im şuna benziyor:

 <picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>

CSS Grid Builder <picture> öğesi, iyi bir ölçüm için eklenmiş birkaç öğeyle birlikte fazladan bir bölüme sarılmış olarak gelir:

 <div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>

Dediğim gibi, yeterince yakın ve bana inanmıyorsanız, Hardboiled örneğimden bir dizi dışa aktarılmış dosya indirin. Belki bu seni ikna eder.

Tarayıcıların geliştirici araçları, ızgaraları denetlemede giderek daha iyi hale geliyor, ancak CSS Grid Builder, ızgaraları oluşturmanıza yardımcı oluyor. Açıkça. Özünde, CSS Grid Builder, bir kullanıcı arayüzüne sarılmış Chromium tabanlı bir tarayıcıdır ve macOS ve Windows üzerinde çalışır. Bu, tarayıcı onu oluşturabiliyorsa, UI araçlarının, CSS Şekilleri dahil olmak üzere bir veya iki dikkate değer istisna dışında yazabileceği anlamına gelir.

Aslında, CSS Grid Builder ızgaralardan daha fazlasını oluşturur ve bunu arka planlar için stiller oluşturmak için kullanabilirsiniz - çok kullanışlı olan degradeler dahil - kenarlıklar ve tipografi . Hatta Flexbox ve çok sütunlu mizanpajları bile yönetir, ancak buradasınız çünkü CSS Izgarası hakkında bilgi edinmek istiyorsunuz.

Arayüze Bakmak

CSS Grid Builder'daki arayüz, solda yaptığınız tasarım için geniş bir alan ve sağda kontroller ile beklediğiniz gibi. Bu kontroller ortak unsurları içerir; metin, resimler, etkileşimli düğmeler ve form denetimleri ve düzen kapsayıcıları. Bu öğelerden birine ihtiyacınız varsa, onu çalışma alanınıza sürükleyip bırakın.

Stiller sekmesini ortaya çıkarmak için basın; sınıf ve kimlik niteliklerini adlandırmak, stilleri belirli kesme noktalarında ve belirli durumlarda uygulamak için kontroller bulacaksınız. Hepsi çok kullanışlı, ancak bu, yerleşim bölümü - biraz uygunsuz bir şekilde bölmenin altına sıkışmış - en ilginç olanı.

Bu bölümde bir ızgara tasarlayabilirsiniz. Görsel temsili olmayan bir düzen oluşturmak için sütunları ve satırları ayarlamak, 'ızgara'nın nasıl çalıştığını öğrenmenin en zor kısımlarından biri olabilir. Uygulamanın ızgara yapısını görsel olarak tanımlama yeteneği, özellikle CSS Grid'de yeniyseniz kullanışlı bir özelliktir. Anlatacağım bölüm bu.

CSS Grid Builder'ı kullanarak bir kapsayıcı bölümü ekledim. Bunu çalışma alanında seçerken, Grid Editor'a erişiyorum. Bunu etkinleştirin ve görsel olarak bir ızgara oluşturmak için gereken tüm araçlar orada:

• Sütunlar ve satırlar ekleyin
• Her modüldeki içeriği ve öğeleri hizalayın ve yaslayın
• Sütunları ve satırları fr ve minmax dahil her tür birimi kullanarak boyutlandırın
• Boşlukları belirtin
• Kılavuz şablon alanlarını adlandırın
• Kesme noktalarını belirtin

Bu ayarlardan memnun kaldığımda, değişiklikler "Tamam" ve çalışma alanındaki tasarıma uygulanır. Orada, sonuçları çeşitli kesme noktalarında önizlemek için kaydırıcıları kullanın ve yetersiz tarayıcı kullanan kişilerin yüzdesinin azalmasından endişe duyan insanlardan biriyseniz, CSS Grid Builder ayrıca geri dönüşleri hesaplayabileceğiniz ayarlar sunar. Ardından, CSS stillerini projenizde başka bir yere kopyalayıp yapıştırın veya tüm kiti ve caboodle'ı dışa aktarın.

CoffeeCup geliştirirken CSS Grid Builder şu anda ücretsizdir ve yaptıklarını beğenirseniz, gelişimini finanse etmek için birkaç dolar harcayabilirsiniz.

Temizlemek

CSS Grid hakkındaki heyecanımı zapt etmekte zorlanıyorum. Evet, daha fazla dışarı çıkmam gerektiğini biliyorum, ancak yarattığımız web sitelerini hedef kitlemize iletmeyi hedeflediğimiz şeyi daha iyi iletme konusunda bize diğer medyalardan ders alma konusunda en iyi şansı sunduğunu düşünüyorum. Daha fazla satış yapmak isteyen işletmeler için web siteleri, iyi amaçlara bağışlar yoluyla daha fazla para toplaması gereken hayır kurumları veya daha etkili hikayeler anlatmak isteyen haber kuruluşları için web siteleri yapsak da, CSS Grid artı düşünceli, sanata yönelik içerik tüm bunları mümkün kılar.

Şimdi bu Hardboiled .

Umarım bu makaleyi beğenmişsinizdir, şimdi proje dosyalarını CodePen'de görüntüleyin veya örnek dosyaları indirin.

Andy Clarke'ın 'Sanat Yönü Web', ilk Hardboiled Web Design 'çekimi'. Shots, 'Web için Sanat Yönetmenliği', 'Tarayıcıyla Tasarım Yapma' ve 'Yaratıcı Fikirler Satma' konulu bir dizi kısa kitaptan oluşuyor ve 2018 boyunca yayınlanacak.