Как да създадете гъвкави оформления със Susy и Breakpoint

Създаването на отзивчиви оформления може да бъде предизвикателство поради математиката, така че е обичайно дизайнерите да се обръщат към рамки и / или Sass, за да опростят процеса. Много рамки се базират на решетка от 12 колони, но отзивчивият сайт не винаги се вписва в тази структура. Тук ще ви покажа как да използвате две разширения на Sass, за да създадете наистина гъвкаво оформление, което надхвърля решетката от 12 колони.



Проблемът

Проектирането на отзивчиви оформления може да бъде трудно, тъй като включва изчисляване на ширината на контейнерите, редовете, колоните и улуците при различни точки на прекъсване. Рамките могат да помогнат, като създадат предварително зададени настройки за общи точки на прекъсване. Bootstrap 3 например ни дава решетка от 12 колони с четири точки на прекъсване на медийни заявки. След това използвате класове, които карат съдържанието ви да заеме определен брой места в мрежата, а улуците винаги заемат 30px.



В просто оформление на Bootstrap 3 само с три точки на прекъсване (две показани по-горе) има класове, които не добавят семантична стойност

В просто оформление на Bootstrap 3 само с три точки на прекъсване (две показани по-горе) има класове, които не добавят семантична стойност

Това работи блестящо през повечето време, но има два проблема. Първо, добавянето на тези класове към вашата маркировка може да стане малко подробно. Да предположим, че искате оформление, което използва всички колони на мобилни устройства, шест от 12-те колони на малки устройства и четири на средни устройства. Тази маркировка може да изглежда по следния начин:



Services

Exotic Pets

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

Вторият проблем е, че тези класове добавят информация за оформлението към вашия HTML и правят кода ви труден за актуализация, особено при голяма инсталация. Тъй като вашите оформления стават по-сложни, може да се окажете с някакъв код, който изглежда така:

По-големият въпрос е, че имате малка гъвкавост. Вашата рамка трябва да се грижи за математиката, защото това е трудната част, но не трябва да диктува показателите на вашето оформление. Кой направи тези рамки шеф на вас?



Сузи

Сузи простото обещание е да ви позволи да се притеснявате за дизайна, докато той се грижи за математиката. В основата си е набор от комбинации на Sass за изчисляване на ширини в напълно гъвкава мрежа мрежа.

Susy е поредица от комбинации за Sass, която се грижи за математиката за всяка мрежа на оформление, така че можете да се съсредоточите върху дизайнерските елементи

Susy е поредица от комбинации за Sass, която се грижи за математиката за всяка мрежа на оформление, така че можете да се съсредоточите върху дизайнерските елементи

Започнете, като импортирате библиотеката във вашия проект чрез команда за импортиране: @import 'susy' ;. Това ви дава достъп до мрежата на Susy, която не може да бъде по-проста за изпълнение. В най-основната си форма има само два микса, които ще трябва да научите. Първо е смесването на контейнера.

Контейнери

Контейнерите ви помагат да контролирате как ширината на даден елемент се адаптира към различни точки на прекъсване. Със Susy можем да предефинираме контейнерите във всеки елемент по всяко време, без да се налага да добавяме допълнителни класове към нашия HMTL код.

как да използвате телефона си като таблет за рисуване

Да кажем, че създавам различен уебсайт. Ако искам да създам контейнер в HTML елемент, мога да добавя включване в моята декларация, като това:

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

Това ще направи елемента с клас секция да работи като контейнер за зареждане, без да се налага да добавяте клас .container в нашия HTML - което означава, че нашият HTML може да бъде много по-семантичен.

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.

Освен че прави моя HTML много по-четлив, това прави нещата по-лесни за актуализиране. Когато използваме класове като съдържание и сцена, е лесно да предефинираме какво означават тези елементи по отношение на оформлението, вместо да се налага да мислим за това колко класа ще трябва да добавим, за да накараме нашето съдържание да се държи така, както искаме .



Разделът за добре дошли на този сайт използва гъвкавите контейнери на Susy, зададени на процент от ширината на прозореца за гледане



Разделът за добре дошли на този сайт използва гъвкавите контейнери на Susy, зададени на процент от ширината на прозореца за гледане

