Custom properties özelliği, CSS içinde değişken tanımlama işlemi yaparak daha esnek ve dinamik bir grid sistemi oluşturma imkanı sağlar Bu sistemler, sayfa düzenini ve elementlerin yerleşimini belirleyerek web tasarımının daha düzenli ve estetik görünmesini sağlar Custom properties özelliği, CSS kodunun yeniden kullanılabilirliğini sağlamaktadır Ayrıca, birden fazla sayfada aynı özelliği tekrar tekrar yazmaktan kurtararak CSS kodunu daha okunaklı ve yönetilebilir hale getirmektedir Custom properties özelliği, responsive web tasarımı ve grid sistemleri gibi birçok alanda yaygın olarak kullanılmaktadır Klasik grid sistemleri özellikle sütun genişliklerinde sınırlı kalmaktadır ancak custom grid sistemleri özgür bir tasarım yapmada yardımcı olmaktadır Custom grid sistemleri oluşturmak için custom properties kullanımı en sık tercih edilen yöntemdir
279 karakter
Grid sistemleri, web tasarımında oldukça önemli bir konudur. Bu sistemler, sayfa düzenini ve elementlerin yerleşimini belirleyerek tasarımların daha düzenli ve estetik görünmesini sağlar. Ancak, klasik grid sistemleri artık yeterli değil ve web tasarımcıları yaratıcı grid sistemleri oluşturma arayışına giriyorlar. İşte bu noktada, custom properties devreye giriyor.
Custom properties, CSS’de değişkenlerin kullanımına olanak tanır. Bu sayede, tasarımcılar daha dinamik ve kullanımı kolay grid sistemleri oluşturabilirler. Özellikle büyük projelerde, custom grid sistemleri kullanmak, tasarım sürecini hızlandırır ve daha düzenli kodlama yapmanızı sağlar.
Custom Properties Nedir?
Custom properties, CSS'in güçlü özelliklerinden biridir ve CSS kodunun yeniden kullanılmasını sağlar. Bir değişken olarak düşünebilirsiniz. Stil dosyası içinde belirli bir değere sahip olan özelliklerin, o değeri başvuruları aracılığıyla kullanabilmenizi sağlar. "vars" fonksiyonu ile css değişkenleri tanımlanarak, bu değişkenler kullanarak css kodlarına esneklik kazandırılabilir. Örneğin, renkler, kutu boyutları veya fontlar gibi belirli özellikleri bir değişkene atayarak, bunları farklı öğelerde yeniden kullanabilirsiniz.
Custom properties, web tasarımcıların, birden fazla sayfada, aynı özelliği tekrar tekrar yazmaktan kurtarır. Kullanıcıların CSS kodunu daha okunaklı ve yönetilebilir hale getirir. Özellikle büyük web sitelerinde, konumlandırmalar ve fontlar gibi sayısız stil öğesi kullanılır. Bu nedenle, bunları bir değişkene atarak, web tasarım sürecini daha verimli ve esnek hale getirebilirsiniz.
Custom properties ayrıca, kullanıcıların CSS kodlarındaki hataları tespit etmelerini de kolaylaştırır. Özel bir özellik adı uzun ve açıklayıcı olursa, potansiyel bir hata kaynağı daha kolay belirlenebilir. Buna ek olarak, custom properties, web tasarımcıların bir web sitesindeki özellikleri hızlı bir şekilde güncelleme olanağı sağlar. Tek bir değişiklik sayesinde, tüm web sitesinde belirli bir stil öğesi değiştirilebilir.
Custom properties'in kullanımı, özellikle responsive web tasarımı ve grid sistemleri gibi birçok alanda yaygındır. Bunu kullanarak, farklı ekran boyutlarında farklı stil öğeleri ayarlayabilirsiniz. Bu daha önce zor ve zaman alıcı bir işlem iken, custom properties ile kolaydır.
Grid Sistemleri Nedir?
Grid sistemleri, bir web sitesinin düzenini ve bölümlerini tasarlamak için kullanılan bir sistemdir. Bu sistem ile web sayfası içindeki farklı bölümler, sütunlar ve satırlar arasında uyum sağlanarak, sayfanın daha estetik ve okunaklı görünmesi sağlanabilir.
Bu sistemler, özellikle büyük projelerde oldukça faydalıdır. Birden fazla sayfadan oluşan, içerisinde birçok farklı unsuru barındıran bir web sitesi için, grid sistemleri tasarlamak oldukça vakit alabilir. Ancak bu sistemlerin kullanımı sayesinde, tasarım süreci daha hızlı ve etkin bir şekilde ilerleyebilir.
Grid sistemleri, tasarımcılara farklı sayfa düzenleri oluşturma imkanı verir. Düzenlendirilmiş bir grid sistemi, sayfanın her bölümünün dengelenmesini ve uyum sağlanmasını sağlar. Ayrıca, kolay bir şekilde ölçeklenebilir oldukları için, farklı cihazlarda da iyi görüntülenebilirler.
Grid sistemleri, birçok web sitesinde yer alırlar ve genellikle birkaç farklı türü vardır. Bu türlerden bazıları, 12 kolonlu grid sistemleri, 16 kolonlu grid sistemleri ve daha karmaşık olabilen 24 kolonlu grid sistemleridir. Bu sistemler, web tasarımında kullanılan yaygın bir araçtır ve web sayfalarının görünümünü önemli derecede etkiler.
Klasik Grid Sistemleri vs. Custom Grid Sistemleri
Grid sistemleri, web tasarımcıları ve geliştiriciler için önemli bir konudur. Geleneksel grid sistemleri, belirli kural ve yapıya bağlı olarak oluşturulurken, custom grid sistemleri bu kısıtlamalardan kurtulmayı sağlar. Klasik grid sistemleri, web tasarımında yaygın olarak kullanılan bir şablon sistemidir. Sabit sütun genişliklerine sahiptirler ve bu nedenle daha sınırlı bir tasarım sunarlar.
Öte yandan, custom grid sistemleri geleneksel yapıdan daha esnektir. Custom properties kullanarak yapı ve sütun genişliklerini belirlemek, farklı cihazlara uyum sağlamak için daha kolaydır. Kullanıcılara daha fazla özelleştirme seçeneği sunan custom grid sistemleri, web tasarımında yenilikçi bir yaklaşım benimser.
Klasik grid sistemleri, tasarımın belirli bir düzen içinde akıcı olmasına yardımcı olurken, custom grid sistemleri daha özgür bir tasarım yaratmada yardımcı olur. Klasik grid sistemleri, içeriklerin sınırlı bir alanda sığdırılmasına izin verirken, custom grid sistemleri içeriği daha esnek bir şekilde yerleştirme imkanı sunar. Klasik sistemlere göre daha geniş bir açıklık ve kolay satırlama özelliği ile custom grid sistemleri, web tasarımında daha fazla inovasyon imkanı sağlar.
Sonuç olarak, her iki grid sistemi de kendi avantajlarına sahiptir. Klasik grid sistemleri belirli bir düzen içinde tasarım yapmak için kullanılırken, custom grid sistemleri daha esnek bir yapı sağlar. Web tasarımında, her ikisi de belirli bir amaç için kullanılabilir. Kullanıcıların tercihlerine ve tasarım ihtiyaçlarına göre, seçim yapmak en önemli kriterdir.
Custom Grid Sistemleri Oluşturmak
Custom grid sistemleri oluşturmak için custom properties kullanımı oldukça sık tercih edilen bir yöntemdir. Grid sistemi, tüm web sitesi tasarımlarında kullanılan ve öğelerin yerleşimini belirleyen bir yapıdır. Bu yapıyı oluşturmak için custom properties ile biraz kodlama bilgisine ihtiyacımız var.
Custom grid sistemleri oluşturmak için ilk adım, farklı boyutlarda rastgele kutular oluşturmaktır. Bu kutuları oluştururken genişliği, yüksekliği, dış boşluğu ve iç boşluğu gibi özellikleri dikkate alarak custom properties kullanabiliriz. Örneğin:
:root { --kutuBoyutu: 50px; --margin: 10px;}.kutu { width: var(--kutuBoyutu); height: var(--kutuBoyutu); margin: var(--margin); background-color: #ddd; }Yukarıdaki kod örneğinde kutuBoyutu ve margin değişkenlerini tanımladık ve bunları kutu sınıflarında kullandık. Bu sayede kutuları daha esnek hale getirdik ve farklı boyutlarda kutular oluşturabileceğiz.
Daha sonra, sütun oluşturmak için grid-template-columns ve satırları belirlemek için grid-template-rows kullanabiliriz. Örneğin:
:root { --kutuBoyutu: 50px; --margin: 10px; --sütunSayısı: 3; --satırSayısı: 2; --sütunGenişlik: calc(var(--kutuBoyutu) * var(--sütunSayısı) + var(--margin) * (var(--sütunSayısı) - 1)) ; }.kutular { display: grid; grid-template-columns: repeat(var(--sütunSayısı), var(--kutuBoyutu)); grid-template-rows: repeat(var(--satırSayısı), var(--kutuBoyutu)); grid-gap: var(--margin); width: var(--sütunGenişlik); margin: 0 auto; }Yukarıdaki örnekte custom properties ile kutuBoyutu, margin, sütunSayısı ve satırSayısı değişkenlerini tanımladık. Ayrıca, sütunGenişlik değişkenini de tanımladık ve bunu kutular sınıfına ekleyerek, kapsayıcının genişliğini belirledik.
Sonuç olarak, custom properties kullanarak daha esnek ve özelleştirilebilir grid sistemleri oluşturabiliriz. Bu sayede web sitesi tasarımlarımıza daha fazla yaratıcılık katabilir ve daha modern bir görünüm elde edebiliriz.
Custom Grid Sistemleri Kullanımı
Custom grid sistemleri sayesinde, web sitelerinin tasarımı daha düzenli ve organize olabilir. Grid sistemi oluştururken custom properties kullanımı sayesinde, kendimize özgü grid sistemleri oluşturabiliriz. Bu sayede, web tasarımcıları istedikleri gibi özelleştirilmiş web siteleri yapılandırabilirler.
Custom grid sistemleri, web yazılımı özellikle CSS ve HTML5 ile kolayca yapılandırılabilir. Grid sistemi özellikle büyük bir web sitesinde tüm web sayfalarına uygulanabilir. İlerleyen süreçlerde sayfa tasarımı değiştirilcek olsa bile, custom grid sistemleri sayesinde bu değişimi kolayca yapabilirsiniz.
Bunun yanı sıra, custom grid sistemleri uygulanarak tasarlanmış bir web sitesinin düzeni kolayca anlaşılabilir. Web tasarımcılar, custom grid sistemleri sayesinde daha hızlı ve düzenli bir şekilde web sitesinin tasarımını oluşturabilirler. Custom grid sistemleri projesine başlamadan önce, sitenin ihtiyaçlarına göre hangi tür bir grid sistemi kullanılacağı kararlaştırılmalıdır.
Custom grid sistemleri örnek olarak, çoğu web sitesinde kullanılan bir menü veya bir galeri sayfası olabilir. Bu sayfaların tasarımı, kullanımı kolay ve düzenli bir şekilde yapılmalıdır. Ayrıca, custom grid sistemleri ile oluşturulan web sitelerinde sayfa yüklemesi daha hızlı ve kolay bir şekilde gerçekleştirilebilir.
Sonuç olarak, custom grid sistemleri web tasarımı düzenli bir hale getirir ve web sitelerinin daha da güzelleştirilmesine yardımcı olur. Custom properties kullanımı ile oluşturulan bu sistemler, web tasarımcılarına daha fazla özgürlük sağlar.
CSS ve Custom Properties ile Grid Sistemleri Oluşturma
CSS ve custom properties kullanarak grid sistemleri oluşturmak oldukça kolaydır. Bu adımları takip ederek özelleştirilmiş bir grid oluşturabilirsiniz:
1. Grid yapısını tanımlayın: İlk adım, grid yapısını tanımlamaktır. Bunun için,
2. Custom properties tanımlama: Grid boyutlarına karşılık gelen custom properties tanımlayın. Örneğin, --col-width ve --gutter-width custom properties tanımlayabilirsiniz.
3. Grid sistemini stilize edin: Custom propertiesi kullanarak grid sistemini stilize edin. Bu, grid ve kolon boyutlarını belirtmek, kenar boşluğunu ayarlamak gibi çeşitli özellikler içerebilir.
4. Grid dizisini oluşturun: Son adım, grid dizisini oluşturmaktır. Bu, kolon sıralarını oluşturmak, kenar boşluklarını eklemek ve istediğiniz şekilde gridi stilize etmek anlamına gelir.
Ayrıca, CSS grid özelliklerini kullanarak grid sistemlerini stilize etmek de mümkündür. Grid-template-columns özelliği ile kolon genişliklerini belirleyebilir, grid-gap özelliğini kullanarak kenar boşluklarını ayarlayabilirsiniz.
Tüm bu adımları takip ederek, özelleştirilmiş bir grid oluşturabilirsiniz. Grid sistemleriyle ilgili diğer özellikleri öğrenmek istiyorsanız, kaynaklarımızı inceleyebilirsiniz.
Örnek Uygulama
Custom properties kullanarak oluşturulan grid sistemlerinin nasıl çalıştığını görmek için örnek bir uygulama yapalım. Örnek uygulamamızda, web sayfalarında sıkça kullanılan 12 kolonlu bir grid yapısı oluşturalım ve bu yapının responsive davranışını test edelim.
Öncelikle, custom properties kullanarak kolon genişliklerimizi, satır aralıklarımızı ve ana konteyner genişliğini belirleyelim. Kodumuz aşağıdaki gibi olacaktır:
:root { --col-width: calc((100% - 11 * var(--gap)) / 12); --row-gap: 20px; --col-gap: 30px; --container-width: 1200px;}Bu kodda :root elementi custom properties'lerimizin tanımlandığı yerdir. Bir kolonun genişliği, satır aralığı, sütun aralığı ve ana konteyner genişliği belirlenmiştir. Burada 12 kolonlu bir yapı kullanıldığından, her kolonun genişliği toplamda %100'ü veren bir hesapla belirlenmiştir.
Sonrasında, kullanacağımız HTML yapısını oluşturabiliriz:
<div class="container"> <div class="row"> <div class="col-12 col-md-6"></div> <div class="col-12 col-md-6"></div> </div> <div class="row"> <div class="col-12 col-md-4"></div> <div class="col-12 col-md-4"></div> <div class="col-12 col-md-4"></div> </div></div>
Burada, .container bir ana konteyner olarak belirlenmiştir. Sırasıyla, iki satır oluşturulmuş ve her satırın içerisinde belirli sayıda kolon yerleştirilmiştir. .col-12, her zaman tam genişlikte bir kolon olduğunu belirtirken, col-md-6 gibi sınıflar ise sadece belirli bir ekran boyutunda yarım genişlikte bir kolon olduğunu belirtmektedir.
Son olarak, bu yapıyı CSS ile stilleyelim:
.container { max-width: var(--container-width); margin: 0 auto; display: grid; grid-template-columns: repeat(12, var(--col-width)); grid-gap: var(--row-gap) var(--col-gap);}.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: var(--row-gap) var(--col-gap);}[class^="col-"] { position: relative; width: 100%; min-height: 1px;}.col-12 { grid-column: span 12 / span 12;}@media (min-width: 768px) { .col-md-6 { grid-column: span 6 / span 6; } .col-md-4 { grid-column: span 4 / span 4; }}Bu CSS kodu, önceden belirlenen custom properties'leri kullanarak grid yapısının nasıl şekillendirileceğini belirler. .container, ana konteynerin boyutunu, grid template'ini ve grid aralıklarını belirlerken, .row sınıfı sadece grid template'ini belirler. [class^="col-"], tüm kolonlara uygulanacak temel stil tanımlamalarını yaparken, .col-12, tam genişlikteki kolonların grid davranışını belirler. Son olarak, media sorgusu kullanarak ekran boyutlarına göre yarım veya dörtte bir genişlikteki kolonların dizilimleri belirlenir.
Örnek uygulamamızı bu şekilde oluşturarak, custom properties kullanarak kolayca ve hızlıca bir grid sistemine sahip olabiliriz.