Dikkate Alınması Gereken 20 Duyarlı ve Hafif CSS Çerçevesi

Kaliteli, duyarlı bir CSS çerçevesi kullanmak, herhangi bir web tasarım projesinde size güzel bir başlangıç ​​sağlayabilir. Bootstrap gibi bazıları fazla kodla biraz şişkinken, diğerleri oldukça dik bir öğrenme eğrisi gerektirir.

İdeal olarak, ihtiyacınız olmayan bir dizi seçenekle sizi ezmeden, koşarken yere düşmenize yardımcı olacak yeterli özellikleri sağlayan bir paketle çalışmak istersiniz.

Bu Materyal Tasarımı Web Çerçevelerini veya bu Açık Kaynak WordPress Geliştirme Çerçevelerini de beğenebilirsiniz.

Bu hedefi göz önünde bulundurarak, tüm toplu olmadan temelleri sağlayan 20 CSS çerçevesi.

FICTOAN

FICTOAN, daha büyük, daha karmaşık çerçevelerin hayranı olmayanlar için mükemmel bir seçim olmayı hedefliyor. Canlı bir renk düzeni, özel simgeler ve çok sayıda hafif tarzda tasarım öğesi içerir.

çığ

çığ, ihtiyaçlarınızı karşılamak için özelleştirebileceğiniz bir çerçevedir. Akışkan ızgara sistemi, ofset sınıfları, kaplar, dikey boşluk ve daha fazlası gibi belirli özellikleri etkinleştirmek için mevcut paketler vardır.

güzellik

5k'dan daha az sıkıştırılmış olan Beauter, kesinlikle ciddi şekilde hafif olma zorluğunu üstleniyor. Ancak bu, özelliklerin olmadığı anlamına gelmez. Duyarlı bir ızgara gibi temel özelliklerin yanı sıra paralaks kaydırma, modlar, araç ipuçları ve bazı güzel kaplar gibi bazı ekstraları da elde edersiniz.

Vanilya Çerçevesi

Vanilla Framework, projeniz için size harika bir başlangıç ​​noktası sağlamak için tasarımı gereği basittir. Pek çok kap ve tasarım öğesi kendi başlarına harika görünürler ancak aynı zamanda istediğiniz görünüme uyacak şekilde kolayca özelleştirilebilirler.

Cirrus.CSS

Cirrus.CSS, hızlı prototipleme için tasarlanmış bileşen ve yardımcı program merkezli bir SCSS çerçevesidir.

Yarım ay

Halfmoon, yerleşik bir karanlık mod ve CSS değişkenlerini kullanarak tam özelleştirilebilirliğe sahip bir ön uç çerçevesidir.

yeni.css

new.css, yalnızca HTML içeren web siteleri oluşturmak için hafif (~4.5 kb) ve sınıfsız bir CSS çerçevesidir.

Bulma

CSS Flexbox'a dayanan Bulma, yalnızca ihtiyacınız olan şeyleri kullanmanıza izin veren tamamen duyarlı ve modüler bir çerçevedir. Sayılarına ve görünüm alanlarına göre kendilerini otomatik olarak yeniden boyutlandıran sütunlar ve döşemeler dahil olmak üzere Flexbox'ın tüm avantajlarından yararlanırsınız.

Miligram

Miligram neredeyse adaşı kadar hafiftir – sıkıştırıldığında sadece 2k. Beklediğiniz tüm temel bilgileri içerir ve sıfırlamanız gereken stil sayısını en aza indirecek şekilde tasarlanmıştır.

InvisCss

InvisCss, daha karmaşık çerçevelere alternatif olarak oluşturuldu. Paket, basit CSS seçici adları ve minimal ancak çekici bir kullanıcı arayüzü içerir.

Bakmak

Kişisel bir projenin sonucu olan Look, site geliştirme için temel bir başlangıç ​​noktası olarak hizmet etmek üzere minimalist bir CSS çerçevesi olarak halka sunuldu. Tasarım öğeleri basittir ve beğeninize göre özelleştirilebilir.

sınırsızIzgara

Sass'ı temel alan sınırsızGrid, esnek, mobil öncelikli bir ızgara çerçevesidir. Modülerdir, bu nedenle yalnızca ihtiyacınız olan özellikleri kullanmanız gerekir. Flexbox desteği dahildir ve aralarından seçim yapabileceğiniz birden fazla ızgara varyasyonu vardır.

Hayati

Daha büyük çerçevelere "ters yaklaşım" olarak faturalandırılan Vital, hem hafif hem de ölçeklenebilir. Sass kullanılarak oluşturulmuş, verimli bir ızgara düzeni, özel düğmeler ve yükleyiciler bulacaksınız. Fotoğraf kolajları, kart kapları ve formlar gibi şeyler için çeşitli kullanışlı düzen stilleri de dahildir.

