Už je to chvíli Stylové dlaždice byly do tohoto světa přineseny geniálními Samantha Warrenová . Pro ty z vás, kteří se na ně jednou dívali a pak zapomněli, co jsou, je to rychlé vysvětlení:

Stylové dlaždice jsou jakýmsi šablonou, která vám umožní rychle testovat a prohlížet si různé barvy, písma, textury a další možnosti související s estetickým stylem pro vaše návrhy předtím, než vytvoříte vysoce fiktivní maketu, ale poté, co se vytvoří rám. Jsou určeny k tomu, aby byly prezentovány klientům, zúčastněným stranám nebo jiným zúčastněným stranám poměrně brzy v procesu navrhování. Tímto způsobem můžete získat obavy ohledně volby písma a otázky jako "Můžeme mít" blikající "červenou barvu?"

Jednoduše řečeno, měli byste je používat, i když jen pro sebe. Mohlo by to připadat spousta potíží přidat další krok k procesu návrhu; ale mohu vám říci z osobní zkušenosti, že to stojí za to. Navrhuji v prohlížeči: dívám se na prázdné plátno Photoshopu může být skličující; že se dívám na prázdné okno prohlížeče, zdá se, že to zasáhlo mnohem tvrdší.

Smyslem směru poskytovaného vytvořením štítu dlažby je mnohem snazší navrhování zbytku místa. Není to nic tak složitého nebo zúžení jako stylový průvodce; tak dává oběma místům, které začínají, a svobodě přizpůsobovat věci tak, jak budete jít.

To však přináší malý problém s původními stylovými dlaždicemi. Jsou to PSD. Návrháři na bázi prohlížeče, jako já, budou chtít stylové dlaždice založené na prohlížeči. Chceme vidět, jak tyto věci vypadají na webu, koneckonců a na co nejvíce zařízeních.

Předem připravené možnosti

Několik lidí už na naší frontě už prošlo. K dispozici jsou předem vytvořené šablony pro lidi, kteří chtějí začít ve vytváření stylových dlaždic v prohlížeči. Zkontroluj je:

Stylový prototyp

Krásní lidé v Sparkboxu vytvořili šablony šablony Style Style založené na HTML a Sass. Je to jedna z jednodušších možností, jak je vidět v demo, ale kód je dobře komentován. Oni dokonce šli a zahrnovali volitelné skripty, aby byly kompatibilní s IE 7 a níže, pokud váš klient neaktualizoval svůj prohlížeč ... navždy.

Webstiles

Vytvořil Namanyay Goel , Webstiles mají hodně společného s dalšími řešeními v tomto seznamu. To, že je odlišné, je, že byly postaveny s méně známým (někteří by říkali podceněné) Stylus CSS předprocesor.

Dlaždice stylů kompasu

Pokud pracujete s rámem Compass, spolu s věcmi jako Ruby a Sass, zkuste to toto on pro velikost. Může být nainstalován jako jakýkoliv jiný Ruby klenot, takže by měl do vašeho pracovního toku upustit. Je zajímavé, že kopie těla může být "generována" pomocí proměnné Sass a atributu content:. Celá věc je navržena tak, abyste se nikdy nemuseli dotýkat HTML.

Odpovídající kotoučová deska pro stylové dlaždice

The Odpovídající kotoučová deska pro stylové dlaždice přináší s sebou spousty krutých stínů, ale je citlivý a nepoužívá nic složitějšího než klasické HTML a CSS. Žádné rámce, žádné předprocesory, nic. Je to dobrý výchozí bod, pokud ji chcete otevřít v textovém editoru a jít.

Vytvořte si vlastní

S touto řadou předem připravených možností, proč byste chtěli vytvořit své vlastní HTML / CSS Style dlaždice od začátku? Vypadá to jako ztráta času? No, ano a ne.

Pokud děláte jednoduché stránky a ještě nemáte celý plánovaný obsah nebo klient jej neposlal, jedna z předem připravených voleb bude fungovat dobře. Pokud však vytváříte komplexní webovou aplikaci nebo velmi rozsáhlý web s mnoha odlišnými typy obsahu nebo prvky uživatelského rozhraní, můžete vytvořit šablonu stylových dlaždic od začátku.

Stávající ty prostě nepočítají s rozsahem možného obsahu a typů prvků. Můžete tedy chtít Style Tile, který obsahuje vložené video, audio přehrávač nebo mapu. Možná budete chtít jednu, která zobrazuje rozhraní s kartami nebo nabídku harmoniků.

Pokud vytváříte web, který závisí na určitých neobvyklých prvcích uživatelského rozhraní, můžete vytvořit šablonu stylových dlaždic, která obsahuje tyto funkce.

To nemusí být tak těžké. Stačí nastavit jednoduché uspořádání dvou a tří sloupců a začít s vizuálními prvky, které budou pro váš design nejdůležitější, založené na obsahu / funkčnosti. Patří sem:

  • barvy, vzory a / nebo textury;
  • typografické prvky (nadpisy, odstavce, prvky seznamu, možná bloková slova);
  • styly obrázků (pokud plánujete zahrnout například galerie obrázků);
  • nejčastěji používané prvky formuláře;
  • všechny další prvky uživatelského rozhraní, které považujete za důležité pro návrh, založené na obsahu a struktuře webu.

Obecně není nutné, aby byl pro všechny prohlížeče kód připravený k výrobě. Udržujte je jednoduché, uložte je na HTML5. Pokud nepoužíváte nestandardní element UI, který musí být kódován od začátku v HTML a CSS, neobtěžujte JavaScript.

Nejlepší část? Můžete se upřesnit a znovu použít všechny relevantní CSS, jakmile začnete kódovat vaše prohlížeče-založené mockup!

Závěr

Style Dlaždice jsou spíše než vyhlídky, pokud je již nepoužíváte.

Ukažte je klientům, nechte je na sobě, použijte předem připravené možnosti, nebo si sami přejděte ... na tom nezáleží. Stačí, že tento smysl pro stylový směr bude vyplňování prázdného okna prohlížeče mnohem jednodušší.

Doporučený obrázek, designové studio přes Anne-Sophie Leensová