Aloitamme kaikki jonnekin. Uudena suunnittelijana en olisi voinut olla vähemmän huolestunut rakenteestani suunnitelmissani. Aion avata Photoshopin ja työntää pikseleitä ympäri, kunnes tein jotain, jonka ajattelin näyttävän siistiltä. Kun opetin koodaamaan, prosessi oli samalla tavoin sattumanvarainen.

En katso vanhoja päiviä liikaa rakkaudella. Työmani oli levoton ja epäselvä. Minulla ei ollut selkeitä tavoitteita. Alkukevänä, oletan, että se ei ole niin paha, kun otetaan huomioon, että suurin osa mallikoulutuksestani tuli Photoshop-opetuskohteista, työni ei ollut kauheaa.

Mutta sitten sain tietää verkkojärjestelmistä. Unohdin täsmälleen, milloin ja miten niitä käytetään yleisesti web-suunnittelussa, mutta yhtäkkiä kaikki web-suunnitteluun liittyvä sivusto, johon menin, oli täynnä artikkeleita noin 960.gs tai jotain muuta verkkojärjestelmää. Kaikkien suurien nimet korostivat tärkeyttä tarjota johdonmukainen visuaalinen rakenne rakenteissamme, ja se muuttui trendiksi.

Aivan yhtä nopeasti suuntaus tuli teollisuusstandardiksi, ja nyt useimmat meistä eivät ajattele kahdesti siitä, tulemmeko käyttöön grid-järjestelmää. Ainoa kysymys on, mikä? Menisimme yhdellä suurimmista nimistä tai vähemmän tunnetusta versiosta tai edes tehdä omia?

Tässä artikkelissa haluan tarkastella toista vaihtoehtoa: uusia ja vähemmän tunnettuja verkkojärjestelmiä. Jokaisella on aina uudet tapoja ratkaista erilaiset asennusongelmat, ja mielestäni on tärkeää tuntea mahdollisimman monta lähestymistapaa, joten katsokaamme joitain perusrunkorakenteita.

Yksinkertaiset verkkojärjestelmät

34Grid

34Grid on kyse yhtäläisestä sarakejakaumasta. Se mahtuu myös epätasaisiin jakeluihin, mutta se ei ole tämän verkkojärjestelmän ensisijainen tarkoitus. Niille teistä, jotka haluavat jakaa useimmat tai kaikki sivusi vaakasuoraan yhtä suuriksi osuuksiksi, tämä on sinun kehosi.

Kuinka se toimii

Kehys on suunniteltu mukautumaan tarpeisiisi, joten et vain lataa ja mene. Sinun täytyy määrittää verkko projektin etusivulla. Pikakuvakkeella voit määrittää, kuinka monta saraketta sopii peräkkäin, kuinka suuret marginaalit ovat, ja haluatko soveltaa CSS3-siirtymiä sarakkeisiin, kun näkymäsi muuttaa kokoa.

Itse koodi on jaettu kahteen CSS-tiedostoon: yksi peruskoodilla ja yksi kaikkien median kyselyiden kanssa. CSS-luokat ovat yksinkertaisia. Sovelletaan '.col_1' sarakkeeseen täyttääksesi rivin 100%: iin. '.col_2' luo sarakkeessa leveys 50% ja niin edelleen.

Lisäksi img-elementit, kohteet ja muut muunnetaan automaattisesti. On olemassa ylimääräinen luokka, jolla videoleikkeet toimivat. Projektin verkkosivustolla annetaan neuvoja siitä, miten Facebook ja Twitter sisällytetään pelaamaan mukavasti.

haittoja

Ei näytä olevan mitään tapaa upottaa sarakkeita tai luoda monimutkaisempia sarakejärjestelyjä yhden rivin sisällä. Toisaalta, jos et tarvitse monimutkaisuutta ja haluat vain yksinkertaisen kehyksen, jota voit säätää aina, kun tarvitset, 34Grid tekee työn.

Yksinkertainen verkko

