Minęło trochę czasu odkąd Style płytek zostali sprowadzeni na ten świat przez geniusza jednego Samantha Warren . Dla tych z was, którzy mogli na nie spojrzeć raz, a potem zapomnieli, jakie są, oto krótkie wyjaśnienie:
Płytki stylów to rodzaj szablonu, który pozwala szybko przetestować i wyświetlić podgląd różnych kolorów, czcionek, tekstur i innych opcji związanych ze stylem, związanych ze stylem, zanim utworzysz makietę o wysokiej dokładności, ale po wykonaniu ramek drucianych. Są przeznaczone do przedstawienia klientom, interesariuszom lub innym zainteresowanym stronom dość wcześnie w procesie projektowania. W ten sposób możesz uzyskać wcześniejsze obawy dotyczące wyboru czcionki i pytania typu "Czy możemy mieć" szybszy "czerwony?
Mówiąc prosto, powinieneś ich używać, nawet jeśli jest to tylko dla ciebie. Może wydawać się, że masz problem z dodaniem kolejnego kroku do procesu projektowania; ale mogę powiedzieć z własnego doświadczenia, że warto. Projektuję w przeglądarce: patrzenie na puste płótno Photoshopa może być zniechęcające; wpatrywanie się w puste okno przeglądarki wydaje się uderzać o wiele trudniej.
Poczucie kierunku zapewniane przez tworzenie płytek stylów znacznie ułatwia projektowanie pozostałej części witryny. To nic tak skomplikowanego ani ograniczającego jak przewodnik stylu; w ten sposób daje zarówno miejsce do rozpoczęcia, jak i swobodę w dostosowywaniu rzeczy w miarę upływu czasu.
To jednak powoduje niewielki problem z oryginalnymi płytkami stylów. To PSD. Projektanci korzystający z przeglądarek, tacy jak ja, będą chcieli korzystać z kafli stylów opartych na przeglądarce. Chcemy zobaczyć, jak to wszystko będzie wyglądało w sieci, i na jak największej liczbie urządzeń.
Kilka osób już na tym froncie wyprzedziło nas. Są gotowe szablony dla osób, które chcą rozpocząć tworzenie stylów w przeglądarce. Sprawdź je:
Urocze osoby w Sparkbox utworzyły responsywny szablon stylu kafelkowego oparty na HTML i Sass. Jest to jedna z prostszych opcji, jak widać w wersji demonstracyjnej, ale kod jest dobrze komentowany. Udało im się nawet dołączyć opcjonalne skrypty, aby była zgodna z IE 7 i poniżej, na wypadek gdyby twój klient nie zaktualizował swojej przeglądarki ... na zawsze.
Stworzone przez Namanyay Goel , Webstiles mają wiele wspólnego z innymi rozwiązaniami z tej listy. Tym, co je wyróżnia, jest to, że zostały zbudowane z mniej znanym (niektórzy twierdzą, że jest niedoceniany) Pre-procesor Stylusa CSS.
Jeśli pracujesz w środowisku Compass, wraz z takimi rzeczami jak Ruby i Sass, spróbuj ten na rozmiar. Może być zainstalowany tak, jak każdy inny klejnot Ruby, więc powinien całkiem spłynąć do twojego przepływu pracy. Co ciekawe, kopię ciała można "wygenerować" za pomocą zmiennej Sass i atrybutu content :. Całość została zaprojektowana, więc nigdy nie musisz dotykać kodu HTML.
The Responsywna płyta grzewcza do płytek stylowych niesie ze sobą dość ostre cienie, ale jest responsywny i nie wymaga niczego bardziej skomplikowanego niż klasyczny HTML i CSS. Bez frameworków, bez preprocesorów, nic. To dobry punkt wyjścia, jeśli chcesz tylko otworzyć go w edytorze tekstowym i iść.
Z tymi wieloma gotowymi opcjami, dlaczego chciałbyś budować własne płytki stylów HTML / CSS od zera? Wydaje się, że to strata czasu? Cóż, tak i nie.
Jeśli tworzysz prostą witrynę i nie masz jeszcze całej zaplanowanej treści lub klient jej nie wysłał, jedna z gotowych opcji będzie dobrze. Jeśli jednak tworzysz złożoną aplikację internetową lub bardzo dużą witrynę z wieloma różnymi typami treści lub elementami interfejsu użytkownika, możesz chcieć utworzyć szablon stylów od początku.
Istniejące nie uwzględniają jedynie zakresu możliwych treści i typów elementów. W związku z tym możesz potrzebować żetonu stylu, który zawiera osadzone wideo, odtwarzacz audio lub mapę. Możesz chcieć taki, który prezentuje interfejs z kartami lub menu akordeonowe.
Jeśli tworzysz witrynę zależną od pewnych rzadkich elementów interfejsu użytkownika, możesz utworzyć szablon stylów, który zawiera te funkcje.
To nie musi być takie trudne. Po prostu ustaw prosty układ dwóch na trzy kolumny i zacznij od elementów wizualnych, które będą najważniejsze dla twojego projektu, w oparciu o zawartość / funkcjonalność. Obejmują one:
Generalnie nie ma potrzeby tworzenia kodu gotowego do produkcji dla wszystkich przeglądarek. Zachowaj prostotę, zachowaj w HTML5. Jeśli nie używasz niestandardowego elementu interfejsu, który musi być kodowany od zera w HTML i CSS, nie przejmuj się JavaScriptem.
Najlepsza część? Dopracowujesz i ponownie wykorzystasz wszystkie odpowiednie CSS, rozpoczynając kodowanie makiety z przeglądarki!
Płytki stylów są warte więcej niż zaglądanie, jeśli jeszcze ich nie używasz.
Pokaż je klientom, zachowaj je dla siebie, skorzystaj z gotowych opcji lub stwórz własne ... to nie ma znaczenia. Już samo poczucie stylistyki sprawi, że wypełnienie tego pustego okna przeglądarki będzie o wiele łatwiejsze.
Przedstawiony obraz, Studio projektowe przez Anne-Sophie Leens