O zamandan beri bir süre geçti Stil Fayans bu dünyaya bir deha tarafından getirildi Samantha Warren . Onlara bir kez bakmış olabilecekleri ve daha sonra ne olduklarını unutmuş olanlar için hızlı bir açıklama:
Stil Döşeme, yüksek kaliteli bir mockup oluşturmadan önce, ancak tel çerçeveler oluşturulduktan sonra tasarımlarınız için çeşitli renkleri, yazı tiplerini, dokuları ve diğer estetik stili ile ilgili seçenekleri hızlı bir şekilde test etmenizi ve önizlemenizi sağlayan bir şablon türüdür. Müşteriler, paydaşlar veya diğer ilgili taraflara tasarım sürecinde oldukça erken sunulması gerekiyordu. Bu şekilde, yazı tipi seçimi ile ilgili endişelerinizi ve “Flashier'i kırmızı alabilir miyiz?” Gibi sorular alabilirsiniz.
Basitçe söylemek gerekirse, sadece kendiniz için bile olsa bunları kullanmalısınız. Tasarım sürecine bir adım daha eklemek çok zor gibi görünebilir; ama kişisel deneyimlerinden buna değdiğini söyleyebilirim. Tarayıcıda tasarım yapıyorum: boş bir Photoshop tuvaline bakmak göz korkutucu olabilir; boş bir tarayıcı penceresine bakma o kadar zor görünüyor.
Bir Stil Çini oluşturarak sağlanan yön duygusu, sitenin geri kalanını daha kolay tasarlamayı sağlar. Bir stil rehberi kadar karmaşık ya da karmaşık bir şey değil; Böylece, hem başlamak için bir yer hem de işlerinizin ilerleyişini ayarlama özgürlüğü verir.
Bununla birlikte, bu orijinal Style Fayans ile küçük bir sorun getiriyor. Onlar PSD'ler. Benim gibi tarayıcı tabanlı tasarımcılar tarayıcı tabanlı Stil Fayans isteyecektir. Bu şeylerin Web’de nasıl ve ne kadar çok sayıda cihazda görüneceğini görmek istiyoruz.
Bu cephede birkaç kişi zaten önümüzde ilerledi. Tarayıcılarında Stil Çini yapmakla başlamak isteyen kişiler için önceden hazırlanmış şablonlar var. Onları kontrol et:
Sparkbox'taki güzel insanlar bir duyarlı Stil Çini şablonu HTML ve Sass dayanmaktadır. Demoda görüldüğü gibi daha basit seçeneklerden biri, ancak kod iyi yorumlandı. İstemciniz tarayıcısını her zaman güncellemediyse, IE 7 ve altında uyumlu hale getirmek için isteğe bağlı komut dosyaları bile eklediler ve dahil ettiler.
Tarafından yaratıldı Namanyay Goel , Webstiles Bu listedeki diğer çözümler ile ortak bir çok şey var. Onları farklı kılan şey, daha az bilinen (bazılarının altını çizdiğini söyleyen) Stylus CSS ön-işlemci ile oluşturulduklarıdır.
Compass framework ile çalışıyorsanız, Ruby ve Sass gibi şeylerle birlikte deneyin. Bu boyut için. Başka bir Ruby gem gibi kurulabilir, bu yüzden iş akışınıza oldukça düzgün bir şekilde düşmelidir. İlginç bir şekilde, vücut kopyası bir Sass değişkeni ve content: özniteliği aracılığıyla “üretilebilir”. Her şey tasarlandığından, HTML'ye asla dokunmanız gerekmez.
Responsive Boilerplate for Style Tiles Stil Fayans için Duyarlı Boilerplate onunla oldukça sert bir damla gölgesi getiriyor, ama duyarlı ve klasik HTML ve CSS'den daha karmaşık bir şey kullanmıyor. Çerçeve yok, ön işlemciler yok, hiçbir şey yok. Sadece bir metin editöründe açmak ve gitmek istiyorsanız iyi bir başlangıç noktasıdır.
Dışarıda bu çok sayıda önceden hazırlanmış seçenekle, neden kendi HTML / CSS Stil Döşemelerinizi sıfırdan oluşturmak istiyorsunuz? Zaman kaybı gibi mi görünüyor? Şey, evet ve hayır.
Basit bir site oluşturuyorsanız ve henüz planlanan tüm içeriğe sahip değilseniz veya müşteriniz göndermemişse, önceden yapılmış seçeneklerden biri iyi olacaktır. Ancak, karmaşık bir web uygulaması veya çok sayıda farklı içerik türü veya kullanıcı arayüzü öğesi içeren çok büyük bir site oluşturuyorsanız, Stil Çini şablonunu sıfırdan oluşturmak isteyebilirsiniz.
Mevcut olanlar, oradaki olası içerik ve öğe türlerini dikkate almazlar. Böylece, gömülü bir video, ses çalar veya harita içeren bir Tarz Çini isteyebilirsiniz. Sekmeli bir arayüz veya bir akordeon menüsü sergileyen birini isteyebilirsiniz.
Belirli nadir kullanıcı arayüzü öğelerine bağlı bir site oluşturuyorsanız, bu özellikleri içeren bir Stil Çini şablonu oluşturmak isteyebilirsiniz.
O kadar zor olmak zorunda değil. Basit bir iki üç sütun düzeni oluşturun ve içerik / işlevsellik temelinde tasarımınız için en önemli görsel öğeleri dahil etmeye başlayın. Bunlar şunları içerecektir:
Genel olarak tüm tarayıcılar için üretime hazır kodlar yapmaya gerek yoktur. Basit tut, HTML5'e sakla. HTML ve CSS'de sıfırdan kodlanması gereken standart olmayan bir UI öğesi kullanmıyorsanız, JavaScript ile uğraşmayın.
En iyi kısım? Tarayıcı tabanlı modelinizi kodlamaya başladığınızda ilgili tüm CSS'yi hassaslaştırıp yeniden kullanabilirsiniz!
Stil Fayans, zaten onları kullanmıyorsanız içine bakmaktan daha fazlasıdır.
Onları müşterilere gösterin, bunları kendinize saklayın, önceden hazırlanmış seçenekleri kullanın veya kendi yuvarlanın… önemli değil. Sadece bu stilistik yön duygusuna sahip olmak, bu boş tarayıcı penceresine doldurmayı çok daha kolaylaştıracaktır.
Özellikli resim, tasarım Stüdyosu üzerinden Anne-Sophie Leens