Es ist eine Weile her, seit Stil Fliesen wurden von dem Genie eines Menschen in diese Welt gebracht Samantha Warren . Für diejenigen von euch, die sie einmal angesehen haben und dann vergessen haben, was sie sind, hier ist eine kurze Erklärung:
Stilkacheln sind eine Art Vorlage, mit der Sie verschiedene Farben, Schriftarten, Texturen und andere ästhetische Optionen für Ihre Designs schnell testen und in einer Vorschau anzeigen können, bevor Sie ein High-Fidelity-Modell erstellen, aber nachdem die Drahtrahmen erstellt wurden. Sie sollen Kunden, Stakeholdern oder anderen interessierten Parteien schon zu einem frühen Zeitpunkt des Designprozesses vorgestellt werden. Auf diese Weise können Sie Bedenken über die Schriftartwahl und Fragen wie "Können wir ein" auffälligeres Rot "haben?"
Einfach gesagt, Sie sollten sie verwenden, auch wenn nur für Sie selbst. Es könnte eine Menge Ärger bedeuten, dem Designprozess einen weiteren Schritt hinzuzufügen. aber ich kann Ihnen aus eigener Erfahrung sagen, dass es sich lohnt. Ich entwerfe im Browser: Das Anschauen einer leeren Photoshop-Leinwand kann entmutigend sein; Ein leeres Browserfenster zu starren, scheint viel schwieriger zu werden.
Der Richtungssinn, der durch das Erstellen eines Style-Tile bereitgestellt wird, erleichtert das Entwerfen des Rests der Site. Es ist nichts so komplex oder einschränkend wie ein Style Guide; Somit gibt es sowohl einen Platz zum Starten als auch die Freiheit, die Dinge anzupassen, während Sie weitermachen.
Dies bringt jedoch ein kleines Problem mit den ursprünglichen Style Tiles. Sie sind PSDs. Browser-basierte Designer wie ich werden Browser-basierte Style Tiles wollen. Wir wollen sehen, wie das Zeug schließlich im Web aussehen wird und auf so vielen Geräten wie möglich.
Mehrere Leute sind uns an dieser Front schon weit voraus. Es gibt vorgefertigte Vorlagen für Leute, die mit der Erstellung von Style Tiles in ihrem Browser beginnen möchten. Schau sie dir an:
Die lieben Leute von Sparkbox haben ein Responsive Style Kachel Vorlage basierend auf HTML und Sass. Es ist eine der einfacheren Optionen, wie in der Demo zu sehen, aber der Code ist gut kommentiert. Sie gingen sogar und schlossen optionale Skripte ein, um es kompatibel mit IE 7 und darunter zu machen, falls Ihr Kunde seinen Browser nicht für immer aktualisiert hat.
Erstellt von Namanyay Goel , Webstiles haben viele Gemeinsamkeiten mit den anderen Lösungen auf dieser Liste. Was sie anders macht, ist, dass sie mit dem weniger bekannten (etwas unterschätzten) Stylus CSS Pre-Prozessor gebaut wurden.
Wenn Sie mit dem Compass-Framework zusammen mit Dingen wie Ruby und Sass arbeiten, versuchen Sie es dieses auf für Größe. Es kann wie jedes andere Ruby-Juwel installiert werden, also sollte es ganz ordentlich in deinen Arbeitsablauf fallen. Interessanterweise kann Bodycopy über eine Sass-Variable und das content: -Attribut "generiert" werden. Das Ganze ist so konzipiert, dass Sie nie den HTML-Code berühren müssen.
Das Responsive Boilerplate für Style Tiles bringt einige ziemlich harte Schlagschatten mit sich, aber es reagiert und verwendet nichts komplizierteres als klassisches HTML und CSS. Keine Frameworks, keine Pre-Prozessoren, nichts. Es ist ein guter Ausgangspunkt, wenn Sie es nur in einem Texteditor öffnen und gehen möchten.
Mit diesen vielen vorgefertigten Optionen, warum sollten Sie Ihre eigenen HTML / CSS Style Tiles von Grund auf neu erstellen? Scheint wie eine Zeitverschwendung? Nun, ja und nein.
Wenn Sie eine einfache Website erstellen und noch nicht alle Inhalte geplant haben oder der Kunde sie nicht gesendet hat, ist eine der vorgefertigten Optionen in Ordnung. Wenn Sie jedoch eine komplexe Webanwendung oder eine sehr große Website mit vielen verschiedenen Inhaltstypen oder Benutzeroberflächenelementen erstellen, empfiehlt es sich, eine Vorlage für einen Stilbereich neu zu erstellen.
Die vorhandenen beschränken sich nicht auf die schiere Palette möglicher Inhalts- und Elementtypen. Daher möchten Sie möglicherweise eine Stilkachel mit einem eingebetteten Video, einem Audioplayer oder einer Karte. Vielleicht möchten Sie eine, die eine Tab-Benutzeroberfläche oder ein Akkordeon-Menü zeigt.
Wenn Sie eine Site erstellen, die von bestimmten ungewöhnlichen Elementen der Benutzeroberfläche abhängt, möchten Sie möglicherweise eine Style-Tile-Vorlage erstellen, die diese Features enthält.
Es muss nicht so schwer sein. Richten Sie einfach ein einfaches zwei-drei-Spalten-Layout ein und beginnen Sie, die visuellen Elemente aufzunehmen, die für Ihr Design am wichtigsten sind, basierend auf dem Inhalt / der Funktionalität. Dazu gehören:
Im Allgemeinen ist es nicht erforderlich, für alle Browser einen produktionsfähigen Code zu erstellen. Halten Sie es einfach, behalten Sie es auf HTML5. Sofern Sie kein nicht standardmäßiges Benutzeroberflächenelement verwenden, das in HTML und CSS neu programmiert werden muss, sollten Sie sich nicht mit JavaScript beschäftigen.
Der beste Teil? Sie können alle relevanten CSS verfeinern und wiederverwenden, während Sie mit der Programmierung Ihres browserbasierten Modells beginnen!
Stilfliesen sind mehr als einen Blick wert, wenn Sie sie nicht bereits verwenden.
Zeigen Sie sie Kunden, behalten Sie sie für sich, verwenden Sie die vorgefertigten Optionen oder rollen Sie Ihre eigenen ... es spielt keine Rolle. Nur mit diesem Sinn für Stilrichtung wird das Ausfüllen dieses leeren Browserfensters so viel einfacher.