Se on ollut jonkin aikaa Tyyli laatat tuodaan tähän maailmaan jonkun neroilla Samantha Warren . Niille teistä, jotka olisivat voineet tarkastella niitä kerran ja sitten unohtaa, mitä he ovat, tässä on nopea selitys:
Tyylilevyt ovat eräänlainen malli, jonka avulla voit nopeasti testata ja esikatsella erilaisia värejä, fontteja, tekstuureja ja muita esteettisiä tyyliin liittyviä vaihtoehtoja malleille ennen kuin luot luotettavaa mockup-mallia, mutta sen jälkeen, kun lanka-kehykset on tehty. Ne on tarkoitettu esitettäväksi asiakkaille, sidosryhmille tai muille kiinnostuneille tahoille melko aikaisin suunnitteluprosessissa. Näin voit saada huolesi fontin valinnasta, ja kysymyksiä, kuten "Voimmeko olla" flashier "punainen?"
Yksinkertaisesti sanottuna, sinun pitäisi käyttää niitä, vaikka vain itsellesi. Vaikuttaa siltä, että on vaikeaa lisätä vielä yksi askel suunnitteluprosessiin; mutta voin kertoa henkilökohtaisesta kokemuksesta, että se on sen arvoista. Suunnittelen selaimessa: katsomalla tyhjää Photoshop-kangasta voi olla pelottava; katsomassa tyhjää selainikkunaa vaikuttaa siltä, että paljon vaikeampi.
Suunnitteluun perustuva suuntaustyyli tuottaa tyylitiilen, mikä tekee muusta sivustosta paljon helpompaa. Se ei ole niin monimutkainen tai suppeampi kuin tyylisuunnitelma; Näin se antaa sekä paikan aloittaa että vapautta säätää asioita, kun menet.
Tämä aiheuttaa kuitenkin pienen ongelman alkuperäisten tyylihuokosten kanssa. He ovat PSD: itä. Selainpohjaiset suunnittelijat, kuten minä, haluavat selainpohjaisia tyylihuokosia. Haluamme nähdä, miten tämä tavara aikoo tarkastella Webissä loppujen lopuksi ja mahdollisimman monella laitteella.
Useat ihmiset ovat jo menneet etukäteen eteenpäin. On olemassa valmiita malleja ihmisille, jotka haluavat aloittaa tekemällä Style Tiles -selaimesta. Katso ne:
Ihmeet ihmiset Sparkboxissa loivat herkkä Style Tile -mallia HTML ja Sass. Se on yksi yksinkertaisimmista vaihtoehdoista, kuten demossa, mutta koodi on hyvin kommentoinut. He jopa menivät ja sisällyttivät valinnaisia skriptejä, jotta se olisi yhteensopiva IE 7: n ja sen alapuolella, jos asiakas ei ole päivittänyt selaimellaan ... ikuisesti.
Luonut Namanyay Goel , Webstiles on paljon yhteistä muiden tämän luettelon ratkaisujen kanssa. Mikä tekee niistä erilaiset on se, että ne on rakennettu vähemmän tunnettu (jotkut sanoisivat alittavan) Stylus CSS esiprosessori.
Jos työskentelet Compass-kehyksen kanssa, samoin kuin Ruby ja Sass, kokeile Tämä on kokoon. Se voidaan asentaa kuten mikä tahansa muu Ruby-helmi, joten sen pitäisi pudota varsin siististi työnkulkuun. Kiinnostavaa on, että kehon kopio voidaan "tuottaa" Sass-muuttujan ja sisällön attribuutin välityksellä. Koko asia on suunniteltu, joten sinun ei tarvitse koskettaa HTML-koodia.
Responsive Boilerplate for Style Tiles Tyyppihiihtolevyille vastaava kuormalevy tuo siihen melko ankaria pudotusvarjoja, mutta se on herkkä eikä käytä mikään monimutkaisempi kuin klassinen HTML ja CSS. Ei kehyksiä, ei esiprosessoreita, mitään. Se on hyvä lähtökohta, jos haluat vain avata sen tekstieditorissa ja mennä.
Tämän monia valmiita vaihtoehtoja siellä, miksi haluat rakentaa omia HTML / CSS tyyli laatat tyhjästä? Näyttää olevan ajan hukka? No, kyllä ja ei.
Jos teet yksinkertaisen sivuston, ja sinulla ei ole vielä kaikkea suunniteltua sisältöä, tai asiakas ei ole lähettänyt sitä, yksi esiasennetuista vaihtoehdoista toimii hyvin. Jos kuitenkin rakennat monimutkaista verkkosovellusta tai erittäin suurta sivustoa, jossa on paljon erillisiä sisältötyyppejä tai käyttöliittymän elementtejä, voit tehdä Tyylilevyn mallin tyhjästä.
Nykyiset eivät vain ota huomioon mahdollisia sisältö- ja elementtityyppejä siellä. Siksi saatat haluta tyylitiili, joka sisältää upotetun videon, äänisoittimen tai kartan. Haluat ehkä sellaisen, joka näyttää välilehdellä varustetun käyttöliittymän tai harmonisen valikon.
Jos rakennat sivustoa, joka riippuu tietyistä harvinaisista käyttöliittymän elementeistä, saatat haluta tehdä Style Tile -mallin, joka sisältää kyseiset ominaisuudet.
Sen ei tarvitse olla niin kova. Aseta yksinkertainen kolmiulotteinen sarakekokoelma ja aloita mukaan lukien suunnittelun kannalta tärkeimmät visuaaliset elementit, jotka perustuvat sisältöön / toiminnallisuuteen. Näihin kuuluvat:
Yleensä ei ole tarvetta tehdä valmistajille valmiita koodeja kaikille selaimille. Pidä se yksinkertaisena, säilytä se HTML5: ssä. Ellei käytät ei-standardin käyttöliittymän elementtiä, joka on koodattava tyhjästä HTML- ja CSS-muodossa, älä järkeä JavaScriptin kanssa.
Paras osa? Voit tarkentaa ja käyttää uudelleen kaikkia asiaankuuluvia CSS-koodeja, kun aloitat koodauksen selainpohjaisesta mallistasi!
Tyylilevyt ovat enemmän kuin kannattaa katsoa, jos et käytä niitä jo.
Näytä ne asiakkaille, pidä ne itse, käytä valmiita vaihtoehtoja tai rullata omia ... sillä ei ole väliä. Vain sillä tyylisuuntaisella suuntauksella täytetään tyhjän selainikkunan niin paljon helpompaa.