PowerToCSS

SMACSS ve DRY ilkelerine dayanan PowerToCSS, bir sonraki web projenize hızla başlamanız için kaya gibi sağlam bir temel sunan hafif bir CSS çerçevesidir.

Kouto İsviçre

Kouto Swiss, size daha hızlı kodlamanız için birçok karışım, işlev ve yardımcı program sağlayan Stylus için eksiksiz bir CSS çerçevesidir ve ayrıca stil sayfalarınızı uyumluluk gereksinimlerinize uygun hale getirmek için Caniuse web sitesinin gücünü içerir.

gizli CSS

Furtive, çok az yer kaplayan, mobil öncelikli bir çerçevedir. Bu çerçeve, eski tarayıcı sürümleri için endişelenmez, yani flexbox, SVG'ler ve sınırlı satıcı ön eki gibi 'en son teknolojiyi' kullanabilir. Ayrıca SCSS, CSS'de mevcuttur ve yapıyı özelleştirmek için bir Gulp dosyasıyla birlikte gelir.

Web plakası

Webplate çerçevesi, sağlam bir duyarlı düzen motorundan global düğme öğelerine, özelleştirilebilir formlara ve IcoMoon simge yazı tiplerine yönelik desteğe kadar her şeyi içerir. Ayrıca varsayılan olarak jQuery, Modernizr ve Typeplate ile birlikte gelir.

akışkanlık

Fluidity, belki de şimdiye kadarki en hafif, tam yanıt veren CSS çerçevesidir! HTML, kutudan çıkar çıkmaz neredeyse %100 yanıt verir ve 115 baytlık CSS dosyası 'neredeyse' kısmı düzeltir. Bundan daha hafif olamaz.

Şema

LESS üzerine inşa edilen Schema, hızlı bir şekilde başlamanıza yardımcı olmak için her şey dahil bir CSS bileşenleri (düğmeler, açılır menüler, formlar…) koleksiyonuyla birlikte gelen duyarlı bir ön uç UI çerçevesidir.

Zümrüt

Zümrüt, LESS'te pragmatik, duyarlı bir ızgara sistemidir. Blok eleman tabanlıdır (şamandıraların tersi) ve BEM sözdizimi kullanılarak OOCSS metodolojisi ile yazılmıştır.

bijou

Bijou, hafif (<2 kb) duyarlı 10 sütun ızgara çerçevesidir. Düğmeler, uyarılar, tablolar, gezinme çubuğu ve tabii ki ızgara ile birlikte gelir.

Kıvılcım

Spark, duyarlı tasarıma yönelik mobil öncelikli yaklaşımı temel alan hafif bir çerçevedir. Çerçeve, hem parlak hem de düz stillerde değiştirilebilir çeşitli renk temalarıyla önceden oluşturulmuş olarak gelir. Şu anda temel renkler gümüş (varsayılan), mavi, yeşil, turuncu, kırmızı, mor, limon ve ejder meyvesidir.

Tip tabanı

typebase.css, minimal ve özelleştirilebilir bir CSS tipografi ortak plakasıdır. typebase.css'nin size sağladığı en önemli şey, çoğu cihaz ekranında zorunlu bir dikey ritimdir, böylece sütunlar arasındaki metnin ve uzun kopyanın düzensiz olmamasını sağlar. Hem Less hem de Sass versiyonları mevcuttur.

hoisin

Sass ile inşa edilen Hoisin, daha karmaşık ve şişirilmiş ön uç çerçevelerine alternatif olarak oluşturulmuş basit, duyarlı bir ön uç mini çerçevedir. Bilerek herhangi bir bileşen içermez, bunun yerine size kendi kitaplığınızı oluşturabileceğiniz organize bir temel sağlamaya odaklanır.

sevimli ızgaralar

Cute Grids, çoğu proje için aşırıya kaçabilen ve tasarımcının yaratıcılığını kısıtlayan günümüzün aşırı inşa edilmiş büyük çerçevelerinin hüsranından doğan, mobil öncelikli, 12 sütunlu duyarlı bir ızgara sistemidir.

Hafif ama Güçlü

Herhangi bir tür çerçeve kullanmanın amacı, işinizi kolaylaştırmaktır. Bu yüzden, içeri girmek ve bir miktar CSS'yi yeniden biçimlendirmek zorunda kalmak veya kullanmayacağınız bir sürü komut dosyasını yüklemek, tüm mantığa aykırı görünüyor.

Yukarıdaki daha temel çerçevelerden birini kullanmak, tüm baş ağrıları olmadan hızlı bir başlangıç ​​yapmanızı sağlayabilir. Ve bazıları modüler bir yaklaşım kullandığından, yalnızca belirli bir proje için ihtiyaç duyduğunuz öğeleri seçip seçebilirsiniz. Bu daha doğru gibi!