Kuidas luua Susy ja Breakpointiga paindlikke paigutusi

Reageerivate küljenduste loomine võib olla keeruline matemaatika tõttu, mistõttu on disaineritel protsessi lihtsustamiseks tavaline pöörduda raamistike ja / või Sassi poole. Paljud raamistikud põhinevad 12-veerulisel võrgul, kuid tundlik sait ei sobi alati sellesse struktuuri. Siinkohal näitan teile, kuidas kasutada kahte Sassi laiendust, et luua tõeliselt paindlik paigutus, mis ületab 12-veerulise ruudustiku.

Probleem

Reageerivate paigutuste kujundamine võib olla keeruline, kuna see hõlmab konteinerite, ridade, veergude ja vihmaveerennide laiuse arvutamist erinevates murdepunktides. Raamistikud võivad aidata, kui loovad tavaliste murdepunktide eelseadistused. Näiteks Bootstrap 3 annab meile 12-veerulise ruudustiku koos nelja meediumipäringu katkestuspunktiga. Seejärel kasutate klasse, mille tõttu teie sisu võtab ruudustikus teatud arvu kohti ja vihmaveerennid võtavad alati 30 pikslit.

Lihtsas Bootstrap 3 paigutuses, milles on ainult kolm katkestuspunkti (kaks näidatud ülal), on klasse, mis ei lisa semantilist väärtust

Lihtsas Bootstrap 3 paigutuses, milles on ainult kolm katkestuspunkti (kaks näidatud ülal), on klasse, mis ei lisa semantilist väärtust

See töötab enamasti suurepäraselt, kuid on kaks probleemi. Esiteks võib nende klasside lisamine oma hinnakirjeldusele veidi üksikasjalikult välja tuua. Oletame, et soovite paigutust, mis kasutab kõiki veerge mobiilseadmetes, 12-st veerust kuus väikestes seadmetes ja neli keskmise suurusega seadmetes. See märgistus võib välja näha umbes selline:

Services

Exotic Pets

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

Teine probleem on see, et need klassid lisavad teie HTML-ile paigutusteavet ja muudavad teie koodi värskendamise keeruliseks, eriti suure installi korral. Kui teie paigutused muutuvad keerukamaks, võite saada mõne koodi, mis näeb välja selline:

Suurem probleem on see, et teil on vähe paindlikkust. Teie raamistik peaks matemaatika eest hoolitsema, sest see on kõige raskem osa, kuid see ei tohiks dikteerida teie paigutuse mõõdikuid. Kes tegi need raamistikud teie bossiks?

Susy

Susy Lihtne lubadus on lasta teil muretseda disaini pärast, kui see hoolitseb matemaatika eest. Selle keskmes on komplekt Sassi segusid laiuste arvutamiseks täiesti paindlikus võrgusüsteemis.

Susy on sassile mõeldud segamissari, mis hoolitseb mis tahes paigutusruudustiku matemaatika eest, nii et saate keskenduda kujunduselementidele

Susy on sassile mõeldud segamissari, mis hoolitseb mis tahes paigutusruudustiku matemaatika eest, nii et saate keskenduda kujunduselementidele

Alustage raamatukogu importimisega projekti importimiskäsu kaudu: @import 'susy' ;. See annab teile juurdepääsu Susy võrguraamistikule, mille rakendamine ei saa olla lihtsam. Kõige põhilisemal kujul on teil vaja õppida ainult kahte miksi. Esiteks on konteiner miksin.

Konteinerid

Konteinerid aitavad teil kontrollida, kuidas elemendi laius erinevate murdepunktidega kohandub. Susy abil saame ükskõik millises elemendis olevad konteinerid igal ajal uuesti määratleda, ilma et peaksime HMTL-koodile lisaklasse lisama.

Oletame, et panen teistsuguse veebisaidi välja. Kui tahan HTML-i elemendis konteineri luua, saan oma deklaratsiooni lisada kaasamise järgmiselt:

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

See paneb jaotise klassiga üksuse toimima nagu alglaadimiskonteiner, ilma et peaksite HTML-i lisama .container klassi - see tähendab, et meie HTML võib olla palju semantilisem.

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.

Lisaks HTML-i palju loetavamaks muutmisele muudab see ka asju hõlpsamini värskendatavaks. Kui kasutame selliseid klasse nagu sisu ja stseen, on lihtne uuesti määratleda, mida need elemendid paigutuse mõttes tähendavad, selle asemel, et mõelda, mitu klassi peame lisama, et panna sisu käituma nii, nagu soovime .

Selle saidi tervitusjaotis kasutab Susy painduvaid konteinereid, mis on seatud protsendini vaateava laiusest

