Det har været et stykke tid siden Stil fliser blev bragt ind i denne verden af et menneskes geni Samantha Warren . For de af jer, der måske har kigget på dem en gang og så glemt hvad de er, her er en hurtig forklaring:
Style Fliser er en slags skabelon, der giver dig mulighed for hurtigt at teste og forhåndsvise forskellige farver, skrifttyper, teksturer og andre æstetiske stilrelaterede muligheder for dine designs, før du opretter en højfidelighedsspor, men efter at trådrammerne er lavet. De er beregnet til at blive præsenteret for kunder, interessenter eller andre interesserede parter ret tidligt i designprocessen. På den måde kan du komme forbi bekymringer over skrifttypevalget, og spørgsmål som "Kan vi få en" flashier "rød?"
Enkelt sagt, bør du bruge dem, selvom kun for dig selv. Det kan virke som en masse problemer med at tilføje endnu et skridt til designprocessen; men jeg kan fortælle dig fra personlig erfaring, at det er det værd. Jeg designer i browseren: at stirre på et tomt Photoshop lærred kan være skræmmende; stirrer på et tomt browservindue synes at ramme det meget hårdere.
Den følelse af retning, der tilvejebringes ved at oprette en stilflise gør det meget lettere at designe resten af webstedet. Det er intet så komplekst eller forstridende som en stilguide; dermed giver det både et sted at starte og friheden til at justere tingene som du går sammen.
Dette medfører imidlertid et lille problem med de oprindelige Style Tiles. De er PSD'er. Browserbaserede designere som mig selv vil have browserbaserede stilfliser. Vi vil gerne se, hvordan disse ting kommer til at se på internettet trods alt og på så mange enheder som muligt.
Flere mennesker er allerede gået langt foran os på den front. Der er præfabrikerede skabeloner til folk, der ønsker at komme i gang med at lave Style Tiles i deres browser. Tjek dem ud:
De dejlige mennesker hos Sparkbox skabte en lydhør Style Tile skabelon baseret på HTML og Sass. Det er en af de enklere muligheder, som det ses i demoen, men koden er godt kommenteret. De gik selv og inkluderede valgfrie scripts for at gøre det kompatibelt med IE 7 og nedenunder, hvis din klient ikke har opdateret deres browser i ... for evigt.
Lavet af Namanyay Goel , Webstiles har meget til fælles med de andre løsninger på denne liste. Hvad gør dem anderledes er, at de blev bygget med de mindre kendte (nogle ville sige undervurderet) Stylus CSS forprocessor.
Hvis du arbejder med kompassrammen sammen med ting som Ruby og Sass, så prøv denne på for størrelse. Den kan installeres som enhver anden Ruby perle, så det skal falde ret pænt ind i dit arbejdsstrøm. Interessant nok kan body copy "genereres" via en Sass-variabel og indholdet: attribut. Det hele er designet, så du behøver aldrig at røre ved HTML'en.
Det Responsive Boilerplate til Style Tiles bringer nogle ret hårde drop-skygger med det, men det er lydhørt og bruger intet mere kompliceret end klassisk HTML og CSS. Ingen rammer, ingen forprocessorer, intet. Det er et godt udgangspunkt, hvis du bare vil åbne den i et tekstredigeringsprogram og gå.
Med disse mange præ-made muligheder derude, hvorfor vil du gerne bygge dine egne HTML / CSS Style Fliser fra bunden? Virker som et spild af tid? Nå ja og nej.
Hvis du laver et simpelt websted, og du ikke har alt indhold planlagt endnu, eller hvis klienten ikke har sendt det, vil en af de forhåndsdefinerede indstillinger fungere fint. Men hvis du opbygger en kompleks webapp eller et meget stort websted med mange forskellige indholdstyper eller brugergrænseelementer, vil du måske gerne lave en Style Tile-skabelon fra bunden.
De eksisterende er ikke bare ansvarlige for det store udvalg af mulige indhold og elementtyper derude. Således vil du måske have en stilflise, der indeholder en indlejret video, lydafspiller eller kort. Du kan måske have en, der viser en fanebladet interface eller en accordeonmenu.
Hvis du opbygger et websted, der afhænger af visse usædvanlige brugergrænsefladningselementer, kan du måske lave en Style Tile-skabelon, der indeholder disse funktioner.
Det behøver ikke at være så svært. Du skal blot oprette et simpelt to-tre kolonne layout og starte med at inkludere de visuelle elementer, der vil være vigtigst for dit design, baseret på indholdet / funktionaliteten. Disse vil omfatte:
Der er generelt ingen grund til at gøre det til produktionsklar kode for alle browsere. Hold det enkelt, hold det til HTML5. Medmindre du bruger et ikke-standardbrugerelementelement, der skal kodes fra bunden i HTML og CSS, skal du ikke genere JavaScript.
Den bedste del? Du får til at forfine og genbruge alle de relevante CSS, da du begynder at kode din browserbaserede mockup!
Style Fliser er mere end værd at se på, hvis du ikke allerede bruger dem.
Vis dem til kunder, hold dem til dig selv, brug de præfabrikerede muligheder eller rul din egen ... det er ligegyldigt. Bare at have den følelse af stilistisk retning vil gøre det nemmere at udfylde det tomme browservindue.