Въведение

Преглед на Client-First

👉 Това е кратък преглед на основните аспекти на “Client-First”. За да се потопите напълно в темата ви препоръчваме да се запознаете с пълната документация.

Начинаещ ли сте във Webflow? Преди да започнете да изучавате Client-First, ви препоръчваме да се изучите основите на работа с Webflow. Client-First няма да ви научи да работите с HTML и CSS. Важно е да разбирате основите на уеб разработката преди да започнете да изучавате Client-First. Прочетете нашата статия за тези, които само започват да работят в Webflow.

Цели на Client-First

1. Да създадем система за ефективна организация на нашия проект
2. Да увеличим скоростта и удобството на разработката при използване на Webflow Designer
3. Да определим стратегия за използване на класовете в проекта
4. Да създадем единна основна структура, която да е обща за всички страници
5. Да разработим проект на Webflow така, че да е лесно да се поддържа и мащабира
6. Да направим проекта разбираем за разработчици, клиенти и всички останали

Какво значи "Client-First"?

Client-First = Поставяме интересите на нашите клиенти на първо място в процес на създаване на проект във Webflow.

Правейки нашите клиенти главен приоритет, ние създадохме система за стилове, която да задоволява потребностите им и ни прави по-добри разработчици на Webflow.

Повечето клиенти искат ние да

1. Създадем мащабируем проект на Webflow
2. Създадем проекта бързо, без да губим качество
3. Създадем проект, който да могат да поддържат различни разработчици
4. Създадем проект, който можем да прехвърлим на друг разработчик или Webflow агенция, ако клиентът реши да смени изпълнителя
5. Създадем проект, който клиентът може да управлява сам в Designer*

* Не всички клиенти искат да управляват самостоятелно своя проект на Webflow. Някои искат, но повечето не.

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

Решения в Client-First ни помагат по-бързо да разработваме проектите си на Webflow и също така помагат да се създават проекти, които да са максимално полезни на клиентите ни.

Споразумение за именуване на класове

Client-First се фокусира на разбираемо именуване на класове в проекта.

Разработчик на Webflow, клиенти или всякакъв друг човек, дори без опит на работа с Client-First, трябва лесно да разбере какво прави всеки от класовете само от името му.

Цели на споразумението за именуване на класове в Client-First:

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

Кратък преглед на теми

Въведението е кратък преглед на ключовите теми в Client-First, които ние по-подробно ще разгледаме по-нататък в документацията. Обаче това не са всички принципи на Client-First.

Тази страница е създадена, за да направи преглед на всички значими теми. Ще бъде добре да я прочетете, ако разглеждате възможността да използвате Client-First за създаване на проекти във Webflow.

Стратегии за работа с Webflow

• Стратегия за класове
• Стратегия за основна структура
• Стратегия за типография
• Стратегия на отстоянията
• Стратегия за папки

‍

‍Отказ от отговорност: Тези стратегии не следват всички най-добри практики на традиционната разработка на HTML и CSS. Но не е задължително да са традиционни, защото това е Webflow. Webflow промени подхода за работа с HTML и CSS, като създаде система за визуално създаване на сайтове. Client-First е специално проектиран да оптимизира и подреди вашия работен процес в Webflow Designer.

[fs-toc-h3]Стратегия за класове

Ние разделяме класовете на “персонализирани” и “служебни” като използваме символа за долна черта _.

Персонализираните класове имат долна черта в името си
header-primary_content

Служебните класове нямат _ в името си
text-color-black

[fs-toc-omit]Персонализирани класове

Персонализираните класове обикновено се използват за стилизация на конкретни елементи на страницата.

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

Примери:

• ‍about-team_component
• ‍footer_column
• ‍clients-slider_arrow
• nav_link
• home-header_texture

Примери на използване на компоненти за форма form_[element-name]

• ‍form_component
• form_wrapper
• form_block
• form_label
• form_input
• form_submit

Всеки от тези примери показва конкретен елемент.

[fs-toc-omit]Служебни класове

Служебните класове най-често се използват за важни CSS-стилове на страницата.

Служебните класове се създават за конкретна комбинация на CSS-свойства, които могат да бъдат използвани из целия проект. Например клас за ^{background-color} или за ^font-size. Служебните класове не съдържат долна черта в името си.

Повечето класове, които се използват в стартовия проект на Client-First, са служебни класове.

Примери:

• ‍padding-global
• max-width-small
• margin-large
• ‍text-color-blue
• background-color-black
• ‍display-none

Всеки от тези класове показва конкретни свойства на CSS стиловете.

[fs-toc-omit]Глобални класове

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

Глобален клас е предназначен за използване из целия проект. Той не е преназначен за конкретен елемент. Той използва стилове, които ще останат ‘глобални’ или ’единни’ из целия проект.

Глобалните класове могат да бъдат служебни или персонализирани класове.

