Web dünyasındaki Front-Endler için nimet olan CSS Frameworklerinden en iyi 5tanesinden bahsedeceğiz. Tüm frameworkler aynı amaca hizmet etse de kıyaslandığında özellik ve gelişmişlik açısından birbirinden ayrılmaktadır.
- Bootstrap
Bootstrap, Twitter tarafından geliştirilen ve popülaritesi en yüksek olan frameworklerinin başında gelmektedir. Bootstrapın diğer frameworklerden en büyük farkı 12’li ızgara yapısıdır. Bu grip yapısı sayesinde responsive tasarımlar için oldukça büyük önem taşımaktadır.
Bootstrap’in CSS’ini ekledikten sonra, tüm tarayıcılarda çalışan, yanıt veren bir esnek bir ızgara yapısı oluşturmak bu kadar basittir:
<div class="container">
<div class="row">
<div class="col-sm">
Column 1
</div>
<div class="col-sm">
Column 2
</div>
<div class="col-sm">
Column 3
</div>
</div>
</div>
- Foundation
Bootstrap gibi Foundation frameworkü de oldukça popüler hale geldi ve uygulaması kolay CSS bileşenleriyle daha sofistike bir framework olarak biliniyor. Temel Sass üzerine kuruludur, böylece Bootstrap gibi özelleştirilebilir. Buna ek olarak, mobil uyumlu tasarımlar yapmanın çok kolay olduğu anlamına gelen bazı güçlü duyarlılık özelliklerine de sahiptir.
Ayrıca, dikey zaman çizelgesi birçok frameworkte görmediğiniz bir özelliktir. Bu framework .timeline sınıfını kullanır ve daha sonra her öğe için bir simge ve içeriğe sahip birden fazla .timeline öğe öğesi tutar:
<div class="timeline">
<div class="timeline-item">
<div class="timeline-icon">
<img src="image.svg" alt="Icon">
</div>
<div class="timeline-content">
<p class="timeline-content-date">2019</h2>
<p>Example text for timeline item.</p>
</div>
</div>
</div>
- UIkit
UIkit başka bir popüler önyüz frameworküdür ve belki de CSS özellikleri açısından biraz az takdir edilmektedir. Diğer popüler frameworklerde bulunanlara benzer birçok özelliğe ek olarak, birkaç yararlı özel bileşen vardır.
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
- Semantic UI
Frameworkler arasında Semantic UI yenilikçi yapısıyla bilinmektedir. Sade ve anlaşılır bir kodlama yapısı bulunmaktadır. Semantic UI, diğer popüler çerçevelerle örtüşen birçok özelliğe sahiptir, ancak çalışma şekli, bileşenleri oluşturmak için kullanılan sınıf adlarının anlamsal niteliğine dayanır.
Örneğin, dört sütunlu bir ızgarayı nasıl oluşturacağınıza bir göz atın:
<div class="ui grid">
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
</div>
- Bulma
Bulma'nın biraz Bootstrap ve Semantic UI'nin bir melezi gibi olduğunu, ancak hiçbir karmaşıklığa sahip olmadığını düşünebilirsiniz. Sınıf adlarıyla Semantik UI ile aynı ilkelerin bazılarını kullanır, popüler bileşenlerin birçoğunu içerir, ancak işleri basit tutmayı başarır. Örneğin, form öğelerinin tarayıcı görünümünü korumak için stilleri çok az veya hiç yoktur.
Aşağıdaki örnek, bir Bulma bileşeninin nasıl oluşturulduğunu ve kolay olduğunu göstermektedir:
<section class="hero is-dark">
<div class="hero-body">
<div class="container is-fluid">
<h1 class="title is-size-2">Example Heading</h1>
<h2 class="subtitle">Example text goes here</h2>
<p>Some example paragraph text here.</p>
</div>
</div>
</section>
Hoş çakalın,
Weeb Tasarım Blog Ekibi