Обхваща

В Susy създавате редове и колони с помощта на обхвати. За да създадете елемент, който заема една от трите колони, можете да напишете нещо подобно.

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

Това, което наистина е страхотно в това е, че никога не трябва да се съобразяваме с определен брой колони и след това да коригираме съответно елементите. Всеки елемент в моето оформление може да заема само количеството пространство, което ми е необходимо по това време.



Използвайки прост оператор @include span, можем да настроим всеки от контейнерите да се побере в персонализирана решетка с три колони

Използвайки прост оператор @include span, можем да настроим всеки от контейнерите да се побере в персонализирана решетка с три колони

Това наистина променя начина, по който мислите за колоните. Ако използвах Bootstrap, щях да напиша горния код като .col-sm-4, тъй като една трета от 12 колони е четири. Със Сузи не трябва да мисля колко единици искам да обхвана; Мога просто да посоча количеството пространство, от което се нуждая. Когато вече не мислите за преобразуването в определен брой колони, вместо това можете да се съсредоточите върху това как трябва да изглежда оформлението.

Настройване на настройки по подразбиране

Разбира се, във всяка система за оформление е добре да имате настройки по подразбиране, така че не е нужно да посочваме размера на нашите улуци във всеки случай. Правим това, като модифицираме променлива, наречена $ susy в горната част на нашия Sass:



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

Susy има много стандартни настройки, които можете да използвате, за да настроите мрежата си по подразбиране, но тази основна настройка ще се погрижи за съставянето на стандартно подразбиране, подобно на Bootstrap. Не забравяйте, че всичко в Susy може да се персонализира, така че никога не сте женени за нито едно от тях и можете да ги променяте на базата на етикет по етикет.

Решетката по подразбиране вече ще има 12 колони, когато използваме командата @include в контейнера mixin и този контейнер ще се заключи на 60em ширина, с улуци, които са една четвърт от размера на колоните. Ако искахме да приспособим по-ранните си раздели към тази мрежа, бихме могли да напишем декларацията по следния начин:

безплатен софтуер за редактиране на видео като кирпич след ефекти
#usefulinfo { section { @include span(4); } }

Това означава, че всеки раздел заема четири от 12-те колони. Мисля обаче, че е по-логично да можеш да кажеш, че даден елемент заема „една от трите“ колони. Ако трябва да изместите колоните до определена позиция, можете да използвате тази нотация:

@include span(8 at 4 of 12);

Това позволява на елемент да заеме осем колони, започвайки от четвъртата позиция в решетка от 12 колони. Така че, когато създавате оформление, можете да се съсредоточите върху това, което трябва да направи вашето съдържание, вместо върху това как дизайнът се вписва в съществуващата ви мрежа.

Подплатени колони

Друг начин за контрол на разположението на вашите елементи е чрез подплащане на колоните. Това добавя редица пространства за колони от двете страни на колоните ви. Например, можете да преместите колона седем единици надясно и да я поставите с една единица отляво, по следния начин:

@include pad(7,1);

Това означава, че в допълнение към излагането на нещата, като мислите за положителни интервали (колко колони трябва да заеме даден елемент), можете да направите обратното и да създадете дизайни въз основа на разстоянието от всяка страна на вашето съдържание.

Използвайки подложката за включване, е възможно да разпределите съдържанието си въз основа на отрицателно пространство

Използвайки подложката за включване, е възможно да разпределите съдържанието си въз основа на отрицателно пространство

Управление на медийни заявки

За да направите нещата наистина отзивчиви, трябва да можете да комбинирате настройката и дизайна на колони с отзивчиви точки на прекъсване. За целта можем да използваме друг набор от комбинации от библиотека, наречена Точка на пречупване .

Breakpoint улеснява обработката на медийни заявки във вашите оформления. Това става чрез опростяване на езика, който трябва да използвате, за да създадете точки за прекъсване на медийни заявки. Традиционно ги създавате, като използвате правило като това:

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

Това създава диапазон от ширини, в които декларациите оказват влияние върху оформлението ви. Breakpoint капсулира повикванията в микс от здрав разум, който е много по-лесен за писане:

dikembe mutombo 4 седмици и половина
.container { @include breakpoint(34em 62em) { ... } }

Обаждането също е различно, защото можем лесно да присвоим това в съществуващ клас. Страхотното при Breakpoint е, че прави предположения въз основа на общите нужди на оформлението.

Правилата за прекъсване също са лесни за научаване. Има само три неща, които трябва да знаете:

  1. Ако включите само един номер в повикването на точката на прекъсване, точка на прекъсване ще приеме повикване за медийна заявка с минимална ширина
  2. Ако включите две числа, точката на прекъсване ще приеме, че искате да посочите диапазон между двете числа (както в предишния пример)
  3. Ако включите две стойности и едната е низ, предполага се, че изпращате на mixin двойка стойност на характеристиката, така че ако искате, все още можете да изпращате в ориентация или някакво друго правило за специални медийни заявки

Точката на прекъсване е сгъната в Susy от версия 2.2.1. Версията Susy работи точно като Mixpoint mixins, но вместо да извикате breakpoint, вие използвате susy-breakpoint. Същото обаждане ще бъде направено по следния начин:

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

Точка на прекъсване и Сузи

Когато комбинирате Breakpoint със Susy, получавате гъвкава мрежа, която лесно може да се адаптира към различни декларации за медийни заявки. Нека да разгледаме HTML за информационния раздел на даден сайт.

Комбинирайки Susy и Breakpoint, можем да създадем медийни заявки, които съдържат различни оформления на мрежата. В моето оформление имам три различни раздела, но искам те да имат различни правила в зависимост от ширината на прозореца за гледане.

При две различни точки на прекъсване нашето оформление се държи по различен начин, но това е доста лесно да се изрази в Sass със Susy и Breakpoint

При две различни точки на прекъсване нашето оформление се държи по различен начин, но това е доста лесно да се изрази в Sass със Susy и Breakpoint

В тези две различни точки на прекъсване нашето оформление се държи драматично по различен начин. В по-голямата точка на прекъсване вдясно всяка секция заема три колони. В по-малката точка на прекъсване първата колона заема 100 процента от прозореца, но другите две заемат половината от прозореца. Това е, което прави тези комбинации толкова мощни. Кодът за изразяване на тези две оформления е кратък:

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

Първо, настройваме по подразбиране за всеки елемент в етикет на раздел. Ако тези елементи достигнат до прозорец за преглед, който е по-голям от 650px, те ще заемат мрежа от три единици, като всеки ще заеме една единица.

Ако оформлението е между 450px и 650px, елементите с клас .checklist (раздели за услуги и достъпност) ще се поберат в изцяло нова мрежа само с две колони и всеки елемент ще заеме една от тези единици.

Информацията за пристигане заема 100 процента от мрежата между тези две точки на прекъсване. Забележете, че не сме посочили какво се случва под 450 пиксела. За това се грижат настройките по подразбиране - всеки раздел ще заема 100 процента от прозореца за гледане.

Овладяване на оформления с Mixins

Това, което ви дават тези две комбинации, надхвърля кода, който използвате за създаване на оформления. Способността да изразявате своите оформления, без да се притеснявате за тази мрежа или тази мрежа, променя начина, по който работи мозъкът ви, когато проектирате проекти.

Не ме разбирайте погрешно, обичам рамки. Bootstrap може да ви помогне да създавате оформления с безпрецедентна скорост. Той предлага тествана в битка мрежа, която надхвърля оформлението, за да осигури всички видове CSS и JavaScript компоненти за бърза обработка на общи елементи като таблици, модали и формуляри.

Описаната от мен система за дизайн е да промени езика, който използвате, за да опишете оформление. Това е естествена, съвместима назад и лесна за научаване система, която ще промени начина, по който мислите за проектирането на уебсайтове.

Думи : Рей Вилалобос

Рей Вилалобос е автор на персонала в Lynda.com, специализиран в проектирането и разработването на пълен стек, дизайн на интерфейси, JS, AngularJS, Sass, Bootstrap. Тази статия първоначално е публикувана в брой 274 от нетно списание .

Хареса ли ви това? Прочетете тези!

как да забележите уебсайта си