Служебните класове винаги са глобални. Те са такива по природата си.

Персонализираните класове могат са бъдат глобални, например header_content. Ние можем да имаме повтаряща се структура на заглавието, използвана из целия проект и този клас ще ни позволи да управляваме стиловете на header_ глобално.

Ако планираме да използваме някой клас в целия уеб сайт, той се смята за глобален.

[fs-toc-omit]Комбинирани класове

Комбинираните класове са класове, създадени като вариация на базовия клас. Комбинираният клас наследява стиловете от базовия и добавя към тях допълнителни стилове. 

Ние смятаме за “базов клас” първия клас в нашия комбиниран. Добавяме отгоре на базовия нов клас, за да създадем уникална вариация. Клас, който създава уникална вариация има представка is-.

Комбинираният клас на вариацията на is- ще работи само в съчетание с базовия клас (или класове) преди него. Заедно тези натрупани класове създават комбиниран клас.

Във видеото по-надолу е показано, че клас is-blue не работи сам. Той работи само като допълнение към базовия клас button.

Комбинираните класове могат да бъдат създадени от персонализирани или служебни. В примера по-нагоре button is-blue показва служебен клас, който е част от комбиниран клас.

Ние разглеждаме работа с класове по-подробно в страницата на документацията Стратегия за класове 1.

[fs-toc-h3]Стратегия на Основната структура

В Client-First ние използваме Основната структура за всички проекти.

• page-wrapper
• main-wrapper
• section_[identifier]
• padding-global
• container-[size]
• padding-section-[size]

‍

• page-wrapper обвива цялото съдържание на страницата.
• main-wrapper съдържа цялото "основно" съдържание на страницата. Това е най-добра практика за уеб достъпността на сайта.
• section_[identifier] подрежда панела Navigator на Webflow Designer.
• padding-global управлява универсалното вътрешно отстояние отляво и отдясно на съдържанието на страницата.
• container-[size] определя максималната широчина на контейнерите, които обвиват нашето съдържание.
• padding-section-[size] управлява универсалното отстояние отгоре и отдолу на секциите на целия сайт.

Използвайки Основната структура, ние можем да задаваме важните CSS-свойства глобално из целия проект. Тази методика създава единен подход към работа на всички разработчици в рамките на Client-First.

Показаната по-надолу структура може да се използва на повечето уеб сайтове.

[fs-toc-omit]Пример на структура на страницата

Секциите са организирани вътре в Navigator и работят като закотвени връзки при кликване върху тях.

[fs-toc-omit]Пример на структура на секцията

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

Напълно изучаваме този концепт на страницата на документацията на Стратегия за Основна структура.

[fs-toc-h3]Стратегия на типографията

Нашата стратегия е да съхраним типографията колкото се може по-унифицирана и глобално управляема. Ние използваме служебните класове за управляване на типографията.

Идеално би било ако не трябваше да присвояваме класове на текстовите елементи. Най-добре е да наследваме стандартните стилове, използвани за ^body, ^paragraph, и ^H1 - ^H6 HTML тагове.

[fs-toc-omit]HTML тагове

Какво са HTML таговете? Страница на Webflow University.

Винаги започвайте от стилизация на тези тагове:

^H1, ^H2, ^H3, ^H4, ^H5, ^H6 , ^body

‍

Тези стандартни стилове са за всеки тип заглавие и за основен текст на нашия проект.

Класовете за тях трябва да се използват само когато е наложително да се направят промени на стандартния стил.

Вие можете да намерите набор от служебни класове в официалния клонируем проект на Client-First. Всеки от тези класове има представка heading- или text- и съдържа служебни стилове, които могат да бъдат използвани върху текстови елементи. Такива класове позволяват да се правят промени с използване на единната система на служебни класове.

[fs-toc-omit]Класове на типографията:

