CSS

Stil Aşamasını Duyurmak: Bir Topluluk CSS Vitrini

Sevgili CSS topluluğu:

Sizi, halka açık bir şekilde öğrenirken hem CSS hem de web tasarım becerilerinize meydan okuma fırsatına sahip olduğunuz yeni bir projeye katılmaya davet ediyorum.

Stil Aşaması: Topluluk katkılarıyla şekillendirilmiş modern bir CSS vitrini

StyleStage.dev sadece proje hakkında bilgilendirici bir açılış sayfası değil – sizin gibi katkıda bulunanlar tarafından yeniden şekillendirilmesi amaçlanan temel HTML’dir!

Style Stage, moda dünyasının ruhunu yeniden canlandırmak için çılgın bir fikir olarak başladı.
CSS Zen Bahçesi hangi tarafından yaratıldı Dave Shea ve bu, 2013’te gönderimler durdurulana kadar “CSS tabanlı tasarım yoluyla neler yapılabileceğinin” bir gösterimini sağladı.

Mevcut mülkler, inşa etmek için elimizde bulunan araçlar, erişilebilirlik endişelerini ele alma konusundaki daha iyi anlayışımız ve performans etkilerine ilişkin artan farkındalık dahil olmak üzere, CSS alanındaki şeyler o zamandan beri çok gelişti.

Lansman canlı yayınını kaçırdıysanız, işte hafifçe düzenlenmiş tam kayıtlı Twitch yayınıveya konuya göre Twitch öne çıkan koleksiyonu. Bu makaledeki pek çok şeyi ve CSS hakkında daha fazlasını ele aldık ve yeni bir 11ty özelliği ✨ oluşturarak sonuçlandırdık.

Bir projeye en iyi hizmet edecek şeyin CSS’yi doğal haliyle kullanmak ve sistemle bütünleşmek olduğunda, bir çerçeve seçme yönünde artan bir eğilim var. Çağlayan.

Style Stage stil sayfanızı oluşturmak, sayfayı düzenlemek için esnek kutu ve ızgara gibi teknikleri ve ekstra içerik ve yetenek eklemek için sözde öğeler gibi teknikleri keşfetmeniz için sizi zorlayacaktır. Çılgın bir şey tasarlama fırsatını yakalayın! Şimdiye kadar, gradyanlar ve transform: skew() katkıda bulunanlar arasında popüler ✨ diğer modern özelliklerin listesi denemek isteyebileceğiniz şeylerin ilhamı için.

Style Stage, HTML’ye erişimi yasaklayarak (ki zaten semantik ve kendi başına erişilebilirdir), temel konulara yeniden alışırken yaratıcı olmanızı teşvik eder. Ve aksi takdirde hızlı ilerleyen bu sektörde, bunu büyük bir pozitif olarak görüyorum.

Oyun güçlü bir öğretmendir! Erişilebilir ve performanslı kalırken sınırları ne kadar zorlayabilirsiniz? Bunlar, gelecekteki projelerde iş için doğru aracı seçmeniz için sizi donatacak, uygulamaya değer becerilerdir. Doğru araç bir çerçeve olsa bile, daha derin bir anlayışa sahip olacaksınız. nasıl uyguladığınız stiller çalışıyor ve bunları özelleştirme yeteneğinizi geliştiriyor.

Güven bana – “Bunu CSS’de yapabilirim!” demek iyi hissettiriyor.

Büyüyen bir ipucu, fikir ve ilham listesi için, kaynakları görüntüle.

Bültene abone olun yeni stiller ve yeni özelliklerin yayınlanmasıyla ilgili periyodik güncellemeler için. Ayrıca şunları da alabilirsiniz: RSS beslemesi.

Bir Stil Sayfasına Nasıl Katkıda Bulunurum?

Gözden geçirmek StyleStage.dev genişletilmiş ayrıntılar ve kaynak HTML ve CSS için.

Katkıda bulunan olarak katılarak, Stil Aşaması çevrimiçi olduğu, stil sayfası bağlantınız ve tüm varlık bağlantılarınız geçerli kaldığı ve tüm katkıda bulunan yönergelerine uyulduğu sürece çalışmalarınız sağlanan atıfınız ile paylaşılacaktır.

Katkıda bulunma adımlarını inceleyin >

Tüm gönderimler küçültülecek, otomatik ön eki eklenecek ve CC BY-NC-SA lisansı yanı sıra sağladığınız meta verileri kullanarak ilişkilendirme. Tercih ettiğiniz herhangi bir derleme kurulumunu kullanabilirsiniz, ancak son gönderim derlenmiş, küçültülmemiş CSS olmalıdır. Orijinal grafiklerin telif hakkını saklı tutarsınız ve kullanılan tüm grafiklerin uygun şekilde lisanslandığından emin olmalısınız. Yazı tipleri dahil tüm varlık bağlantıları, dış kaynaklara mutlak olmalıdır. Stil sayfaları Github deposuna kaydedilecek ve yönergeleri ihlal eden tespit edilen değişiklikler kaldırılma nedenidir.

Tasarımınızın duyarlı olduğundan ve erişilebilir kontrastı geçtiğinden emin olun (doğrulamak için balta kullanacağız). Animasyonlar şu yollarla kaldırılmalıdır: prefers-reduced-motion. Kullanıcı deneyimini ciddi şekilde etkilememek için gerekirse son teknoloji teknikler bir geri dönüşle gelmelidir. Hiçbir içerik kalıcı olarak gizlenemez ve gizli öğeler erişilebilir bir görüntüleme tekniğine sahip olmalıdır. Sayfa yükleme süresi 3 saniyeyi geçmemelidir.

Tüm yönergeleri inceleyin >

(Olası) Gelecekteki Özellikler

  • karanlık mod geçişi – isteğe bağlı olarak, güvenmek yerine hangi temanın gösterileceğini seçmelerine izin vererek kullanıcı deneyimini iyileştirmek için bir geçiş yapmayı seçin prefers-color-scheme yalnız değerler
  • stil dizini önizleme resimleri – mevcut stillere göz atma deneyimini geliştirmek için

büyük teşekkürler Andy Bell (@hankchizljaw) Projenin temellerini gözden geçirmek ve erken bir teşvikçi olmak için fazladan zaman ayırdığı için! 💫

ayrıca teşekkürler Miriam Suzanne (@MiriSuzanne) projenin nasıl geliştirileceğine dair harika geri bildirimler ve fikirler için 🚀

Proje açıklaması ve yönergeleri, gelen önerilerle daha net hale getirildi. Katie Langerman (@KatieLangerman) 🙌

Ve tabii ki orijinal altı katkıda bulunanlar – harika stil sayfalarınızı oluşturmak için kısa bir süre içinde zaman harcayarak bu projeyi hayata geçirmeye yardımcı olduğunuz için çok teşekkürler!

  • Style Stage fikri 2 Temmuz 2020’de ortaya çıktı ve proje 10 Temmuz 2020’de başladı.
  • Favori statik site oluşturucum üzerine kurulu, 11 geliştirdiğim bir marştan başlayarak
  • Barındırılan netleştir
  • Ana Sahne teması, 100 deniz feneri ve PageSpeed ​​puanının yanı sıra 0,502 saniyelik bir hız endeksi alır 🙌

İşte orijinal 6 katkıda bulunanlar:

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu