İçerik
- Sorun
- Susy
- Konteynerler
- Aralıklar
- Varsayılanları ayarlama
- Sütunları Dolgu
- Medya Sorgularını Yönetme
- Kesme noktası ve Susy
- Mixins ile Düzenlerde Uzmanlaşma
Duyarlı düzenler oluşturmak, içerdiği matematik nedeniyle zor olabilir, bu nedenle tasarımcıların süreci basitleştirmek için çerçevelere ve / veya Sass'a yönelmesi yaygındır. Pek çok çerçeve 12 sütunlu bir ızgaraya dayanır, ancak duyarlı bir site her zaman bu yapıya uymaz. Burada, 12 sütunlu ızgarayı aşan gerçekten esnek bir düzen oluşturmak için iki Sass uzantısını nasıl kullanacağınızı göstereceğim.
Sorun
Farklı kesme noktalarında kapların, satırların, sütunların ve olukların genişliğini hesaplamayı içerdiğinden, duyarlı düzenler tasarlamak zor olabilir. Çerçeveler, ortak kesme noktaları için ön ayarlar oluşturarak yardımcı olabilir. Örneğin Bootstrap 3, bize dört medya sorgusu kesme noktası içeren 12 sütunlu bir ızgara verir. Daha sonra, içeriğinizin ızgarada belirli sayıda noktayı kaplamasına neden olan sınıfları kullanırsınız ve oluklar her zaman 30px yer kaplar.
Bu çoğu zaman zekice çalışır, ancak iki sorun vardır. İlk olarak, bu sınıfları işaretlemenize eklemek biraz ayrıntılı olabilir. Tüm sütunları mobil cihazlarda, 12 sütunun altısını küçük cihazlarda ve dördü orta cihazlarda kullanan bir düzen istediğinizi varsayalım. Bu işaretleme şuna benzer bir şeye benzeyebilir:
h2> Hizmetler / h2> div> makale> img src = "images / icon-exoticpets.svg" alt = "Simge"> h3> Egzotik Evcil Hayvanlar / h3> p> Sürüngenler, kemirgenler, kuşlar ve diğerleri için özel bakım sunuyoruz egzotik evcil hayvanlar./p>
İkinci sorun, bu sınıfların HTML'nize düzen bilgisi eklemesi ve özellikle büyük bir kurulumda kodunuzun güncellenmesini zorlaştırmasıdır. Düzenleriniz daha karmaşık hale geldikçe, şuna benzeyen bazı kodlarla karşılaşabilirsiniz:
div>
Daha büyük sorun, çok az esnekliğe sahip olmanızdır. Çerçeveniz matematiğe dikkat etmelidir çünkü işin zor kısmı budur, ancak mizanpajınızın metriklerini dikte etmemesi gerekir. Bu çerçeveleri kim sizin patronunuz yaptı?
Susy
Susy’nin basit sözü, matematikle ilgilenirken tasarım konusunda endişelenmenize izin vermektir. Özünde, tamamen esnek bir ızgara sisteminde genişliklerin hesaplanması için bir dizi Sass karışımıdır.
Kitaplığı bir içe aktarma komutuyla projenize aktararak başlayın: @import "susy" ;. Bu, uygulaması daha kolay olamayan Susy’nin ızgara çerçevesine erişmenizi sağlar. En basit haliyle, öğrenmeniz gereken sadece iki karışım vardır. Birincisi, konteyner karışımıdır.
Konteynerler
Kapsayıcılar, bir öğenin genişliğinin farklı kesme noktalarına nasıl ayarlanacağını kontrol etmenize yardımcı olur. Susy ile, HMTL kodumuza herhangi bir ek sınıf eklemek zorunda kalmadan, herhangi bir elemanın içindeki kapları herhangi bir zamanda yeniden tanımlayabiliriz.
Diyelim ki farklı bir web sitesi hazırlıyorum. Bir HTML öğesi içinde bir kapsayıcı oluşturmak istersem, bildirimime şunun gibi bir ekleme ekleyebilirim:
#welcome {makale {@include container (% 70); } //makale }
Bu, bölüm sınıfına sahip öğenin, HTML'mize bir .container sınıfı eklemek zorunda kalmadan bir önyükleme konteyneri gibi çalışmasını sağlar - yani HTML'miz çok daha anlamsal olabilir.
div id = "hoş geldiniz"> makale> h1> Landon Hotel'e Hoş Geldiniz / h1> p> Orijinal Landon, Batı Londra'nın kalbinde 50 yıl sonra varlığını sürdürüyor. West End mahallesinde tiyatrodan yemeğe ve tarihi yerlere kadar herkes için bir şeyler vardır. Ayrıca kaçırılmaması gereken Rooftop Cafe, gezginler ve yerliler için içecekler, yiyecekler ve iyi sohbet için harika bir yerdir ./p> / article> / div>
HTML'mi çok daha okunaklı hale getirmenin yanı sıra, bu, işleri güncellemeyi kolaylaştırır. İçerik ve sahne gibi sınıfları kullandığımızda, içeriğimizin istediğimiz gibi davranmasını sağlamak için kaç tane sınıf eklememiz gerektiğini düşünmek yerine, bu öğelerin düzen açısından ne anlama geldiğini yeniden tanımlamak kolaydır. .
Aralıklar
Susy'de açıklıkları kullanarak satırlar ve sütunlar oluşturursunuz. Üç sütundan birini kaplayan bir eleman oluşturmak için buna benzer bir şey yazabilirsiniz.
#usefulinfo {bölüm {@include span (1/3); }}
Bununla ilgili gerçekten harika olan şey, asla belirli sayıda sütuna uymak zorunda kalmamamız ve ardından öğeleri buna göre ayarlamamız. Düzenimdeki herhangi bir öğe, yalnızca o anda ihtiyaç duyduğum alanı kaplayabilir.
Bu, sütunlar hakkında düşünme şeklinizi gerçekten değiştirir. Bootstrap kullanıyor olsaydım, 12 sütunun üçte biri dört olduğu için yukarıdaki kodu .col-sm-4 olarak yazardım. Susy ile, kaç birim yaymak istediğimi düşünmek zorunda değilim; İhtiyacım olan alan miktarını basitçe belirtebilirim. Artık belirli sayıda sütuna dönüştürmeyi düşünmediğinizde, bunun yerine düzenin nasıl görünmesi gerektiğine odaklanabilirsiniz.
Varsayılanları ayarlama
Elbette, herhangi bir düzen sisteminde varsayılanlara sahip olmak iyidir, bu nedenle her durumda oluklarımızın boyutunu belirtmemize gerek yoktur. Bunu, Sass'ımızın tepesindeki $ susy adlı bir değişkeni değiştirerek yapıyoruz:
$ susy: (sütunlar: 12, konteyner: 60em, oluklar: 1/4, oluk konumu: iç);
Susy, varsayılan ızgaranızı ayarlamak için kullanabileceğiniz bir ton varsayılana sahiptir, ancak bu temel kurulum, standart bir Bootstrap benzeri varsayılanı bir araya getirmeye özen gösterecektir. Unutmayın, Susy'deki her şey özelleştirilebilir, böylece bunlardan hiçbiriyle asla evlenmezsiniz ve bunları etiket bazında değiştirebilirsiniz.
Konteynır karışımında @include komutunu kullandığımızda, varsayılan ızgarada artık 12 sütun olacak ve bu konteyner, sütunların dörtte biri boyutunda oluklarla 60em genişliğinde kilitlenecek. Önceki bölümleri bu ızgaraya sığdırmak isteseydik, beyanı şu şekilde yazabilirdik:
#usefulinfo {bölüm {@include span (4); }}
Bu, her bölümün 12 sütundan dördünü kapsadığı anlamına gelir. Bununla birlikte, bir öğenin "üç" sütundan birini kapladığını söyleyebilmenin daha mantıklı olduğunu düşünüyorum. Sütunları belirli bir konuma kaydırmanız gerekirse, bu gösterimi kullanabilirsiniz:
@include span (4 / 12'de 8);
Bu, bir öğenin 12 sütunlu bir ızgarada dördüncü konumdan başlayarak sekiz sütun almasını sağlar. Dolayısıyla, bir düzen oluştururken, tasarımın mevcut ızgaranıza nasıl uyması yerine içeriğinizin ne yapması gerektiğine odaklanabilirsiniz.
Sütunları Dolgu
Öğelerinizin yerleşimini kontrol etmenin başka bir yolu da sütunlarınızı doldurmaktır. Bu, sütunlarınızın her iki tarafına da bir dizi sütun boşluğu ekler. Örneğin, bir sütunu yedi birim sağa taşıyabilir ve aşağıdaki gibi soldan bir birim doldurabilirsiniz:
@include ped (7,1);
Bu, pozitif alanları (bir öğenin kaç sütun kaplaması gerektiğini) düşünerek bir şeyler düzenlemenin yanı sıra, tersini yapabilir ve içeriğinizin her iki tarafındaki boşluğa göre tasarımlar oluşturabileceğiniz anlamına gelir.
Medya Sorgularını Yönetme
İşleri gerçekten duyarlı hale getirmek için, sütun kurulumunu ve tasarımını duyarlı kesme noktaları ile birleştirebilmeniz gerekir. Bunu yapmak için, Breakpoint adlı bir kütüphaneden başka bir mixin seti kullanabiliriz.
Breakpoint, mizanpajlarınızdaki medya sorgularını işlemeyi kolaylaştırır. Bunu, medya sorgusu kesme noktaları oluşturmak için kullanmanız gereken dili basitleştirerek yapar. Geleneksel olarak, bunları aşağıdaki gibi bir kural kullanarak oluşturursunuz:
@media (min-genişlik: 34em) ve (maks. genişlik: 62em) {.container {...}}
Bu, bildirimlerin mizanpajınızı etkilediği bir dizi genişlik yaratır. Kesme noktası, çağrıları yazması çok daha kolay olan sağduyu karışımına dönüştürür:
.container {@include breakpoint (34em 62em) {...}}
Çağrı da farklı, çünkü bunu mevcut bir sınıfa kolayca atayabiliriz. Breakpoint ile ilgili harika olan şey, ortak düzen ihtiyaçlarına göre varsayımlar yapmasıdır.
Kesme noktası kurallarını öğrenmek de kolaydır. Bilmeniz gereken sadece üç şey var:
- Kesme noktası çağrısına yalnızca tek bir numara eklerseniz, Kesme Noktası, minimum genişlikte bir medya sorgusu çağrısı yapacaktır.
- İki sayı eklerseniz, kesme noktası, iki sayı arasında bir aralık belirtmek istediğinizi varsayar (önceki örnekte olduğu gibi)
- İki değer eklerseniz ve biri bir dizeyse, karışımı bir özellik değer çiftinde gönderdiğiniz varsayılır, böylece isterseniz yine de yönlendirmede veya başka herhangi bir özel ortam sorgusu kuralını gönderebilirsiniz.
Kesme noktası, 2.2.1 sürümünden bu yana Susy'ye katlandı. Susy sürümü, Breakpoint karışımları gibi çalışır, ancak kesme noktası çağırmak yerine susy-kesme noktası kullanırsınız. Aynı çağrı şu şekilde yapılacaktır:
.container {@include susy-breakpoint (34em 62em) {max-width: 50%; kenar-sol: otomatik; sağ kenar boşluğu: otomatik; }}
Kesme noktası ve Susy
Kesme Noktasını Susy ile birleştirdiğinizde, farklı medya sorgu bildirimlerine kolayca ayarlanabilen esnek bir ızgara elde edersiniz. Bir sitedeki bilgi bölümü için HTML'ye bir göz atalım.
div id = "hotelinfo"> makale id = "yararlı bilgi"> bölüm id = "varış bilgisi"> / bölüm> bölüm id = "hizmetler"> / bölüm> bölüm id = "erişilebilirlik"> / bölüm> / makale> makale id = "greenprogram"> / article> / div>! - hotelinfo ->
Susy ve Breakpoint'i birleştirerek, farklı ızgara düzenleri içeren medya sorguları oluşturabiliriz. Yerleşimimde üç farklı bölümüm var, ancak bunların görünüm penceresinin genişliğine bağlı olarak farklı kurallara sahip olmasını istiyorum.
Bu iki farklı kesme noktasında, düzenimiz önemli ölçüde farklı davranır. Sağdaki daha büyük kesme noktasında, her bölüm üç sütun kaplar. Daha küçük kesme noktasında, ilk sütun görüntü alanının yüzde 100'ünü kaplar, ancak diğer ikisi görüntü alanının yarısını kaplar. Bu mixinleri bu kadar güçlü yapan da budur. Bu iki düzeni ifade etme kodu kısa ve özdür:
{@include susy-breakpoint (650px) {@include span (1/3); } // kesme noktası @include susy-kesme noktası (450px 650px) {& .checklist {@include span (1/2)} // kontrol listesi} // kesme noktası} // bölüm
İlk olarak, bir bölüm etiketindeki herhangi bir öğe için varsayılanları belirledik. Bu öğeler 650 pikselden daha büyük bir görüntü alanına ulaşırsa, her biri tek bir birimi kaplayan üç birimlik bir ızgarayı kaplar.
Düzen 450px ile 650px arasındaysa, .checklist sınıfına sahip öğeler (hizmet ve erişilebilirlik bölümleri) yalnızca iki sütunlu tamamen yeni bir ızgaraya sığacak ve her öğe bu birimlerden birini kaplayacaktır.
Varış bilgisi, bu iki kesme noktası arasındaki ızgaranın yüzde 100'ünü kaplar. 450 pikselin altında ne olacağını belirtmediğimize dikkat edin. Bu, varsayılanlar tarafından halledilir - her bölüm, görüntü alanının yüzde 100'ünü kaplar.
Mixins ile Düzenlerde Uzmanlaşma
Bu iki mixin çerçevesinin size sağladığı şey, mizanpajları oluşturmak için kullandığınız kodun ötesine geçer. Bu ızgara veya bu ızgara hakkında endişelenmenize gerek kalmadan düzenlerinizi ifade etme yeteneği, projeleri tasarlarken beyninizin çalışma şeklini değiştirir.
Beni yanlış anlamayın, çerçeveleri severim. Bootstrap, benzeri görülmemiş bir hızda düzenler oluşturmanıza yardımcı olabilir. Tablolar, kipler ve formlar gibi ortak öğeleri hızlı bir şekilde işlemek için her türlü CSS ve JavaScript bileşenini sağlamak için mizanpajın ötesine geçen, savaşta test edilmiş bir ızgara sunar.
Ana hatlarıyla anlattığım tasarım sisteminin yaptığı şey, bir düzeni tanımlamak için kullandığınız dili değiştirmektir. Web sitesi tasarlama hakkındaki düşüncelerinizi değiştirecek, doğal, geriye dönük uyumlu ve öğrenmesi kolay bir sistemdir.
Kelimeler: Ray Villalobos
Ray Villalobos, Lynda.com'da tam yığın tasarım ve geliştirme, ön uç tasarımı, JS, AngularJS, Sass, Bootstrap konularında uzmanlaşmış bir kadrolu yazardır. Bu makale ilk olarak net dergisinin 274. sayısında yayınlandı.
Bunu beğendin mi? Bunları oku!
- Mükemmel web sitesi düzenine 20 adım
- Mükemmel Wordpress öğretici seçimi
- Tasarımcılar için ücretsiz dövme yazı tipleri