• heading-style-[h#]
• text-weight-[weight]
• text-size-[size]
• text-style-[css-property]
• text-color-[color]
• text-align-[alignment]

Например ако ние искаме да направим заглавие ^H1 в същия стил, в който е нашето заглавие ^H2, ние можем да използваме класа heading-style-h2 върху нашия ^H1. Това прави ^H1 стилизиран като ^H2, при това се съхранява тага ^H1 за SEO.

Например ако ние искаме да направим някой от текстовите елементи в проекта син, ние можем да използваме text-color-blue към него и той ще стане син.

‍

И двата примера демонстрират променени стандартни стилове на типографията. Ако стандартните стилове H1 или на текстовия елевент не се променят, то не ни трябва и клас.

Ние по-подборно разказваме за тази концепция на страницата на документацията за Стратегия за типографията.

[fs-toc-h3]Стратегия на отстояния

Работата с отстоянията може да се раздели на два дяла:

1. Използване на служебните класове
2. Използване на персонализираните класове

Всеки от тези дялове има две основни стратегии за създаване на отстояния.

[fs-toc-h4]Използване на служебни класове

Класовете margin- и padding- зададени в служебните класове на Client-First.

‍[margin/padding direction class] + [margin/padding size class]

В рамки на концепцията на служебните класове, ние разделяме две стратегии за създаване на отстояния:

1. Стратегия на блокове за създаване на отстояния
2. Стратегия на контейнери за създаване на отстояния

И блоковете, и контейнерите са основани на едни и същи служебни класове за отстояния.

Блоковете и контейнерите се различават един от друг с това как се използват на страницата.

Стратегия на блокове за създаване на отстояния

В Client-First "блокове за създаване на отстояния" са празни Div блокове, които създават пространство между два съседни елемента.

1. Добавете на страница "блок за създаване на отстояние" — Div блок с два класа  
‍[padding-bottom] + [padding-size]

2. Добавете на страницата елементи на съдържанието преди и след блока за създаване на отстояние.

3. Блок за създаване на отстояние ще създаде пространство (padding) между елементи.

Стратегия на контейнери за създаване на отстояния

В Client-First "контейнер за създаване на отстояния" е Div блок, който обвива дъщерния елемент и създава пространство между него и съседния елемент.

1. Добавете на страницата "контейнер за създаване на отстояния" — Div блок с два класа
‍[margin/padding-direction] + [margin/padding-size]

2. Поставете елемента на съдържанието вътре в контейнера за създаване на отстояния.

3. Контейнер за създаване на отстояние създава пространство (margin или padding) между себе и съседен елемент.

[fs-toc-h4]Стратегия на персонализираните класове

Използване на персонализирани класове

Според стратегия за използване на персонализираните класове, ние задаваме стойности за ^margin и ^padding за самия елемент, за който трябва да се създадат отстояния.

Например използваме faq_title върху заглавието, ако за него ни трябва да създадем уникално отстояние, което не може да бъде създадено, когато използваме система от служебните класове. CSS свойството ^{margin-bottom: 0.75rem} се използва за самия клас faq_title class.

Стратегия на CSS Grid

Стратегия на отстояния на CSS Grid използва CSS Grid върху родителския контейнер и по този начин създава отстояние за дъщерните елементи вътре в него.

Ние можем да създаваме вертикални и хоризонтални отстояния между дъщерните елементи с помощта на CSS ^grid.

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

Ние разглеждаме стратегията за отстояния на страницата на документацията за Стратегия за отстояния.

[fs-toc-h3]Стратегия на папките

В Client-First е реализирана функцията за виртуални папки с помощта на разширението Finsweet.

Символ за долна черта има голямо значение в Client-First

Долната черта определя персонализираните класове и папки. Ние можем да създаваме виртуали папки за нашите персонализирани класове с помощта на долна черта.

Например blog_header_graphic представлява папка blog_ с вложена папка header_ , в която се намира графичният елемент graphic.

Ето как изглежда това във виртуална система от папки:

Ако не използваме символ за долна черта се създава служебен клас. Служебните класове автоматично се поставят в папката Utility.

Всякакъв клас без долна черта ще бъде поставен в папката Utilities.

Всяка вложена папка в папката Utility ще бъде създадена от първата ключова дума в името на класа.

Например text-color-black показва следната структура от папки: В папката за служебни класове Utility се намира папка text-, в която се намира папка color- с вложен елемент black.

Ето как това изглежда във виртуалната система на папките:

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

Папките ни дават възможност да адаптираме стратегията на разработка за един конкретен проект.

Ние подробно разглеждаме тази функционалност на страницата на документацията Стратегия за папките.

Размери и rem

Client-First използва rem. Rem е измервателна единица за стойности, които ние слагаме в Designer.

Какво е rem?

Rem означава "root ephemeral unit" (корневая относительная единица) или "root em".

• Rem е относителна измервателна единица, която се базира върху размера на шрифта на кореновия елемент ^font-size
• Кореният елемент е ^html
• Rem зависи от размера на шрифта на ^html
• Всички размери, използвани в Client-First, са сложени в rem

Математиката

Всеки 16px е 1rem, когато размерът на шрифта е зададен по подразбиране в настройките на браузъра. При създаване на нашия Webflow проект, ние използваме 16px като базова стойност за изчисляване на rem.

Всяко преобразуваме на rem размер в проекта е кратно на 16.

96px / 16px = 6rem

32px / 16px = 2rem

4px / 16px  = 0.25rem

Защо rem?

Използването на Rem ни дава значителни предимства за подобряване на уеб достъпността, което ние в Client-First ценим особено много.

Настройките за шрифта на браузъра и мащабирането на браузъра работят идеално в система, базирана на rem. Използването на Client-First в комбинация с препоръчителната система rem гарантира спазването на най-добрите практики в областта на уеб достъпността и мащабирането на съдържанието.

Ние обясняваме работа с rem по-подробно на страницата на документацията Размери и rem.

‍