Bildiğiniz gibi internetin doğum zamanı değil ve insanlar neredeyse tek paragraflı metinlere ve bazı hiperlinklere sahip web sitelerini unuttular. Mevcut web standartlarıyla devam etmek istiyorsanız, web sitenizi açıkça görülebilir olmaktan çok eğlenceli hale getirmelisiniz. Ne olursa olsun kodlama dili gibi HTML or PHP kullanıcı arayüzünü oluşturmak için kullanılır, CSS web sayfasının şık görünmesini sağlamak için aracınız olacaktır. Bir web sayfasını bir insan vücuduyla karşılaştırdığımızda, HTML kemikleriniz gibi çalışır, CSS ise cilt ve kaslara yakın, şekil ve yapı vermek için yapılmış bir şeydir.
Tasarım ve geliştirme dünyasındaki diğer her şey gibi, CSS de küçük ve büyük güncellemeler alarak, HTML3'in bu yolculuğa eşlik ettiği en iyi ikili olan CSS5'e ulaşmasını sağladı. Ancak, oyunun yıldızı, kullanmayı seçtiğiniz CSS trendi veya modelidir! Bildiğiniz gibi, sizin için farklı görünüm ve özelliklere sahip çeşitli CSS çerçeveleri bulunmaktadır. Çizme atkısı, Zurb vb. Bugün size tanıttığımız şey Saf CSS, önde gelen internet devi Yahoo!'dan basit bir coolgrid tabanlı CSS Çerçevesi. Neyse ki, bu çerçeveyi tek bir kuruş ödemeden kullanabilirsiniz.
Saf CSS
Çekici web sayfaları ve web siteleri oluşturmak için Zurb Foundation gibi diğer çerçeveleri kullanmış olabilirsiniz. CSS çerçevesini kullanmak çok faydalıdır çünkü sayfadaki bölümler, formlar, menü vb. gibi çeşitli öğeler için şablonlar alabilirsiniz. Bu aynı işlevdir. Yahoo'dan Saf CSS! Pure CSS, dosyaları 'CSS' klasörüne indirip eklemek yerine şu şekilde çalışabilir: Google Fontsçerçeveyi HTML'ye entegre etmek için tek bir kod satırı eklemeniz gereken yer. Çerçeve en sonuncusu olduğu için tamamen duyarlıdır. Hepsinden öte, Pure CSS, web'de bulabileceğiniz en basit çerçevelerden biridir. Web sitenizi güçlendirmek için çerçeveyi kullanabilir veya formlar, menüler vb. gibi bölümleri şekillendirmek için belirli modüller indirebilirsiniz. Ücretsiz olarak sunulan altı ayrı modül vardır. Pure CSS modülleri, ayıklandığında hafif boyutlu (2 Kb'den küçük) görünen aşağıdaki gibidir.
- Taban: Başlıklar, paragraf, tipografi gibi Temel Web Sayfası Öğeleri
- Düğmeler: Etkin, üzerine gelindiğinde vb. efektlere sahip çeşitli düğmeler.
- Tablolar: Kenarlık vb. ile mevcut taban tabloları.
- Menüler: Yatay, Dikey, Açılır.
- Izgaralar: Duyarlı Izgaralar.
- Formlar: Gruplandırılmış giriş, çoklu sütun vb.
AYRICA BAKINIZ: İnce Desenler Bookmarklet: Arka Plan Desenlerini Web Sitenizde Önizleyin.
Neden Saf CSS Kullanmalısınız?
- Daha az kullanılmayan Kod: Diğer css çerçevelerini kullanırken çok sayıda kullanılmayan kod görmeniz çok normaldir. Öte yandan, Pure CSS durumunda, bu sorunla asla karşılaşmazsınız çünkü çerçevenin belirli sürümünü kullanabilir ve web sayfasının belirli bölümlerini şekillendirmek için kullanabilirsiniz. Tabii ki, daha az kod bile harika görünüyor!
- Hepsi içinde: En azından bazı diğer çerçevelerde, görsel etkiyi daha iyi hale getirmek için üçüncü taraf JavaScript eklentileri ve kodları kullanıyorlar. Bununla birlikte, Pure CSS, açılır efektte kullanılanın durumu dışında herhangi bir JS eklentisi kullanmaz. Daha az üçüncü taraf kodu, daha hızlı sayfa yüklemeleri ve kodda düzgünlük sağlayabilir.
- Şablonlar: Web siteniz için kendi düzeninizi tasarlama konusunda uzman değilseniz, Pure CSS bu bölümde yardımcı olabilir. Web sitesi, pazarlama, açılış sayfası vb. gibi farklı amaçlara sahip web sitelerini eşleştiren bir dizi düzen örneği içerir.
- Cilt Oluşturucu: Şablonların ve stillerin içinizdeki yaratıcı tasarımcıyı tatmin etmesi durumunda, kendi dış görünümünüzü oluşturmak için Pure CSS'nin dış görünüm oluşturucusunu kullanabilirsiniz. Tahmin edebileceğiniz gibi, dış görünüm oluşturucu, kodlama düzeyindeki uzmanlığınızı dikkate almıyor.
AYRICA BAKINIZ: Simge Yazı Tipleri: Harika Yazı Tipi Oluşturucusunun Artıları ve Eksileri.
Saf CSS'yi Kullanma
Daha önce belirtildiği gibi Pure CSS, diğer çerçevelere kıyasla birçok olumlu özelliğe sahiptir. Daha önce söylediğimizi hatırlatarak Pure CSS'yi Google Fonts ile aynı yöntemle kullanabilirsiniz. Web sayfanıza stil getirmek için tek satırlık harici dosya bağlantısı eklemelisiniz. Bu özellik, tek dosya web sayfaları oluşturmanız gerektiğinde ve tüm css dosyalarını koymak için yeterli alanınız olmadığında oldukça kullanışlıdır (Sanırım bu hiç olmayacak). Yahoo olarak! proje çarkını döndüren proje, yükleme hataları veya teknik arızalar konusunda gergin olmak istemezsiniz.
Pure CSS'nin tam CSS şablonlarını kullanmak istiyorsanız, ana web sayfasına aşağıdaki kodu ekleyebilirsiniz. Ayrıca kullanmak için CSS dosyası bağlantısına tıklayıp CSS dosyasını indirebilirsiniz.
[html]
[/ html]
Menüler, formlar vb. gibi belirli CSS sürümlerini kullanmak istiyorsanız, özel CSS dosyalarıyla birlikte özel kodlar da mevcuttur. URL'lerin listesi aşağıdaki gibidir:
Pure CSS'nin dış görünüm oluşturucusunu kullanmak da daha kolay bir iştir çünkü dış görünüm oluşturucu sayfasının sezgisel kontrol düğmelerini kullanarak öğelerin özelliklerini kontrol edebilirsiniz. Ancak elementlerin isimlerini anlamak için CSS dosyalarını indirmenizi tavsiye ederiz. Dediğimiz gibi 2 Kb'dan az olan bu dosyaları koymak disk alanınızı tüketmez.
Pure CSS'nin web sitesi, yeni başlayan birinin bile web sitelerine Pure CSS tabanlı öğeler ekleyebileceği şekilde ayarlanmıştır. Sol tarafta formlar, düğmeler vb. gibi bölümleri listeleyen basit bir kenar çubuğu görebilirsiniz. Her sayfada, bu efekti web sitenize getirmek için HTML koduyla birlikte önizlemeler mevcuttur. Bu nedenle, bu tür öğeleri web sayfanıza eklemek çok kolaydır. Aşağıda, tek bir oturum açma türü formunun önizlemesi ve kodu gösterilmiştir.
Sonuç
Pure CSS'nin tüm özelliklerini analiz ederken, bu Yahoo! tasarım dünyası için. Yahoo! Genellikle YUI olarak bilinen Kullanıcı Arayüzü, bir karşılaştırma olduğunda çerçeveyi en iyi hale getiren Pure CSS'ye eklenen tüm dizeleri destekler. Önceden ayarlanmış öğeleri kullanmanın yanı sıra Pure CSS'yi de özelleştirebilirsiniz. Basitçe kompakt çerçeveyi kullanmak ve hakkında daha fazla bilgi edinmek için kendinizi Pure CSS web sitesine yönlendirmeniz gerekir. Örnekleri inceledikten ve projenizde kullandıktan sonra bu çerçeve hakkındaki düşüncelerinizi bize bildirin.
Rakesh kumar
Saf css ile ilgili bu harika incelemeyi gönderdiğiniz için teşekkür ederiz. Topluluk için kendi wordpress temalarımı geliştirmeye çalıştığım için, yahoo.com'dan gelen bu yeni css'in bana çok yardımcı olabileceğini düşünüyorum.
Hari
Gerçekten çok faydalı buluyorum. Her birini daha sonra keşfedecek.
Cassie
Vay. Bu gerçekten ilginç. Bu bilgiyi paylaştığınız için teşekkür ederiz.
raymond sam
Bu noktada Pure'u Bootstrap veya Foundation yerine önerir misiniz? Bootstrap'i, ilk kez kullanan biri olarak optimal olarak belgelenenden biraz daha az buldum.
Sajeş
Merhaba Abhijith N Arjunan, harika bir iş çıkardığınızı söylemeliyim ve bilgi ve becerilerimi aydınlattığınız için teşekkür ederim.
Santosh
Harika bir makale Abhijit. PyroCMS adlı yeni bir içerik yönetim sistemi için bir tema oluşturmak için PureCSS kullandım. [PyroPure]'a bir göz atın).
Temayı geliştirmek çok eğlenceliydi. Bence diğer çerçevelerden çok daha hafifti. Stil de çok özelleştirilebilir.
Erwin
Vay canına .. Bu öğrenmesi ilginç bir şey, programlama ve tasarım konusunda yetenekli olmadığımı biliyorum ama yapması ilginçti. PureCSS muhtemelen ihtiyacım olan bir şey, çok.
Adem
Merhaba, 3 projede Yahoo'dan (PureCss) saflık kullanıyorum ve gerçekten harika bir hafif çerçeve, yani Bootstrap veya temel ile karşılaştırıldığında odak noktası, hafif ve tasarımı geliştiriciye geri getirmesi ve 300kb UI kitine güvenmesidir. zaten öğelerin %70'ini kullanmadığınızı ve Bootstrap'tan parçalar çıkarırsanız yine de Java'ya ihtiyacı olduğunu, hala 200kb bölümünde olduğunu. Her web sitesinin Bootstrappy gibi göründüğünden bahsetmiyorum bile, bu yüzden Bootstrap'i bir web sitesi veya Zurb temeli oluşturmak için asla kullanmayacağım, hepsi ağır ve gerçekten sıkıcı hale gelen 12 sütun ızgaralarını kullanmanız gerekiyor. Web sitesi siteleri görüyorum, hepsi güzel ve havalı görünüyorlar, ancak sadece çok kutulu ve iyi görünüyorlar Bootstrap-temel, Yahoo PureCss harika bir UI kiti ışığı, hızlı kullanımı kolay değişiklik ve hepsinden iyisi, tema olarak WordPress ile çok hızlı çalışır! YUI PureCss ile 4 WordPress projesi için kullandım ve müşteri Bootstrap'tan geçiş yaptıktan sonra şaşırdı, ilk fark sitenin hızıydı, ikincisi varsayılan olarak güzel FLAT tasarımıydı.