Kuinka luoda joustavia asetteluja Susyn ja Breakpointin avulla

Reagoivien ulkoasujen luominen voi olla haastavaa matematiikan takia, joten on tavallista, että suunnittelijat kääntyvät 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, kuinka voit käyttää kahta Sass-laajennusta todella joustavan ulkoasun luomiseen, 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 taittopisteissä. 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ä.



on MacBook Air hyvä ohjelmointiin

Yksinkertaisessa Bootstrap 3 -asettelussa, jossa on vain kolme katkaisupistettä (kaksi yllä olevaa), on luokkia, jotka eivät lisää semanttista arvoa

Yksinkertaisessa Bootstrap 3 -asettelussa, jossa on vain kolme katkaisupistettä (kaksi yllä olevaa), on luokkia, jotka eivät lisää semanttista arvoa

Tämä toimii loistavasti suurimman osan ajasta, mutta on kaksi ongelmaa. Ensinnäkin näiden luokkien lisääminen merkintöihisi voi saada hieman yksityiskohtaisen. 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ä:



Services

Exotic Pets

We offer specialized care for reptiles, rodents, birds, and other exotic pets.

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ä:

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 asetteluasi. Kuka teki näistä kehyksistä pomo sinusta?



Susy

Susy yksinkertainen lupaus on antaa sinun huolehtia suunnittelusta, kun se huolehtii matematiikasta. Ytimessä se on joukko Sass-sekoittajia leveyksien laskemiseksi täysin joustavassa ruudukkojärjestelmässä.

Susy on sarja Sassin sekoituksia, joka huolehtii minkä tahansa asetteluruudukon matematiikasta, joten voit keskittyä suunnitteluelementteihin

Susy on sarja Sassin sekoituksia, joka huolehtii minkä tahansa asetteluruudukon matematiikasta, joten voit keskittyä suunnitteluelementteihin

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 sekoitusta, jotka sinun on opittava. Ensimmäinen on astiasekoitin.

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ä olen asettamassa eri verkkosivustoa. Jos haluan luoda säilön HTML-elementtiin, voin lisätä sisällyttämisen ilmoitukseeni seuraavasti:

#welcome { article { @include container(70%); } //article }

Tämä saa alkion, jolla on osastoluokka, toimimaan kuin käynnistyssäiliö ilman, että joudutaan lisäämään .container-luokkaa HTML-tiedostoihimme - HTML-koodimme voi olla paljon semanttinen.

Welcome to the Landon Hotel

The original Landon perseveres after 50 years in the heart of West London. The West End neighborhood has something for everyone – from theater to dining to historic sights. And the not-to-miss Rooftop Cafe is a great place for travelers and locals to engage over drinks, food, and good conversation.

Sen lisäksi, että HTML-koodini on paljon luettavampi, se 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 .



Tämän sivuston tervetuliaisosassa käytetään Susyn joustavia säiliöitä, jotka on asetettu prosenttiosuudeksi näkymän leveydestä



Tähtialuksen koon vertailutaulukko korkea resoluutio
Tämän sivuston tervetuliaisosassa käytetään Susyn joustavia säiliöitä, jotka on asetettu prosenttiosuudeksi näkymän leveydestä

Jännevälit

Susyssä luot rivejä ja sarakkeita jännevälillä. Jos haluat luoda elementin, joka vie yhden kolmesta sarakkeesta, voit kirjoittaa jotain tällaista.

#usefulinfo { section { @include span(1 of 3); } }

Mikä on todella hienoa, 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.



Yksinkertaisen @include span -käskyn avulla voimme määrittää kukin säiliö sopimaan mukautettuun, kolmasarakkeiseen ruudukkoon

