Obsah
- Problém
- Susy
- Kontajnery
- Rozpätia
- Nastavenie predvolených nastavení
- Polstrované stĺpiky
- Správa mediálnych dotazov
- Bod zlomu a Susy
- Osvojenie rozloženia pomocou mixínov
Vytváranie responzívnych rozložení môže byť náročné kvôli použitej matematike, takže je bežné, že sa návrhári pri zjednodušovaní procesu obracajú na rámce a / alebo Sass. Mnoho rámcov je založených na mriežke s 12 stĺpcami, ale responzívny web nie vždy zapadá do tejto štruktúry. Tu vám ukážem, ako pomocou dvoch rozšírení Sass vytvoriť skutočne flexibilné rozloženie, ktoré presahuje mriežku s 12 stĺpcami.
Problém
Navrhovanie responzívnych rozložení môže byť náročné, pretože zahŕňa výpočet šírky kontajnerov, riadkov, stĺpov a odkvapov v rôznych bodoch zlomu. Rámec môže pomôcť vytvorením predvolieb pre spoločné hraničné hodnoty. Napríklad Bootstrap 3 nám poskytuje 12-stĺpcovú mriežku so štyrmi hraničnými bodmi mediálneho dotazu. Potom použijete triedy, ktoré spôsobia, že váš obsah zaberie určitý počet miest v mriežke a odkvapy vždy zaberú 30 pixelov.
To väčšinou funguje vynikajúco, ale sú tu dva problémy. Po prvé, pridanie týchto tried do vášho označenia môže byť trochu podrobné. Povedzme, že chcete rozloženie, ktoré využíva všetky stĺpce na mobilných zariadeniach, šesť z 12 stĺpcov na malých zariadeniach a štyri na stredných zariadeniach. Toto označenie môže vyzerať asi takto:
h2> Služby / h2> div> článok> img src = "images / icon-exoticpets.svg" alt = "ikona"> h3> Exotické zvieratá / h3> p> Ponúkame špecializovanú starostlivosť o plazy, hlodavce, vtáky a ďalšie exotické domáce zvieratá./p>
Druhým problémom je, že tieto triedy pridávajú informácie o rozložení do vášho HTML a sťažujú aktualizáciu vášho kódu, najmä pri veľkej inštalácii. Ako budú vaše rozloženia zložitejšie, môžete skončiť s nejakým kódom, ktorý vyzerá takto:
div>
Väčšia otázka spočíva v tom, že máte malú flexibilitu. Váš rámec by sa mal starať o matematiku, pretože to je tá ťažšia časť, ale nemalo by to diktovať metriky vášho rozloženia. Kto z vás urobil tieto rámce?
Susy
Jednoduchým prísľubom Susy je, že sa budete starať o dizajn, zatiaľ čo sa bude starať o matematiku. V jadre ide o sadu Sassových mixínov na výpočet šírky v úplne flexibilnom mriežkovom systéme.
Začnite importom knižnice do vášho projektu pomocou príkazu import: @import "susy" ;. Získate tak prístup k Susyinmu mriežkovému rámcu, ktorého implementácia už nemôže byť jednoduchšia. V najzákladnejšej podobe sú len dve kombinácie, ktoré sa musíte naučiť. Prvým je mixin nádoby.
Kontajnery
Kontajnery vám pomáhajú riadiť, ako sa šírka prvku prispôsobuje rôznym zarážkam. Pomocou Susy môžeme kedykoľvek predefinovať kontajnery vo vnútri ktoréhokoľvek prvku bez toho, aby sme do nášho kódu HMTL museli pridávať ďalšie triedy.
Povedzme, že rozložím iný web. Ak chcem vytvoriť kontajner v rámci prvku HTML, môžem do svojej deklarácie pridať zahrnutie, napríklad takto:
#welcome {article {@include container (70%); } // článok}
Toto zaistí, že položka s triedou sekcie bude fungovať ako kontajner bootstrap bez toho, aby ste do nášho HTML museli pridávať triedu .container - čo znamená, že náš HTML môže byť oveľa sémantickejší.
div id = "welcome"> article> h1> Vitajte v hoteli Landon / h1> p> Originálny Landon vytrvá po 50 rokoch v srdci západného Londýna. Štvrť West End má niečo pre každého - od divadla cez stolovanie až po historické pamiatky. A nezabudnuteľná kaviareň Rooftop Cafe je skvelým miestom pre cestujúcich a miestnych obyvateľov, kde sa môžu zapojiť pri pití, jedle a dobrej konverzácii ./p> / article> / div>
Okrem toho, že moje HTML sú oveľa čitateľnejšie, uľahčuje ich aktualizácia. Keď používame triedy ako obsah a scéna, je ľahké predefinovať, čo tieto prvky znamenajú z hľadiska rozloženia, namiesto toho, aby sme museli premýšľať o tom, koľko tried budeme musieť pridať, aby sa náš obsah správal tak, ako chceme. .
Rozpätia
V Susy vytvárate riadky a stĺpce pomocou rozpätí. Ak chcete vytvoriť prvok, ktorý zaberá jeden z troch stĺpcov, môžete napísať niečo také.
#usefulinfo {oddiel {@include span (1 z 3); }}
Na tom je naozaj skvelé, že nikdy nemusíme vyhovovať konkrétnemu počtu stĺpcov a potom podľa toho upravovať prvky. Akýkoľvek prvok v mojom rozložení môže v tom čase zaberať iba toľko miesta, koľko potrebujem.
Týmto sa skutočne zmení spôsob, akým uvažujete o stĺpcoch. Keby som používal Bootstrap, napísal by som vyššie uvedený kód ako .col-sm-4, pretože jedna tretina z 12 stĺpcov sú štyri. So Susy nemusím premýšľať o tom, koľko jednotiek chcem obsiahnuť; Jednoducho môžem určiť veľkosť potrebného priestoru. Ak už nerozmýšľate nad konverziou na konkrétny počet stĺpcov, môžete sa namiesto toho zamerať na to, ako by malo vyzerať rozloženie.
Nastavenie predvolených nastavení
Samozrejme, v každom systéme usporiadania je dobré mať predvolené hodnoty, takže nemusíme v každom prípade špecifikovať veľkosť našich žľabov. Robíme to úpravou premennej nazvanej $ susy v hornej časti nášho Sass:
$ susy: (stĺpce: 12, kontajner: 60em, žľaby: 1/4, pozícia žľabu: vnútri);
Susy má množstvo predvolených nastavení, ktoré môžete použiť na nastavenie predvolenej mriežky, ale toto základné nastavenie sa postará o zostavenie štandardného predvoleného nastavenia ako Bootstrap. Nezabudnite, že všetko v Susy je prispôsobiteľné, takže s nikým z nich sa nikdy nevydáte a môžete to meniť podľa značiek.
Predvolená mriežka bude mať teraz 12 stĺpcov, keď použijeme príkaz @include v kontajneri mixin, a tento kontajner sa uzamkne na šírku 60em s odkvapmi, ktoré majú štvrtinu veľkosti stĺpcov. Ak by sme chceli prispôsobiť naše staršie časti tejto mriežke, mohli by sme napísať vyhlásenie takto:
#usefulinfo {oddiel {@include span (4); }}
To znamená, že každá časť zaberá štyri z 12 stĺpcov. Myslím si však, že má väčší zmysel povedať, že prvok zaberá „jeden z troch“ stĺpcov. Ak potrebujete posunúť stĺpce na určitú pozíciu, môžete použiť tento zápis:
@zahrnúť rozpätie (8 z 4 z 12);
Toto umožňuje prvku zaberať osem stĺpcov, počnúc štvrtým miestom v mriežke s 12 stĺpcami. Pri vytváraní rozloženia sa teda môžete sústrediť na to, čo váš obsah musí robiť, a nie na to, ako dizajn zapadne do vašej existujúcej mriežky.
Polstrované stĺpiky
Ďalším spôsobom, ako ovládať umiestnenie svojich prvkov, je polstrovanie stĺpcov. Týmto sa pridá počet medzier v stĺpcoch na oboch stranách stĺpcov. Môžete napríklad presunúť stĺpec o sedem jednotiek doprava a vložiť ho o jednu jednotku zľava, napríklad takto:
@include pad (7,1);
To znamená, že okrem rozloženia vecí myslením na pozitívne medzery (koľko stĺpcov by mal prvok zaberať), môžete to urobiť naopak a vytvoriť vzory založené na rozstupoch na každej strane vášho obsahu.
Správa mediálnych dotazov
Aby veci skutočne reagovali, musíte byť schopní kombinovať nastavenie a dizajn stĺpcov s citlivými hraničnými bodmi. K tomu môžeme použiť ďalšiu sadu mixinov z knižnice s názvom Breakpoint.
Bod zlomu uľahčuje spracovanie mediálnych otázok v rozloženiach. Robí to zjednodušením jazyka, ktorý potrebujete použiť na vytvorenie hraničných bodov mediálneho dotazu. Tradične ich vytvárate pomocou pravidla ako je toto:
@media (minimálna šírka: 34em) a (maximálna šírka: 62em) {. kontajner {...}}
Takto sa vytvorí rozsah šírok, v ktorých majú vyhlásenia vplyv na vaše rozloženie. Bod zlomu zhŕňa hovory do mixu zdravého rozumu, ktorý sa oveľa ľahšie píše:
.container {@include breakpoint (34em 62em) {...}}
Hovor je tiež odlišný, pretože ho môžeme ľahko priradiť v rámci existujúcej triedy. Skvelé na Breakpointe je, že vytvára predpoklady na základe bežných potrieb rozloženia.
Pravidlá breakpointov sa tiež dajú ľahko naučiť. Musíte vedieť iba tri veci:
- Ak do volania bodu prerušenia zahrniete iba jedno číslo, bod prerušenia prevezme volanie média s požiadavkou na minimálnu šírku
- Ak zahrniete dve čísla, zarážka bude predpokladať, že chcete určiť rozsah medzi týmito dvoma číslami (ako v predchádzajúcom príklade)
- Ak zahrniete dve hodnoty a jedna je reťazec, predpokladá sa, že mixu posielate pár hodnôt funkcií, takže ak chcete, môžete stále posielať v orientácii alebo v akomkoľvek inom špeciálnom pravidle dotazu na médiá.
Bod zlomu bol do verzie Susy vložený od verzie 2.2.1. Verzia Susy funguje rovnako ako mixy Breakpoint, ale namiesto volania breakpoint použijete susy-breakpoint. Rovnaký hovor by sa uskutočnil takto:
.container {@include susy-breakpoint (34em 62em) {max-width: 50%; okraj vľavo: auto; pravý okraj: auto; }}
Bod zlomu a Susy
Keď skombinujete Breakpoint so Susy, získate flexibilnú mriežku, ktorá sa dá ľahko prispôsobiť rôznym vyhláseniam o mediálnych dotazoch. Pozrime sa na HTML sekcie s informáciami na webe.
div id = "hotelinfo"> article id = "užitočné info"> section id = "příjezdu>" / section> section id = "services"> / section> section id = "accessibility"> / section> / article> article id = "greenprogram"> / article> / div>! - hotelinfo ->
Kombináciou Susy a Breakpoint môžeme vytvárať mediálne dotazy, ktoré obsahujú rôzne rozloženia mriežky. V mojom rozložení mám tri rôzne sekcie, ale chcem, aby mali odlišné pravidlá v závislosti od šírky výrezu.
V týchto dvoch rôznych bodoch prerušenia sa naše rozloženie správa dramaticky odlišne. Vo väčšom zarážke napravo zaberá každá sekcia tri stĺpce. V menšom bode prerušenia zaberá prvý stĺpec 100 percent výrezu, ďalšie dva však polovicu výrezu. To je dôvod, prečo sú tieto mixíny také silné. Kód na vyjadrenie týchto dvoch usporiadaní je stručný:
oddiel {@include susy-breakpoint (650px) {@include span (1 of 3); } // breakpoint @include susy-breakpoint (450px 650px) {& .checklist {@include span (1 of 2)} // checklist} // breakpoint} // oddiel
Najskôr nastavíme predvolené hodnoty pre akýkoľvek prvok v značke sekcie. Ak tieto prvky dosiahnu výrez väčší ako 650 pixelov, zaberajú mriežku troch jednotiek, pričom každá z nich zaberá jednu jednotku.
Ak je rozloženie medzi 450px a 650px, prvky s triedou .checklist (sekcie služieb a prístupnosti) sa zmestia do úplne novej mriežky iba s dvoma stĺpcami a každý prvok zaberie jednu z týchto jednotiek.
Informácie o príchode zaberajú 100 percent mriežky medzi týmito dvoma bodmi prerušenia. Upozorňujeme, že sme nešpecifikovali, čo sa stane pod 450 pixelov. O toto sa starajú predvolené hodnoty - každá sekcia zaberie 100 percent výrezu.
Osvojenie rozloženia pomocou mixínov
To, čo vám tieto dva mixinové rámce poskytujú, ide nad rámec kódu, ktorý používate na vytvorenie rozložení. Schopnosť vyjadriť svoje rozloženia bez obáv z tejto mriežky alebo mriežky mení spôsob, akým pracuje váš mozog pri navrhovaní projektov.
Nechápte ma zle, milujem rámce. Bootstrap vám pomôže vytvoriť rozloženie s nevídanou rýchlosťou. Ponúka mriežku preverenú bojmi, ktorá ide nad rámec rozloženia a poskytuje všetky druhy komponentov CSS a JavaScript na rýchle spracovanie bežných prvkov, ako sú tabuľky, modály a formuláre.
Systém návrhu, ktorý som načrtol, robí zmeny v jazyku, ktorý používate na popis rozloženia. Je to prirodzený, spätne kompatibilný a ľahko naučiteľný systém, ktorý zmení vaše myslenie pri navrhovaní webových stránok.
Slová: Ray Villalobos
Ray Villalobos je zamestnanec autora na Lynda.com so špecializáciou na dizajn a vývoj full-stacku, frontend design, JS, AngularJS, Sass, Bootstrap. Tento článok bol pôvodne publikovaný v čísle 274 sieťového časopisu.
Páčilo sa vám to? Prečítajte si tieto!
- 20 krokov k dokonalému rozloženiu webových stránok
- Vynikajúci výber tutoriálu pre Wordpress
- Fonty na tetovanie zadarmo pre návrhárov