Yksinkertainen verkko on herkkä vaihtoehto, joka maxes out leveys 1140 pikseliä. Toisin sanoen, kun se on suunniteltu pelaamaan mukavasti tablettien ja puhelimien kanssa, Simple Grid varmistaa, että suurempia näyttöjä ei jätetä pois.

Kuinka se toimii

Kuten nimi merkitsee, tämä ristikkojärjestelmä on varsin kevyt. Koko asia tulee neljän kilobyyttisen pakkaamattoman CSS-tiedoston mukana.

Luokkien nimet on suunniteltu helposti ymmärrettäviksi: '.col-2-6' jakaa rivin kuuteen sarakkeeseen ja määrittää sarakkeen leveyden kahteen sarakkeeseen leveä. Jokainen rivi voidaan jakaa yhteen sarakkeeseen ".col-1-1" tai kaksi, kolme, neljä jne. Aina kaksitoista.

haittoja

Kuten 34Grid, ei näytä olevan mitään määräystä pesäpylväistä. Myös marginaalien käsittely ensimmäisellä ja viimeisellä sarakkeella voi aiheuttaa ongelmia esimerkiksi luomalla valokuvagalleria.

Paahtoleipä

Tämä on kaikille, jotka haluavat yksinkertaisen verkon, jossa on pelkkää englantilaista luokan nimeä. Se on reagoiva, helposti ymmärrettävissä ja toteutettu nopeasti.

Kuinka se toimii

Kun tavalliset '.container' ja '.grid' elementit on otettu käyttöön, sarakkeet toteutetaan vanhanaikaisella tavalla. Yhden luokan ('.unit') käytetään määrittämään sarakkeen yleiset attribuutit, ja leveyttä määritellään toisella luokalla. Rivit voidaan jakaa 2-5 sarakkeeseen, ja luokkien nimet näyttävät kaikki samanlaiselta: "yksi kolmesta, kolmesta kolmesta".

Mukana on myös joitain perustieteellisiä tyylejä.

haittoja

Jälleen kerran tämä on ristikkorakenne, joka on tarkoitettu yksinkertaisiin asetteluihin, joten ei ole varattuja sisäkkäisiä sarakkeita. Lisäksi on vain yksi taittopiste, joka asetetaan 650 pikselin näkymän leveyteen, joten jotkut sarakkeista voivat ennenaikaisesti päätyä melko laajalle.

Kehittyneet verkkojärjestelmät

Suhteelliset ristikot

Matt (AKA Siunaus ) on vähän kuin minä. Hän rakastaa muotoilua, mutta ei rakasta matematiikkaa aivan yhtä paljon. Tämän seurauksena hänen Suhteelliset ristikot näyttävät poistavan loputtomat laskelmat mahdollisimman paljon riippuen box-sizing omaisuutta. Tuloksena on täydellinen, mutta silti melko kevyt, ristikkojärjestelmä, joka kattaa pohjan reagoivaan ulkoasuun.

Kuinka se toimii

Kun sanon, että tämä järjestelmä riippuu box-sizing Tarkoitan, että sarakkeille annetaan prosenttiyksikön leveydet ilman, että ne kattavat kouruista. Kiinteät leveydet on määritelty padding ; ja box-sizing varmistaa, että sarakkeet toimivat mukavasti yhdessä.

Kaapelin leveydet ja useimmat muut mittaukset määritellään "ems": lla. Tämän ruudukon nimen mukaan sarakkeen luokat ovat suhteellisia (esim. .col-one-third , .col-two-thirds ), ja sarakkeet ovat enemmän tai vähemmän äärettömän nestable, joka on jotain, jota pidän erittäin paljon.

Sarakkeet on sisällytetty kolonnien mittojen muuttamiseen kolmessa eri taukopaikassa. Mediakyselyt on jäsennelty "mobiili-ensimmäinen" -mallin mukaisesti tavanomaisten käytäntöjen mukaisesti.