Yksinkertaisen @include span -käskyn avulla voimme määrittää kukin säiliö sopimaan mukautettuun, kolmasarakkeiseen ruudukkoon

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 määrän. Kun et enää ajattele muuntamista tiettyyn sarakemäärään, voit keskittyä siihen, miltä ulkoasun pitäisi näyttää.

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: ( columns: 12, container: 60em, gutters: 1/4, gutter-position: inside );

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 { @include 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' sarakkeen. Jos haluat siirtää sarakkeet tiettyyn sijaintiin, voit käyttää tätä merkintää:

@include span(8 at 4 of 12);

Tämä antaa elementin 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, miten muotoilu sopii 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:

@include pad(7,1);

Tämä tarkoittaa, 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.

Käyttämällä tyynyin sisältyvää sisältöä on mahdollista sijoittaa sisältösi negatiivisen tilan perusteella

Käyttämällä tyynyin sisältyvää sisältöä on mahdollista sijoittaa sisältösi negatiivisen tilan perusteella

Mediakyselyjen hallinta

Jotta asioista tulisi todella reagoivia, sinun on pystyttävä yhdistämään sarakkeiden asetukset ja suunnittelu reagoiviin katkaisupisteisiin. Tätä varten voimme käyttää toista sarjaa sekoituksia kirjastosta nimeltä Raja-arvo .

Breakpoint helpottaa mediakyselyjen käsittelyä asetteluissasi. Se tekee niin yksinkertaistamalla kieltä, jota sinun on käytettävä mediakyselyjen katkaisupisteiden luomiseen. Perinteisesti luot nämä käyttämällä tällaista sääntöä:

@media (min-width: 34em) and (max-width: 62em) { .container { ... } }

Tämä luo leveysalueen, jolla ilmoitukset vaikuttavat asetteluun. Katkaisupiste kiteyttää puhelut järkiyhdistelmään, jonka kirjoittaminen on paljon helpompaa:

.container { @include breakpoint(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 yleisten asettamistarpeiden perusteella.

Breakpoint-säännöt on myös helppo oppia. Sinun on tiedettävä vain kolme asiaa:

  1. Jos sisällytät vain yhden numeron katkaisupisteen puheluun, Breakpoint ottaa minimin leveyden mediakyselykutsun
  2. Jos sisällytät kaksi numeroa, katkaisupiste olettaa, että haluat määrittää kahden numeron välisen alueen (kuten edellisessä esimerkissä)
  3. 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 { @include susy-breakpoint(34em 62em) { max-width: 50%; margin-left: auto; margin-right: auto; } }

Breakpoint ja Susy

Kun yhdistät Breakpointin Susyyn, saat joustavan ruudukon, joka voi helposti sopeutua erilaisiin mediakyselyilmoituksiin. Katsotaanpa sivuston tieto-osion HTML-koodi.

Yhdistämällä Susy ja Breakpoint, voimme luoda mediakyselyjä, jotka sisältävät erilaisia ​​ruudukkoasetteluja. Asettelussani on kolme erilaista osaa, mutta haluan, että niillä on erilaiset säännöt näkymän leveydestä riippuen.

Kahdessa eri katkaisupisteessä asettelumme käyttäytyy eri tavalla, mutta tämä on melko helppo ilmaista Sassissa Susyn ja Breakpointin kanssa

Kahdessa eri katkaisupisteessä asettelumme käyttäytyy eri tavalla, mutta tämä on melko helppo ilmaista Sassissa Susyn ja Breakpointin kanssa

Näissä kahdessa eripisteessä asettelumme käyttäytyy dramaattisesti eri tavalla. Oikealla olevassa suuremmassa katkaisupisteessä kukin 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:

section { @include susy-breakpoint(650px) { @include span(1 of 3); } //breakpoint @include susy-breakpoint(450px 650px) { &.checklist { @include span(1 of 2) } //checklist } //breakpoint } //section

Ensinnäkin asetamme 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 esteettömyysosastot) 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. Tästä huolehtivat oletusarvot - kukin osa vie 100 prosenttia näkymästä.

sega tekee uuden konsolin

Asettelujen hallinta Mastinsilla

Se, mitä nämä kaksi yhdistelmäkehystä antavat 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 ajatella 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 nettilehti .

Piditkö tästä? Lue nämä!