Selle saidi tervitusjaotis kasutab Susy painduvaid konteinereid, mis on seatud protsendini vaateava laiusest

Kestab

Susys loote ridade ja veergude abil sirvimisi. Kolmest veerust ühte moodustava elemendi loomiseks võite kirjutada midagi sellist.

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

Mis on selle tõeliselt suurepärane, on see, et me ei pea kunagi vastama kindlale veergude arvule ja seejärel elemente vastavalt sellele kohandama. Iga paigutus minu paigutuses võib võtta ainult sel ajal vajaliku ruumi.

Kasutades lihtsat @include span-lauset, saame kõik konteinerid seadistada nii, et need mahuksid kohandatud kolme veeruga ruudustikku

Kasutades lihtsat @include span-lauset, saame kõik konteinerid seadistada nii, et need mahuksid kohandatud kolme veeruga ruudustikku

See muudab tõesti veergude mõtlemist. Kui kasutaksin Bootstrapi, kirjutaksin ülaltoodud koodi .col-sm-4, kuna üks kolmandik 12 veerust on neli. Susyga ei pea ma mõtlema, kui palju ühikuid ma tahan laiendada; Ma oskan lihtsalt määrata vajaliku ruumi hulga. Kui te ei mõtle enam konkreetsele veergude arvule teisendamisele, saate keskenduda sellele, milline peaks paigutus selle asemel välja nägema.

Vaikimisi seadistamine

Muidugi on igas paigutussüsteemis vaikimisi hea, nii et me ei pea igal juhul oma vihmaveerennide suurust määrama. Me teeme seda, muutes meie Sussi ülaosas muutujat nimega $ susy:

$susy: ( columns: 12, container: 60em, gutters: 1/4, gutter-position: inside );

Susyl on palju vaikeväärtusi, mida saate kasutada oma vaikevõrgu seadistamiseks, kuid see põhiseadistus hoolitseb tavalise Bootstrapi-laadse vaikimisi koostamise eest. Ärge unustage, et Susy kõik on kohandatav, nii et te pole kunagi abielus ühega neist ja saate neid muuta siltide kaupa.

Vaikeruudustikul on nüüd 12 veergu, kui kasutame konteinerimikseris käsku @include ja see konteiner lukustub 60em laiusel, koos veerennidega, mis on veerand veergude suurusest. Kui sooviksime oma varasemad jaotised sellesse võrku sobitada, võiksime deklaratsiooni kirjutada järgmiselt:

#usefulinfo { section { @include span(4); } }

See tähendab, et iga sektsioon võtab 12 veerust neli. Kuid ma arvan, et on mõttekam öelda, et element võtab veeru „üks kolmest“. Kui peate veerud kindlale positsioonile nihutama, võite kasutada järgmist tähist:

@include span(8 at 4 of 12);

See võimaldab elemendil võtta kaheksa veergu, alustades 12-veerulise ruudustiku neljandast positsioonist. Nii saate paigutuse loomisel keskenduda sellele, mida teie sisu peab tegema, selle asemel, et kujundus teie olemasolevasse ruudustikku sobiks.

Polsterdatud veerud

Teine võimalus elementide paigutuse juhtimiseks on veergude täitmine. See lisab teie veergude mõlemale küljele hulga veergude tühikuid. Näiteks võite veeru liigutada seitse ühikut paremale ja polsterdada ühe üksuse vasakult järgmiselt:

@include pad(7,1);

See tähendab, et lisaks asjade paigutamisele, mõeldes positiivsetele tühikutele (mitu veergu peaks üks element üles võtma), saate teha ka vastupidist ja luua kujundusi oma sisu mõlemal küljel asuvate tühikute põhjal.

Padi kaasamise abil on võimalik oma sisu paigutada negatiivse ruumi põhjal

Padi kaasamise abil on võimalik oma sisu paigutada negatiivse ruumi põhjal

Meediumipäringute haldamine

Asjade tõeliselt reageerivaks muutmiseks peate olema võimeline ühendama veeru seadistamise ja kujundamise tundlike murdepunktidega. Selleks saame kasutada veel ühte komplekti komplekte, mis pärinevad teegist Murdepunkt .

Murdepunkt lihtsustab paigutustes meediumipäringute käsitlemist. Seda tehes lihtsustatakse meediumipäringu katkestuspunktide loomiseks kasutatavat keelt. Traditsiooniliselt loote need järgmise reegli abil:

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

See loob laiuse vahemiku, milles deklaratsioonid mõjutavad teie paigutust. Breakpoint koondab kõned tavamõistusse, mida on palju lihtsam kirjutada:

.container { @include breakpoint(34em 62em) { ... } }

