Verkkokulttuuri: Grid-pohjaiset ulkoasumallit
Semanttinen verkko on tuonut uuden sukupolven Internet-teknologiaan. Koska suunnittelijat ja kehittäjät toimivat yhdessä web-sääntöjen uudelleen määrittelemiseksi, avoimen lähdekoodin hankkeiden määrä ja kolmannen osapuolen sovellusliittymät kasvavat edelleen.
Verkkovastaavien mielipiteet eroavat verkkojärjestelmien käytöstä. Monet väittävät, että ruudukkoasetusten asettaminen rajoittaa suunnittelijoiden luovuutta. Toiset väittävät, että verkko tarjoaa tieteellisen perustan, joka on suunniteltu täydelliseksi.
Molemmat osapuolet tarjoavat mielenkiintoisia perusteluja. Nämä ideat ovat tulleet osa ainutlaatuista verkkokulttuuria, jolle on ominaista vaikutusvaltaiset suunnittelusäännöt ja avoimen lähdekoodin hankkeet.
Verkko ei ole master-avain täydellisen suunnittelun kannalta. Matematiikka on kuitenkin osoittanut, että tietyt suunnitteluspesifikaatiot tarjoavat parhaan suhteen sivuelementeille ja layoutille. Jos olet kuullut tästä ennen , saatat tuntea monista vaihtoehdoista, joita grid-pohjaiset ulkoasut tarjoavat suunnittelijoille.
Vertailu klassiseen verkkoon
Vanhemmat sukupolvet käyttivät suunnittelua ohjausmekanismina. Heidän mallinsa antoivat tietoja täsmällisesti ja helposti hallittavalla tavalla. Tämä pätee vielä tänä päivänä, mutta nämä vanhanaikaiset suunnitteluperiaatteet poistetaan.
Heidän valossaan uusi verkkokulttuuri sekoitetaan. Avoimen standardin ja protokollan kulttuuri, vapaasti jaettu lähdekoodi ja tehokkaat alustat, joita ohjelmoijat ympäri maailmaa ovat hoitaneet.
Yksi syy tähän kehitykseen on semanttisen verkon työntekijöiden määrän huomattava lisääntyminen. Taustalla oleva syy johtuu ihmisen ajalta osallistumasta johonkin enemmän kuin itseämme.
Työskentely maksaa päivä on tyydyttävä, mutta ei jotain intohimoinen. Kehittäjät, jotka todella haluavat uusia standardeja, haluavat jättää jälkensä.
Missä ristikot ovat kehittyneet
Ei ole tehty merkittävää tutkimusta, jossa verrataan ennalta asetettuja standardeja ja post-standardien web-suunnittelutapoja. Voimme kuitenkin seurata, miten verkot ovat yleistyneet ajan myötä.
Verkkojärjestelmä perustuu nykyisiin teknologisiin suuntauksiin ja kehityksiin. Tämä sisältää tilastotietoja siitä, kuinka paljon ihmiset käyttävät Internetiä tiettynä ajankohtana, laitteita, joita he käyttävät Internetiin ja heidän laitteidensa näyttösuorituksia ja käyttöjärjestelmiä. Grid-järjestelmät tarjoavat rakenteellisen tasapainon verkkosivujen ulkoasulle. Ne tarjoavat yhdenmukaisia mittauksia ja mahdollistavat joustavuuden puitteiden välillä.
1990-luvun lopulla ei ollut paljon kotitalouskoneita, joiden resoluutio oli yli 800 × 600 ja jopa vähemmän kuin 1024 × 768. Viimeisten 20 vuoden aikana on kehitetty monimutkaisia ja monimutkaisia käyttöjärjestelmät, joilla näytetään paljon suurempia resoluutioita. 1024 × 768 on yleinen asetus näinä päivinä.
Monitorin resoluutiot kasvavat eksponentiaalisesti, eikä tämä trendi näytä hidastavan. Tarkista tiedot taulukosta Verkkotilastot ja trendit ; se kuvaa näytön tarkkuusmittauksia W3Schoolsin kautta.
Visual Grid mallit
Kaikki verkkosivut perustuvat verkkoihin riippumatta siitä, onko suunnittelija tietoinen tästä vai ei. Digitaalinen teos koostuu pikseleistä ja sellaisena se sopii asetettuun leveyteen ja korkeuteen, joka myös tuottaa taiteellisia vaikutuksia visuaalisesti välimatkan ja pisteiden välillä.
Puhun pimeän maalauksen sijaan voit käyttää ruutuja, jotka loistavat valoa projektissa. Gridit suosivat ensin Adobe Photoshopin syntymistä web-suunnittelijoiden de facto -työkaluna. Verkko-oppaat esittelevät tapoja näyttää ja toteuttaa ruudukko- rivejä luomalla mokkia, logoja, grafiikkaa, kuvakkeita ja muuta digitaalista taidetta.
Ajan myötä kehittäjät ottivat käyttöön tämän ja ryhtyivät toteuttamaan järjestelmiä omaan työhönsä. Ristikkomallin suunnittelu Photoshopissa on paljon erilainen kuin luoda samanlainen ulkoasu HTML: ssä ja CSS: ssä.
Kutakin reittiä varten tarvittava työ on huomattavasti erilainen, mutta verkkojärjestelmä itsessään on yleismaailmallinen. Kun avoimet standardit tulevat paikoilleen, nykyinen suunnittelukulttuuri siirtyy kohti verkkoihin perustuvia rakenteita.
Perus HTML- ja CSS-säännöt
Verkot käyttävät joitain HTML-verkkosivujen yleisimpiä ominaisuuksia. HTML-ruudukkoasetukset tuottavat saman yleisen mallin joka kerta.
Rakenne alkaa sisällettävä kääre, joka on tarpeeksi leveä ja sisältää kaikki sarakkeet. Kääre-divisioonan sisällä pitäisi olla kokoelma osa-alueita. Alaryhmien määrän on oltava sama kuin tarvittavien sarakkeiden määrä.
Kahden sarakkeen asettelussa voi olla kaksi jakoa, jotka luokitellaan nimellä .left ja .right . Kaikkien sisäisten sarakkeiden CSS float -ominaisuus on asetettava vasemmalle tai oikealle, kun kääreen pitäisi sisältää a clearfix-luokka .
Voit saada tunnustuksen HTML-koodille, jotta voisit tarkistaa dynaamisen ruudukon layoutgeneraattorin. Suosittu ratkaisu sivun sarakkeesta tarjoaa erinomaisen rakenteen ja tukee useita sarakkeita. Kaikki HTML ja CSS luodaan välittömästi ja läpäisevät standardien vaatimustenmukaisuuden testauksen.
Pudotus
Pehmuste ja vesikourut ovat kiinteitä osia mihinkään ristikkojärjestelmään. Sisällöt, jotka muotoilevat vierekkäin, vaativat välilyöntiä, mikä saattaa aiheuttaa ulkoasun laajentamatta luonnottomasti ja johtaa rikkoutuneisiin sivuihin.
Luo määritelmä pehmustetuissa alueissa käsittelemällä asettelua, jossa on tyhjää sisältöä. Aseta sarakkeet sivulle ja anna heille 1-pikselin ääriviivat eri väreillä. Tämä antaa tarkan kuvan siitä, miltä suunnittelusi näyttää, joka kuvaa kunkin alueen sisällön osaa.
Tämä tekniikka toimii sekä kiinteiden että nestemäisten ulkoasujen kanssa, mikä helpottaa integraatiota nykyisiin verkkoihin.
Kourujen ei myöskään tarvitse noudattaa asetettua kehystä. Olet ehkä halukas uhraamaan sisällön alue lisätäksesi tilaa kahden sarakkeen jakamisen välillä. Avoimet lähdekoodit ovat muokattavissa, ja voit muokata tyylit suoraan tai jopa toteuttaa omasi korvaamaan säännöt ja määrittämään ominaisuudet.
Layout Grid CSS -ominaisuus
layout-grid property is an older CSS specification adopted by Microsoft. ominaisuus on Microsoftin hyväksymää vanhaa CSS-määritystä. Se on kirjoitettu pikakuvakkeeksi asettamaan lukuisia verkko-ominaisuuksia. Erityisesti he viittaavat layout-grid-mode , layout-grid-type , layout-grid-line , layout-grid-char ja layout-grid-char-spacing .
Jokainen näistä voidaan määritellä omaksi ominaisuudeksi, ja se voidaan kirjoittaa ilman yleistä layout-grid . Seuraavassa on lyhyt selitys jokaiselle:
layout-grid-mode
Määrittää minkä tyyppisen tai ulkoasun verkon tilan käyttämisen. Mahdollisia arvoja ovat mmnoneei ruudukkoa,lineinline-ruudukkoelementeille,charmerkkien ja lohkoelementtien osalta jabothkaikkialle.layout-grid-type
Ohjaa, mitä verkkoa käytetään sivun typografian ja sisäisten tekstin elementtien tekemiseen. Arvoparit ovatloose, jota käytetään kiinalaisessa ja korealaisessa tekstissä,strict, jota käytetään japanilaisiin merkkeihin, jafixed, joka käyttää monopinnoitusta soveltamaan yhtä suurta etäisyyttä merkkien välillä kielestä riippumatta.layout-grid-line
Ohjaa ruudukon pituuden rakeisuutta kunlayout-grid-modeon asetettulinetaiboth. Tämä ominaisuus toimii samalla tavoinline-heightja ne voivat saada numeeriset arvot, jotka on asetettu cm, px, pt, em tai prosenttiosuuksina.layout-grid-char
Hallitsee hahmoverkon kokoa elementin tekstisisältöä varten, kunlayout-grid-modeon asetettulinetaiboth. Arvot, jotka tämä ominaisuus hyväksyy, ovat samat kuin edellä ja vaikuttavat suoraan sivun viivan korkeuteen. Ero on selayout-grid-linevaikuttaa sivuryhmään, kun taaslayout-grid-charvaikuttaa tekstin ja merkkien välisverkkoon.layout-grid-char-spacing
Hallitsee merkkien välin kunlayout-grid-modeon asetettuchartaibothjalayout-grid-typeominaisuus on asetettuloose. Tämä ominaisuus käyttäytyy kutenline-heightja sitä tulisi käyttää lohkotason tekstialueille.
Näiden ominaisuuksien luominen on mukauttaa verkkokokoonpanoja aasialaisille sivuille. Aasialaisten kielten merkit vaativat usein mukautettuja sivuasetteluja.
Muissa maissa katsottuna nämä merkit voivat käyttäytyä oudosti ja rikkoa laskentataulukot. Nämä ainutlaatuiset ominaisuudet mahdollistavat paremman visuaalisen muotoilun käyttämällä yksi- tai kaksiulotteista verkkojärjestelmää.
Pystysuuntainen sivun rytmi
Monet graafiset taiteilijat kiilevät pystysuoran välimatkan merkityksen ristikkosuunnittelussa. Gridlines tukee horisontaalista ulkoasua ja kohdistaa pystysuuntaiset sivun elementit ja typografia. Neljä tärkeää ominaisuutta hallitsevat pystysuuntaiset välimatkat: kirjasimen koko, viivan korkeus, ylä- ja ala marginaalit ja pehmuste.
Linjan korkeus on suurin tekijä pystysuunnassa. Sivun teksti skaalataan, kuinka suuret yksittäiset kirjaimet näkyvät ja kuinka paljon tilaa välissä olevat rivit vaativat. Yleensä viivan korkeus määritetään pikseleinä tai emsina riippuen siitä, kuinka joustava asettelu on. Ems ylläpitää typografista yhdenmukaisuutta kaikissa resoluutioissa ja selaimissa. Paras tapa on soveltaa kirjasintyylejä kaikkiin tärkeimpiin HTML-elementteihin, kuten otsakkeisiin, lohkojen lainausmerkkeihin ja kappaleisiin.
Pystysuora rytmi voidaan jälkikäsittää, kun verkko on asetettu paikoilleen, jolloin skaalaus eri ympäristöissä on helppoa. Pöytäkoneiden käyttäjillä on paljon erilaiset kokemukset kuin kannettavat tietokoneet ja mobiilikäyttäjät, jotka käsittelevät paljon pienempää resoluutiota.
Et pysty suunnittelemaan pystysuuntaista kohdistusta täsmällisellä tarkkuudella, mutta useimmissa tapauksissa koulutettu arvaus tuottaa laadukkaita tuloksia.
Kolmasosaa koskeva sääntö
Jaa malli kolmeen vaaka- ja pystytasoon. Tämä luo verkon yhdeksästä suorakulmiosta, jotka sijaitsevat hiljattain muodostetuissa taskussa. On paljon helpompaa työskennellä malleissa, jotka hajoavat lohkoalueille, joilla on äärellisiä pisteitä.
Tämän kehityksen taustalla oleva tieteenala tulee "jumalallisesta osuudesta", joka tunnetaan myös nimellä "jumalallinen suhde". Suhde 1,618, joka on jumalallinen osuus, on matemaattinen vakio. Kun jaat minkä tahansa kiinteän kokoisen asettelun tähän arvoon, voimme laskea tarkimman jako kahden sarakkeen rakenteelle.
Ota esimerkki 960 pikselin asettelusta. Jos jaamme 960: n 1,618: lla, saamme noin 593: n. Sitten kultaisen osuuden mukaan meidän pitäisi asettaa ensisijaisen sarakkeen pituus 593 pikseliin. Tämä menetelmä menee taiteilijoille vuosisatoja sitten. Onneksi avoimen lähdekoodin leviämisen vuoksi suurin osa matematiikasta on jo laskettu.
Kultaisen suorakulmion rakentaminen
Tämä teoria kauniiden ruudukko-pohjaisten suorakaiteen muotoilun luomiseksi perustuu kolmansien sääntöihin. Split-suorakulmat ovat geometrisesti terveitä verrattuna kultaiseen suhde. Suorakulmion leveyden ja korkeuden numeeriset arvot ovat suhteessa kultaiseen sääntöön.
Tämäntyyppiset suorakulmiot tunnetaan "kultaisina suorakulmioina". Lyhyemmällä ja pidemmällä puolella on oltava muuttujien a ja b arvot.
Nämä suorakulmiot ovat hyödyllisiä rakentaa sivun asetteluja: ne mittaavat kuinka suuret lohkoelementit pitäisi olla. Ne ovat erittäin helppoja laskea, ja monien suosittujen ristikkorakenteiden työkalut on rakennettu.
Nämä elementit ovat erittäin hyödyllisiä web-suunnittelijoille, jotka käyttävät matemaattisia verkkoja. Kuvittele useat skenaariot, joissa tarkasti jäsennelty kultainen suorakaide parantaisi sivun estetiikkaa. Tämä voi sisältää sivun widgetejä, verkkokaupan tuotekuvia ja jopa sisällöllisesti rikkaita taulukoita.
Alkaen 960 g
Kaikki nämä tiedot ovat yleisön saatavilla, ja web-suunnittelijat ovat alkaneet määritellä omat standardit.
Kaikista kehyksistä, 960 Grid System (960gs) on luultavasti tunnetuin. Tämä ei tarkoita sitä, että se on parasta - ei verkko-järjestelmä sopii kaikkiin kriteereihin täydellisesti - mutta sitä on helppo käsitellä. 960gs on mukautuva ja toimii hyvin lähes minkä tahansa verkkosivuston kanssa. Ja se toimii hyvin useimmissa selaimissa ja laitteissa
Matematiikka sisältää 12 saraketta 60 kuvapistettä kukin, sekä 10-pikseli marginaali kummallakin puolella, tuottaen 20 pikselin kouru. Useimmat ristikkorakenteet perustuvat 12-24 pikselin sarakkeisiin. Tietenkään ei oletettavasti sisällytetä 12 saraketta ulkoasuun.
Lopulta yhdistät sarakkeet ja kourut yhdeksi ruudukkoyksiköksi. Sisällön julkaiseminen on paljon helpompaa, kun voit luoda yksityiskohtaisia tietoja kuville, widgeteille, videoille ja muille sivuelementeille.
960gs on saanut paljon julkisuutta, koska se sopii hyvin verkkoon. Useimmat näytön resoluutiot voivat näyttää 960 pikselin verkkosivuston ilman vaakasuoraa vierityspalkkia. Lisääntyvästi asettelut sopivat tähän suhdelukuun, mikä osoittaa, että tämä on verkon tulevaisuus. Lisäleveys ei poistu suunnittelusta, ja mallin laajentaminen tai sopimusten tekeminen on täysin mahdollista.
Täyden 960-asettelun ymmärtäminen
Vain niin monta saraketta sopii rationaalisesti muotoiluun. Verkko ei ole tarkoitettu lukitsemaan sinua rajoittavaan ajattelutapaan. Gridit seuraavat ohjeita: ne parantavat käyttäjien vuorovaikutusta ja sivun elementtien sijoittelua.
Suurin verkko, jonka voit luoda on 940-pikselin sisältöalue, jossa on 20 pikselin kattoikkunat. Se on hölynkäsinen verkon käyttö, mutta on hyvä ymmärtää mahdollisuudet. Kahden sarakkeen ulkoasut ovat melko yksinkertaisia ja tarjoavat runsaasti tilaa sisällölle. Yhteisiä esimerkkejä ovat:
- 780 x 140,
- 700 x 220,
- 620 x 300.
Huomaa, että nämä kaikki ovat jopa 920. 40-pikselin menetyksen voidaan katsoa katkoviivoilla jokaisen asettelun "lohkossa". Nämä tilat pitävät käyttäjät keskittyneinä ja sallivat sisällön erkanemisen tasaisesti. Jakautuneilla sisältöelementeillä on kourut toisella puolella ja lohkojen välillä, joista kukin vastaa 10: tä 40 pikselistä.
Nämä tilat lisääntyvät, kun lisäät uusia lohkoja layoutiin. Kolmen sarakkeen muotoilu on hieman vähemmän tilaa kuin kahden sarakkeen muotoilu.
Jos tämä käsite on edelleen sekava, katso yllä olevaa kuvaa. Yksinkertaisin tapa työskennellä verkkojen kanssa on suunnitella vertailulomake, joka on samanlainen kuin yllä oleva kuva, ja kaikki mahdolliset katkokset sisältölohkoille. Näiden tietojen avulla voit yhdistää ja sovittaa tyylejä määrittämään projektityypin, joka sopisi parhaiten projektisi kanssa.
Haluamme esimerkiksi suunnitella mallin kolmella sarakkeella ja suurimmalla mahdollisella sisältöalueella. Yllä olevan kaavion avulla voimme jakaa sisältöalueemme kahteen osaan: yksi täynnä sisältöä, mutta jakautuu puoleen ja sisältää kaksi saraketta. Tämä edellyttäisi 450 pikselin sisällön lohkoa ja kahta 210 pikselin saraketta.
Jälleen näiden verkkojen ei ole tarkoitus tukahduttaa luovuutta. Ne mahdollistavat joustavuuden, mutta säilyttävät back-end-rakenteesi turvallisen. Suurin osa suunnittelijoista ei käsittele tämän kaiken tiedettä. Aika, jonka nämä avoimet lähdekoodijärjestelmät säästävät, ovat poikkeuksellisia, ja ne ovat helposti arvokkaita asiakirjojen läpi ja oman asettelun toteuttamiseen.
Fluid Grid Layouts
Ei ole tavallista nähdä ruudut, jotka on kiinnitetty nesteen asetteluihin. Pikselit ovat tarkin mittausyksikkö verkkosivustolle. Siirtyminen mittauksiin, kuten prosenttimäärät tai ems, vaatisi tarkkaa harkintaa. Tällaiset ulkoasut ovat mahdollisia muutamalla muutoksella ja CSS-valitsimilla.
Fluid 960 Grid System on tunnettu, vaikka useimmat koodit eivät ole Internet Explorerin vanhojen versioiden saatavilla. Interaktiivisten prototyyppien avulla ja lukemattomien näyttösuoritteiden avulla voit skaalata 960 pikselin muotoilua monissa näytön tarkkuuksissa. Tämä avoin kehys ei ole täsmälleen 960 g: n kopio, ja se sisältää uuden dokumentaation. Jos olet kiinnostunut, tutustu GitHub-arkisto aktiivisiin keskusteluihin ja arkistoiduihin Q & A-istuntoihin.
Kuten muuhun web design -yhteisöön, olet todennäköisesti kutina jotain vakaampaa. Muutamia nestekehyksiä, jotka luovat hämmästyttäviä asetteluja.
YAML-ruudukon ulkoasut
YAML on yksi suosituimmista CSS-kehyksistä. Se sisältää suuren koodipohjan manipuloimaan joustavia XHTML- ja CSS-asetteluja. Aktiiviset yhteisön kehittäjät päivittävät sitä jatkuvasti.
Kehys on erittäin monipuolinen ja tarjoaa lukuisia käytännön esimerkkejä koodilla. Pienin kiinteä-leveä asettelu vastaa 740 pikseliä, joka sopii 800 x 600 näytön resoluutiolle. Enimmäisleveyden resoluutiot asetetaan 80 em: iin, mikä mahdollistaa skaalautuvuuden mobiili- ja työpöydän selaamisen välillä.
Aseta tavallisilla web-kirjasimilla, noin 75% mallista vastaa 960 pikseliä, vaikka tämä voidaan korvata.
Monet vanhemmissa selaimissa löydetyistä vioista on korjattu. YAML tukee Google Chromea, Mozilla Firefoxia, Safaria ja kaikkia Internet Explorer 5+ -versioita. Katso kehyksen yleiskatsaus ja ominaisuudet tarkempia tietoja.
Yahoo! Käyttöliittymän kirjasto
YUI on joukko JavaScriptin ja CSS-kirjastoja, jotka Yahoo julkaisee. Suurin osa projektin koodista ja virheiden korjauksista on kirjoittanut YUI-yhteisön ammattilaisten kehittäjät. Uusin versio on kuitenkin YUI2 YUI3 API -dokumentit on julkaistu v3.1.1: een.
YUI2 home page YUI2 kotisivu on linkkejä, jotka johtavat suosituimpiin projekteihin. YUI2 CSS Toolsin alla luetellut pohjat ovat neljää vaikuttavaa kehystä: CSS Reset, Base, Fonts and Grids. Tämä artikkeli koskee CSS-verkkoja, vaikka useat näistä muista kehyksistä on viitattu.
Lataustiedosto on vain 4 kt ja tarjoaa yli 1000 yksilöllistä verkkosivujen ulkoasua. Sisäänrakennetut asetukset mahdollistavat sekä nesteen että kiinteän asennuksen leveyden koon. Sarakkeet ovat itsestään selvittämättömiä, joten oletteko käytössä kaksin- tai nelisuuntaisia jaksoja, alatunnisteen sisältö pysyy aina ensisijaisen sisällön alla. Tyypilliset ominaisuudet sidotaan yhteen joustavien käyttäjäkohtaisten säätöjen kanssa. Monet ydinominaisuudet hoidetaan, mikä tekee työskentelystä YUI2: ssa niin mukavaa.
CSS Grids -kehys tarjoaa pienen määrän mobiilipohjaisia asetteluja. Nämä tekevät oikein vain selaimilla, joilla on suhteellisen uusi versio Webkit-moottorista. Tähän kuuluvat älypuhelimet, kuten Android-laitteet, iPhone, BlackBerry ja monet Windows Mobile -laitteet.
Integrointi on mukavaa, mutta tätä uutta mediaa ei ole testattu perusteellisesti, ja se saattaa silti näyttää väärin joihinkin mobiililaitteisiin. Mutta päivän lopussa kannattaa vaivaa, koska suurin osa matkapuhelimista, jotka ovat halukkaita lukemaan verkkosivustosi sisältöä, omistavat todennäköisesti älypuhelimen.
Web-kulttuurin kehitys
Web-suunnittelijat ovat tulleet varsin vakuuttaviksi avointen järjestelmien ja sääntöjen suhteen. Varhainen verkko ei ollut lainkaan yhteisössä lainkaan. HTML- ja CSS-standardeja oli olemassa, mutta useimpien asettelujen takana oleva mentaliteetti oli "mitä tahansa teosta." Web-tekniikan huomattavan kehityksen jälkeen Internetistä on tullut paras media julkaista maailmanlaajuisesti.
Web-suunnittelijat ja kehittäjät pyrkivät yksinkertaistamaan verkkosivuston luomisprosessia ilman, että jätetään pois sivuston laatu tai kokemus. Ristikot ovat harmoninen väline, koska ne antavat mallille tilauksen ja rakenteen. Kaaos ja satunnainen luominen eivät yleensä tuo tuloksia.
Siksi verkkomallit ovat niin helposti saatavilla. Web on uudistettu ketterään kehitystyöhön. Grid-pohjaiset asettelut tuottavat vakaa sivustoja: ei ole mikään yllätys, että yhteisö on ottanut käyttöön kehykset yleiseksi käytännöksi.
Sen sijaan, että luotettaisiin vanhoihin epäluotettaviin menetelmiin, keskimääräinen web-suunnittelija voi tänään keskittyä luomaan sivustoille, jotka ovat miellyttäviä käyttäjille, pikselien täydellisiä luomuksia koordinoimatta.
Nykyään suunnittelijat ovat paljon nuorempia ja pitävät suunnittelusta enemmän intohimoa kuin koskaan ennen. Tämä yhdessä avoimen verkkoliikkeen kanssa tarkoittaa sitä, että uutta verkkosekoodia syötetään jatkuvasti yleisölle. GitHub-arkistot tarjoaa verkostoitumismahdollisuuksia muiden CSS-kehittäjien kanssa.
Custom Grid Framework -kehitys
Suunnittelijat ovat kritisoineet monia avoimia kehyksiä liian paisutetuksi. Monet on merkitty hämmentäviksi, ja niissä on liian monia luokkia ja sääntöjä. Tämä voi olla totta joillekin, en todellakaan kiellä näitä huomautuksia.
Viime kädessä joustavampi malli, sitä parempi. Taiteilijat etsivät työkaluja, jotka tekevät työstä helpompaa. Kehykset eivät sovi kaikkiin malleihin. Kehysten luominen pienempiin verkkoprojekteihin säästää aikaa pitkällä aikavälillä. Kuitenkin, pidä CSS-järjestelmät enemmän oppimistyökaluna kuin tuotantoympäristö.
Verkot voivat olla hämmentäviä aluksi, epäilemättä. Ottaa viitata ja dokumentaatiota, jolla varmistetaan koko prosessi, auttaa aloittelijoita integroimaan nopeasti ja vähemmän stressiä.
Riittävän käytännön avulla kehittämällä mukautettu CSS-kehys on yksinkertainen. Tämän edut ovat paljon suurempia kuin toisen henkilön lähteestä työskentelyn edut. Voit rakentaa kaikki ulkoasun muodot yhdessä paikassa ja määrittää ominaisuuksia, kuten kirjasimen koon, rivin korkeuden ja lohkoelementit. Kukaan ei ole koskaan kirjoittanut täydellistä CSS-koodia, joten pidä kiinni siitä, mikä toimii sinulle parhaiten.
Yhteiset CSS-ruudukko-kehykset
Alla on joitain suosittuja CSS-kehyksiä. Vaikka kaikki näistä puitteista eivät keskittyisi pelkästään verkkosuunnitteluun, ne tarjoavat hyödyllisiä kirjastoja opiskelemaan ja toteuttamaan verkkosuunnittelussa. Projektin lähdekoodi on kussakin tapauksessa ilmainen ja yleensä mukana dokumentaatiossa.
1 kt: n verkko
1 kt: n verkko on suuri CSS-kehys, joka korostaa lähinnä nopeutta. Lataustiedostot ovat alle 1 kt: n kokoisia ja pitävät suurimman osan CSS-valitsimista, jotka tarvitset kauniin verkkosivuston ulkoasun luomiseen. CSS-koodi on muokattavissa ennen lataamista, mikä on valtava etu kaikille web-suunnittelijoille. Voit valita, kuinka monta saraketta sisällytetään ja kuinka laajat sarakkeet ja kourut näkyvät. Tämä verkko on erittäin ystävällinen uusille tulokkaille ja erinomainen tapa murtautua sisään.
Baseline CSS
lähtötilanteessa on toinen standardi CSS-malli, joka on ladattavissa ilmaiseksi. Tämä paketti ei ainoastaan sisällä ruutujen koodia, vaan se myös rakentaa sivun typografiaa ja lohkoelementtejä. Kaikki koodi on yhteensopiva CSS3- ja HTML5-elementtien kanssa, jolloin kehittäjät hallitsevat sivuvirran muokkaamista. Baseline CSS tarjoaa ratkaisuja pystytason manipulointiin integroimalla sivun typografia joustavaksi verkoksi.
1140px CSS Grid System
CSSGrid.net asuu verkko-pohjaisten verkkosivustojen uudemman nestekehyksen. 1140 pikseliä ja 12 sarakkeen jakamista rakenne heikentää kunnolla kaikki laitteet, suurimmista monitorin tarkkuuksista kämmentietokoneisiin. Kehys käyttää mediakyselyitä tarkistaaksesi, milloin tietyn asettelun näyttäminen ja sivun sisällön levittäminen näytetään. kirjailija Andy Taylor päivittää projektin usein, ja voit ladata sen viimeisin 1.6 julkaisu täällä .
YAML
YAML tarjoaa joustavimman kehyksen asettelujen kehittämiselle. Dokumentaatio tarjoaa täydellisen ratkaisun kaikkiin kiinteisiin, elastisiin ja nesteen asetteluihin. Keskeisiä tiedostoja on testattu laajasti pienissä ja suurissa verkkosivustoissa. Jos etsit vakaata CSS-kehystä, YAML on erinomainen ratkaisu.
Blueprint CSS
Suunnitelma sisältää monia perusviivan eduista. Tämän kehyksen etu on sen tunnetuin tuotenimi. Monet aktiiviset kehittäjät ovat päivittäneet projektin uusilla luokilla. Ristikot käsittävät suuren osan kehyksestä, mutta monia malleja käytetään typografian, mobiili- ja tulostusnäytöksien ja paljon muuta!
CSS Boilerplate
CSS Boilerplate CSS Boilerplate hanke aloitti yksi Blueprintin kehittäjistä. Koodi on hienostunut, poistamaton versio Blueprint-kehyksestä, joka on optimoitu nopeuden ja helpon luettavuuden vuoksi. Vaikka projektia ei ole äskettäin päivitetty, se tarjoaa aloittelijoille mahdollisuuden sulkea pois omat CSS-projektin määritelmät.
YUI 2: Gridit CSS
YUI2-ruudukot on hyvin suosittu kehys, jonka Yahoo laittoi sen YUI2-linjan alla. Koodi on täydellinen sekä kiinteään että nestemäiseen ulkoasuun, noudattaen CSS2: ssa ja CSS3: ssa määritettyjä sääntöjä. Kehys on hyvin dokumentoitu Yahoo-käyttöliittymän kirjaston alla, ja sitä pidetään yhtenä aloittelijoista paremmista puitteista.
Tämä viesti on kirjoitettu yksinomaan Webdesigner Depot by Jake Rocheleau , intohimoinen web-suunnittelija ja sosiaalisen median harrastaja. Jake rakastaa lukemista ja kirjoittamista uusimmista digitaalisista Internet-trendistä ja verkostoitumista suunnitteluryhmässä. Tarkista hänet Twitterissä @jakerocheleau enemmän hänen työstään.
Käytätkö rasteripohjaisia puitteita malleihisi? Jaa näkemyksesi kanssamme!