Internet Explorer 8: lle ja vanhemmille on erillinen tyylitaulukko. Koska IE8 ei tue mediakyselyjä, ja vanhemmat versiot eivät tue box-sizing , ne on varustettu kiinteällä leveydellä.

Mukana ovat myös SASS (sekä .sass- että .scss) -tiedostot, jotka mahdollistavat ristikkojärjestelmän nopean ja helpon räätälöinnin.

haittoja

En haluaisi, että työstettäisiin lisää kolonnin leveyksiä (viisi, kuudes, kahdeksas). Muussa tapauksessa tämä on suurelta osin virheettömiä ja hyvin pyöristettyjä verkkojärjestelmiä.

Yksi%

Tämän luettelon kehittyneistä verkkojärjestelmistä, Yksi% on yksinkertaisin, mutta se ei ole millään tavoin puutteellinen. Se on suunniteltu mukautumaan hieman suurempaan näyttöön, ja suuret UI-elementit, jos sen kotisivulla on merkkejä.

Nimi johtuu siitä, että ruudukon ja pylvään leveys lasketaan niin, että se on aina 99%, eikä 100%. Tämä poistaa tarpeen joidenkin monimutkaisempien toistuvien desimaalien ja numeroiden pyöristyksen, joita selaimet joutuvat usein tekemään.

Kuinka se toimii

Ristikko on jaettu klassikkoon kaksitoista saraketta. Luokat ovat yksinkertaisia ​​( .onerow , .col1 , .col6 ), ja pidän siitä, että useimmiten käytät vain yhtä luokkaa saraketta kohden.

Oletuksena on kaksi keskeytyspistettä: 768 pikseliä ja 1024 pikseliä. Jos olen rehellinen, se ensimmäinen tuntuu hieman ... iso ... mutta voit aina lisätä toisen tauon pisteen, jos tarvitset sitä. Mukana on myös kaksi työpöydän leveysesimerkkiä: 1000 kuvapistettä ja 1200 kuvapistettä.

Projektin kotisivulla voit ladata Photoshopin toimintatiedostoja ja PSD-tiedostoja, jotka sopivat ruudukkojärjestelmän mallien pilkkomiseen.

haittoja

Minun kaksi suurta ongelmaa ovat tavalliset. Ensinnäkin: ei ole pesimä sarakkeita. Nestepylväät ovat hyviä, ihmiset! Toinen: Jokaisen rivin viimeisessä sarakkeessa täytyy olla .last luokassa.

Flurid

Ristiselaimen CSS-ruudukko, joka ei piilota pikseleitä marginaaleissa! Se on tagline Flurid, ja nopea katsaus dokumentaatioon kertoo miksi: Fluridin luoja ei todellakaan halua, että ulkoasu murtuu. Koskaan.

Tässä on asia, koska alipikselin pyöristys toimii, selaimessa toisinaan sanotaan "ruuvata" ja laita viimeinen sarake riville jossain ei pitäisi mennä. Flurid on rakennettu vakautta varten, joten asettelu toimii aina myös vanhemmissa IE-versioissa. (Yhteensopivuus on luetteloitu IE5 +: ksi.)

Kuinka se toimii

Fluridilla on kaikki tarvittavat ominaisuudet: säännölliset sarakkeet, yhdistetyt sarakkeet, sisäkkäiset sarakkeet ja siirretyt sarakkeet. Luettelo mahdollisista pylväsleveyksistä ja -luokista on laaja ja suhteellinen, joten haluat antaa itsellesi aikaa perehtyä niihin.

Jotkut kohtuullisen täydelliset dokumentaatiot toimitetaan GitHubin kautta, samoin kuin jQuery-plugin, joka lisää lisäominaisuuksia - kyllä, siinä on oma jQuery-plugin, joka tarjoaa samanpituisia sarakkeita ja voi sijoittaa vuorotellen luokkia pylväistänne tyylillesi.

haittoja

Se on niin ärsyttävä .last luokka uudelleen. Asiakirjoiden mukaan tähän on kuitenkin hyvä syy.