Ka kõne on erinev, kuna saame selle olemasoleva klassi sisse hõlpsasti määrata. Breakpointi suurepärane külg on see, et see teeb eeldusi ühiste paigutusvajaduste põhjal.

Ka murdepunkti reegleid on lihtne õppida. Peate teadma ainult kolme asja:

  1. Kui lisate katkestuspunkti kõnesse ainult ühe numbri, võtab murdepunkt minimeedilise meediumipäringu kõne
  2. Kui lisate kaks numbrit, eeldab murdepunkt, et soovite määrata vahemiku kahe numbri vahel (nagu eelmises näites)
  3. Kui lisate kaks väärtust ja üks on string, eeldatakse, et saadate mixinile funktsiooniväärtuste paari, nii et kui soovite, võite siiski saata suuna või mõne muu spetsiaalse meediumipäringu reegli

Murdepunkt on alates versioonist 2.2.1 Susy volditud. Susy versioon töötab täpselt nagu Breakpoint-i miksid, kuid murdepunkti helistamise asemel kasutate susy-breakpoint-i. Sama kõne tehakse järgmiselt:

.container { @include susy-breakpoint(34em 62em) { max-width: 50%; margin-left: auto; margin-right: auto; } }

Murdepunkt ja Susy

Kui ühendate katkestuspunkti Susyga, saate paindliku ruudustiku, mida saab hõlpsalt kohandada vastavalt meediumipäringute erinevatele deklaratsioonidele. Vaatame saidi teabe jaotise HTML-i.

Kombineerides Susy ja Breakpoint, saame luua meediumipäringuid, mis sisaldavad erinevaid ruudustiku paigutusi. Minu paigutusel on mul kolm erinevat osa, kuid ma tahan, et neil oleksid erinevad reeglid, sõltuvalt vaateava laiusest.

Kahe erineva murdepunkti korral käitub meie paigutus erinevalt, kuid seda on Sassis Susy ja Breakpointiga üsna lihtne väljendada

Kahe erineva murdepunkti korral käitub meie paigutus erinevalt, kuid seda on Sassis Susy ja Breakpointiga üsna lihtne väljendada

Nendes kahes erinevas murdepunktis käitub meie paigutus dramaatiliselt erinevalt. Parempoolses suuremas murdepunktis võtab iga sektsioon kolm veergu. Väiksemas katkestuspunktis võtab esimene veerg 100% vaateavast, ülejäänud kaks aga poole vaateavast. See muudab need miksrid nii võimsaks. Nende kahe paigutuse väljendamise kood on lühike:

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

Kõigepealt seadistasime jaotise märgendis mis tahes elemendi vaikeseaded. Kui need elemendid jõuavad vaateava, mis on suurem kui 650 pikslit, hõivavad nad kolme ühiku võrgu, kusjuures igaüks võtab ühe üksuse.

Kui paigutus on vahemikus 450–650 pikslit, mahuvad .checklist-klassi klassiga elemendid (teenuse ja juurdepääsetavuse sektsioonid) täiesti uude ruudustikku, kus on ainult kaks veergu, ja iga element võtab enda alla ühe neist üksustest.

Saabumisteave võtab nende kahe murdepunkti vahelise võrgu 100 protsenti. Pange tähele, et me ei täpsustanud, mis juhtub alla 450 piksli. Selle eest hoolitsevad vaikeväärtused - iga osa võtab vaatepordist 100 protsenti.

Küljenduste valdamine Mixinsiga

See, mida need kaks kombineeritud raamistikku teile annavad, läheb kaugemale koodist, mida kasutate paigutuste loomiseks. Võime väljendada oma paigutusi, ilma et peaks selle võrgu või selle ruudustiku pärast muretsema, muudab teie aju projektide kujundamisel viisi.

Ärge saage valesti aru, mulle meeldivad raamistikud. Bootstrap aitab teil luua enneolematu kiirusega paigutusi. See pakub lahingutestitud võrku, mis läheb kaugemale paigutusest ja pakub igasuguseid CSS-i ja JavaScripti komponente, et kiiresti hakkama saada tavaliste elementidega, nagu tabelid, modaalid ja vormid.

See, mille kujundussüsteem olen välja toonud, on paigutuse kirjeldamiseks kasutatava keele muutmine. See on loomulik, tagurpidi ühilduv ja hõlpsasti õpitav süsteem, mis muudab teie arvamust veebisaitide kujundamisel.

Sõnad : Ray Villalobos

Ray Villalobos on ettevõtte Lynda.com töötajate autor, kes on spetsialiseerunud täispika kujunduse ja arenduse, esiosa kujunduse, JS, AngularJS, Sass, Bootstrap alla. See artikkel avaldati algselt 2007. Aasta väljaandes 274 netiajakiri .

Meeldis see? Loe neid!