Sisältö
- Ongelma
- Susy
- Kontit
- Jännevälit
- Oletusten määrittäminen
- Pylväiden täyte
- Mediakyselyjen hallinta
- Breakpoint ja Susy
- Asettelun hallinta Mixinsillä
Reagoivan asettelun luominen voi olla haastavaa matematiikan vuoksi, joten suunnittelijoiden on tavallista kääntyä kehysten ja / tai Sassin puoleen prosessin yksinkertaistamiseksi. Monet kehykset perustuvat 12 sarakkeen ruudukkoon, mutta reagoiva sivusto ei aina sovi tähän rakenteeseen. Tässä näytän sinulle, kuinka voit käyttää kahta Sass-laajennusta luomaan todella joustavan ulkoasun, joka ylittää 12 sarakkeen ruudukon.
Ongelma
Reagoivan asettelun suunnittelu voi olla vaikeaa, koska siihen sisältyy konttien, rivien, pylväiden ja kourujen leveyden laskeminen eri murtumispisteissä. Kehykset voivat auttaa luomalla esiasetuksia yleisille katkaisupisteille. Esimerkiksi Bootstrap 3 antaa meille 12 sarakkeen ruudukon, jossa on neljä mediakyselyn katkaisupistettä. Sitten käytät luokkia, jotka saavat sisällön viemään tietyn määrän pisteitä ruudukossa, ja kourut vievät aina 30 kuvapistettä.
Tämä toimii loistavasti suurimman osan ajasta, mutta on kaksi ongelmaa. Ensinnäkin näiden luokkien lisääminen merkintöihin voi saada hieman sanatun. Oletetaan, että haluat asettelun, joka käyttää kaikkia mobiililaitteiden sarakkeita, kuusi 12 sarakkeesta pienissä laitteissa ja neljä keskitason laitteissa. Tämä merkintä saattaa näyttää tältä:
h2> Palvelut / h2> div> artikkeli> img src = "images / icon-exoticpets.svg" alt = "Icon"> h3> Eksoottiset lemmikit / h3> p> Tarjoamme erikoishoitoa matelijoille, jyrsijöille, linnuille ja muille eksoottiset lemmikit. / p>
Toinen ongelma on, että nämä luokat lisäävät asettelutietoja HTML-koodiin ja vaikeuttavat koodisi päivittämistä etenkin suuressa asennuksessa. Kun asettelut monimutkaistuvat, saatat päätyä koodiin, joka näyttää tältä:
div>
Suurempi asia on, että sinulla on vähän joustavuutta. Kehyksesi tulisi huolehtia matematiikasta, koska se on vaikea osa, mutta sen ei pitäisi sanella ulkoasun mittareita. Kuka teki näistä kehyksistä pomo sinusta?
Susy
Susyn yksinkertainen lupaus on antaa sinun huolehtia suunnittelusta, kun se huolehtii matematiikasta. Sen ytimessä on joukko Sass-sekoittajia leveyksien laskemiseksi täysin joustavassa ruudukkojärjestelmässä.
Aloita tuomalla kirjasto projektiisi tuontikomennolla: @import "susy" ;. Tämä antaa sinulle pääsyn Susyn verkkorakenteeseen, jonka toteuttaminen ei voisi olla yksinkertaisempaa. Perusmuodossaan on vain kaksi yhdistelmää, jotka sinun on opittava. Ensimmäinen on astiasekoitus.
Kontit
Säiliöiden avulla voit hallita, kuinka elementin leveys sopeutuu eri taittopisteisiin. Susyn avulla voimme määrittää minkä tahansa elementin sisällä olevat säiliöt milloin tahansa ilman, että meidän tarvitsee lisätä muita luokkia HMTL-koodiin.
Oletetaan, että suunnittelen eri verkkosivustoa. Jos haluan luoda säilön HTML-elementtiin, voin lisätä ilmoitukseen ilmoituksen, kuten tämä:
#welcome {article {@ sisällytä säiliö (70%); } // artikkeli}
Tämä saa alkion, jolla on osaluokka, toimivan kuin käynnistyssäiliö ilman, että joudutaan lisäämään .container-luokkaa HTML-tiedostoihimme - HTML-koodimme voi olla paljon semanttinen.
div id = "welcome"> artikkeli> h1> Tervetuloa Landon-hotelliin / h1> p> Alkuperäinen Landon säilyy 50 vuoden kuluttua Länsi-Lontoon sydämessä. West Endin naapurustossa on jokaiselle jotakin - teatterista ruokailuun historiallisiin nähtävyyksiin. Ja huomaamaton Rooftop Cafe on loistava paikka matkustajille ja paikallisille keskustella juomien, ruoan ja hyvän keskustelun parissa. / P> / article> / div>
Sen lisäksi, että HTML-koodini on paljon luettavampi, tämä helpottaa päivittämistä. Kun käytämme luokkia, kuten sisältöä ja kohtausta, on helppo määrittää uudelleen, mitä nämä elementit tarkoittavat asettelun suhteen, sen sijaan, että tarvitsisi miettiä, kuinka monta luokkaa meidän on lisättävä, jotta sisältömme käyttäytyy haluamallamme tavalla .
Jännevälit
Susyssa luot rivejä ja sarakkeita jännevälillä. Jos haluat luoda elementin, joka vie yhden kolmesta sarakkeesta, voit kirjoittaa jotain tällaista.
# Usefulinfo {section {@ sisällytä väli (1/3); }}
Todella hienoa tässä on se, että meidän ei koskaan tarvitse noudattaa tiettyä sarakemäärää ja säätää sitten elementtejä vastaavasti. Mikä tahansa asetteluni elementti voi viedä vain tarvitsemani tilan tuolloin.
Tämä todella muuttaa tapaa, jolla ajattelet sarakkeita. Jos käyttäisin Bootstrapia, kirjoitan yllä olevan koodin .col-sm-4, koska kolmasosa 12 sarakkeesta on neljä. Susyn kanssa minun ei tarvitse miettiä kuinka monta yksikköä haluan ulottaa; Voin yksinkertaisesti määrittää tarvitsemani tilan. Kun et enää ajattele muuntamista tiettyyn sarakemäärään, voit keskittyä asettelun sijasta.
Oletusten määrittäminen
Tietysti missä tahansa asettelujärjestelmässä on hyvä olla oletuksia, joten meidän ei tarvitse määrittää kourujen kokoa kaikissa tapauksissa. Teemme sen muokkaamalla muuttujaa nimeltä $ susy Sassin yläosassa:
$ susy: (sarakkeet: 12, kontti: 60em, kourut: 1/4, kouruasento: sisällä);
Susyllä on paljon oletusarvoja, joita voit käyttää oletusruudukon määrittämiseen, mutta tämä perusasetus huolehtii tavallisen Bootstrap-tyyppisen oletusarvon kokoamisesta. Älä unohda, että Susyssa kaikki on muokattavissa, joten et ole koskaan naimisissa näiden kanssa, ja voit muuttaa heitä tagien mukaan.
Oletusruudukossa on nyt 12 saraketta, kun käytämme @include -komentoa konttiyhdistelmässä, ja tämä kontti lukkiutuu 60em: n leveydellä kourujen kanssa, jotka ovat neljännes sarakkeiden koosta. Jos haluaisimme sovittaa aikaisemmat osiot tähän ruudukkoon, voisimme kirjoittaa ilmoituksen näin:
# Usefulinfo {section {@ sisällyttää span (4); }}
Tämä tarkoittaa, että jokainen osa vie neljä 12 sarakkeesta. Mielestäni on kuitenkin järkevämpää sanoa, että elementti vie 'yhden kolmesta' sarakkeesta. Jos haluat siirtää sarakkeet tiettyyn sijaintiin, voit käyttää tätä merkintää:
@ sisällytä väli (8 4: ssä 12: sta);
Tämän avulla elementti voi viedä kahdeksan saraketta alkaen 12 sarakkeen ruudukon neljännestä sijasta. Joten kun luot ulkoasua, voit keskittyä siihen, mitä sisältösi on tehtävä sen sijaan, että muotoilu sopisi nykyiseen ruudukkoon.
Pylväiden täyte
Toinen tapa hallita elementtien sijoittelua on täyttää sarakkeet. Tämä lisää useita saraketiloja sarakkeiden molemmille puolille. Voit esimerkiksi siirtää sarakkeen seitsemän yksikköä oikealle ja täyttää yhden yksikön vasemmalta seuraavasti:
@ sisällytä tyyny (7,1);
Tämä tarkoittaa sitä, että sen lisäksi, että asetat asioita ajattelemalla positiivisia välilyöntejä (kuinka monta saraketta elementin tulisi viedä), voit tehdä päinvastoin ja luoda malleja sisällön kummallakin puolella olevan etäisyyden perusteella.
Mediakyselyjen hallinta
Jotta asioista tulisi todella reagoivia, sinun on pystyttävä yhdistämään sarakkeen asetukset ja suunnittelu reagoiviin katkaisupisteisiin. Tätä varten voimme käyttää toista sarjaa sekoituksia kirjastosta nimeltä Breakpoint.
Breakpoint helpottaa mediahaun käsittelyä asetteluissasi. Se tekee niin yksinkertaistamalla kieltä, jota tarvitset mediakyselyjen katkaisupisteiden luomiseen. Perinteisesti luot nämä käyttämällä tällaista sääntöä:
@media (min-width: 34em) ja (max-width: 62em) {.container {...}}
Tämä luo leveysalueen, jolla ilmoitukset vaikuttavat asetteluun. Katkaisupiste kiteyttää puhelut järkiyhdistelmään, jota on paljon helpompi kirjoittaa:
.container {@ sisällytä rikkoutumispiste (34em 62em) {...}}
Puhelu on myös erilainen, koska voimme helposti määrittää tämän olemassa olevan luokan sisällä. Breakpointin hieno asia on, että se tekee oletuksia yhteisten asettamistarpeiden perusteella.
Breakpoint-säännöt on myös helppo oppia. Sinun on tiedettävä vain kolme asiaa:
- Jos sisällytät vain yhden numeron katkaisupisteen puheluun, Breakpoint ottaa minimin leveyden mediakyselykutsun
- Jos sisällytät kaksi numeroa, katkaisupiste olettaa, että haluat määrittää kahden numeron välisen alueen (kuten edellisessä esimerkissä)
- Jos sisällytät kaksi arvoa ja yksi on merkkijono, se olettaa, että lähetät mixinille ominaisuusarvoparin, joten jos haluat, voit silti lähettää suunnan tai minkä tahansa muun erityisen kyselysäännön
Katkaisupiste on taitettu Susyksi version 2.2.1 jälkeen. Susy-versio toimii aivan kuten Breakpoint-miksaukset, mutta taukopisteen kutsumisen sijaan käytetään susy-breakpointia. Sama puhelu soitettaisiin näin:
.container {@ sisältää susy-breakpoint (34em 62em) {max-width: 50%; marginaali vasemmalla: auto; marginaali-oikea: auto; }}
Breakpoint ja Susy
Kun yhdistät Breakpointin Susyyn, saat joustavan ruudukon, joka voi helposti sopeutua erilaisiin mediakyselyilmoituksiin. Katsotaanpa sivuston tieto-osan HTML-koodia.
div id = "hotelinfo"> artikkelin id = "hyödyllineninfo"> osion id = "saapumisinfo"> / osio> osion id = "palvelut"> / osio> osion id = "saavutettavuus"> / osio> / artikkeli> artikkelin id = "greenprogram"> / artikkeli> / div>! - hotellitiedot ->
Yhdistämällä Susy ja Breakpoint, voimme luoda mediakyselyjä, jotka sisältävät erilaisia ruudukkoasetteluja. Asettelussa minulla on kolme erilaista osaa, mutta haluan, että niillä on erilaiset säännöt näkymän leveydestä riippuen.
Näissä kahdessa eripisteessä asettelumme käyttäytyy dramaattisesti eri tavalla. Oikealla olevassa suuremmassa katkaisupisteessä jokainen osa vie kolme saraketta. Pienemmässä katkaisupisteessä ensimmäinen sarake vie 100 prosenttia näkymästä, mutta kaksi muuta vievät puolet näkymästä. Tämä tekee näistä sekoituksista niin voimakkaita. Koodi näiden kahden asettelun ilmaisemiseksi on tiivis:
osio {@ sisällytä susy-breakpoint (650px) {@include span (1/3); } // katkaisupiste @ sisällytä susy-breakpoint (450px 650px) {& .checklist {@include span (1/2)} // tarkistuslista} // breakpoint} // -osio
Ensin asetetaan oletusarvot mille tahansa elementille osiotunnisteessa. Jos nämä elementit saavuttavat näkymän, joka on suurempi kuin 650 kuvapistettä, ne vievät kolmen yksikön ruudukon, joista kukin vie yhden yksikön.
Jos asettelun väli on 450-650 kuvapistettä, .checklist-luokan elementit (palvelu- ja saavutettavuusosastot) sopivat täysin uuteen ruudukkoon, jossa on vain kaksi saraketta, ja kukin elementti vie yhden näistä yksiköistä.
Saapumistiedot vievät 100 prosenttia ruudukosta näiden kahden katkaisupisteen välillä. Huomaa, ettemme ole määrittäneet, mitä tapahtuu alle 450 pikselin tarkkuudella. Tästä huolehtivat oletusarvot - kukin osa vie 100 prosenttia näkymästä.
Asettelun hallinta Mixinsillä
Se, mitä nämä kaksi yhdistelmäkehystä tarjoavat sinulle, ylittää koodin, jota käytät ulkoasujen luomiseen. Kyky ilmaista asetteluita tarvitsematta huolehtia tästä ruudukosta tai ruudukosta muuttaa aivojesi toimintaa projektia suunniteltaessa.
Älä ymmärrä minua väärin, rakastan kehyksiä. Bootstrap voi auttaa luomaan asetteluita ennennäkemättömällä nopeudella. Se tarjoaa taistelutestatun ruudukon, joka ylittää asettelun ja tarjoaa kaikenlaisia CSS- ja JavaScript-komponentteja, jotka käsittelevät nopeasti yleisiä elementtejä, kuten taulukoita, modaaleja ja lomakkeita.
Hahmottamasi suunnittelujärjestelmä muuttaa asettelua kuvaavaa kieltä. Se on luonnollinen, taaksepäin yhteensopiva ja helppo oppia järjestelmä, joka muuttaa tapaa, jolla ajattelet verkkosivustojen suunnittelua.
Sanat: Ray Villalobos
Ray Villalobos on Lynda.comin henkilöstökirjailija, joka on erikoistunut koko pinon suunnitteluun ja kehittämiseen, käyttöliittymäsuunnitteluun, JS: ään, AngularJS: iin, Sassiin, Bootstrapiin. Tämä artikkeli julkaistiin alun perin verkkolehden numerossa 274.
Piditkö tästä? Lue nämä!
- 20 askelta täydelliseen verkkosivujen asetteluun
- Loistava Wordpress-opetusohjelman valinta
- Ilmaiset tatuointifontit suunnittelijoille
