.jpg)
Какво е Основна структура?
Основната структура на Client-First е комплект от класове и принципи за създаване на силна основа на HTML за нашите страници.
Малки и големи, начинаещи и напреднали сайтове могат да използват тази структура.
Разработчиците, използващи Client-First, веднага ще разпознаят Основната структура на Client-First. За хората, които не са запознати с Client-First, нашите четими имена на класове ще помогнат да разберат какво прави всеки слой от структурата.
Можем да мислим за нашата Основна структура като за "слоеве" от Div блокове около съдържанието на нашата страница. Всеки слой има специфична употреба, която ни помага да изградим уеб страницата.
Обяснение на всеки клас на Основната структура
6 класа образуват Основната структура.
page-wrapper
Най-външният родител на всички елементи на страницата. Този Div блок обгръща всички елементи на страницата.
Стилове:
Стиловете за page-wrapper не са задължителни. Те могат да бъдат приложени, ако са необходими. Обаче този елемент не бива да се стилизира много.
Основна употреба:
- Позволява бързо да копирате всички елементи на страницата в clipboard. След това можем да "поставим" цялата копирана страница на друго място.
- Позволява да се приложи глобален клас към цялата текуща страница. Например може да се приложи overflow: hidden към цялата страница, за да се предотврати хоризонталното превъртане (скрол). Внимание: Прилагането на overflow: hidden спира всички проблеми с хоризонталното превъртане на страницата, но също така блокира работата на CSS sticky на всички вложени елементи.
- Предотвратява прилагането на класове и уникални стилове директно върху HTML тага <body>. В Client-First ограничаваме стиловете на тага <body> до типография и свойства на фона. Ние можем да приложим персонализирани стилове към page-wrapper, който да обгръща цялата страница. Това ще ни позволи да ограничим стиловете на body от типографията и цвета на фона.
main-wrapper
Основното съдържание на страницата. Използвайте семантическият HTML таг <main>, който обгръща всички или повечето секции на нашия уебсайт.
Навигацията и футерът не трябва да са вътре в <main>.
Стилове:
Стиловете за main-wrapper не са задължителни. Те могат да бъдат приложени, ако е необходимо.
Основна употреба:
- Това е най-добра практика за уеб достъпност. Този слой от Основната структура помага на екранните четци и търсачките да разберат къде е "основното" съдържание на нашата страница.
section_[section-identifier]
Основната употреба на този клас е да повиши ефективността на работния процес вътре в Webflow Designer. Този елемент организира как изглежда панела Navigator и ни помага бързо да се преместваме в областта на разработката.
Този Div блок обгръща цяла секция със съдържание. Препоръчително е да зададете HTML тага на този елемент като <section>. Правим това на панела Settings на елемента section_[section-identifier].
Обърнете внимание, че този слой ще се намира в различна от съдържанието му папка. Въз основа на споразумението за именуване на класове section_[section-identifier], всички класове на секциите се намират в папката section_.
Стилове:
Ако е възможно, трябва да се опитваме да избегнем прилагането на стилове към section_[section-identifier]. Обаче все пак може да се прилагат стилове, ако потрябват.
Управление на глобалните стилове на секциите:
Използвайте глобален допълнителен клас, например section-style-dark върху класа section_[section-identifier] за да приложите глобалните CSS свойства към всички секции. Всеки клас section_ е персонализиран клас. Прилагането на едни и същи CSS свойства за всеки раздел е грешно. Така, ако искаме, например, "тъмен раздел" можем да приложим класовете color: white и background-color: black към section-style-dark и този клас може да действа като глобално допълнение към нашия персонализиран клас section_.
Основна употреба:
- Дефиниране на раздел на страницата с помощта на Navigator панела. Целта е да се създаде карта на разработваната страница. Това е UX-решение за Webflow Designer.
- Ефектът на превъртане до анкор в Navigator панела. Когато щракнете върху Div блок с този клас, страницата ще се превърти до нужния раздел.
- Без визуална карта на страницата на сайта ни е по-трудно да адаптираме нашите клиенти към Webflow. Това именуване на секции дава на нашите клиенти ясна представа за съдържанието на страницата.
- Бързото превъртане в Navigator панела оптимизира процеса на разработка на сайта и ни помага да работим по-бързо.
Пример:
Началната страница може да има секции като заглавие, за нас, как работи, препоръки и контакти. Можем да наименуваме нашите секции с разбираеми заглавия, за да можем лесно да се ориентираме из страницата.
padding-global
Глобални хоризонтални отстояния. Този клас управлява вътрешните отстояния отляво и отдясно на съдържанието на страницата.
Ние не съветваме този клас да се използва за добавяне на пространство към елементи от съдържанието. Например не съветваме този клас да се използва за стилизиране на отстоянията на елемента от съдържанието в списък.
Стилове:
padding-left и padding-right са единствените CSS свойства стилове върху класа padding-global class. Не съветваме да добавяте други CSS свойства на стилове към този клас.
Основна употреба:
- Създаване на унифицирани глобални отстояния padding-left и padding-right на целия сайт.
- Глобален модификатор за управление на универсалното вътрешно отстояние отляво и отдясно на целия сайт.
Стандартна реализация:
Има гъвкавост в начина, по който можем да използваме padding-global. Нашата препоръчителна структура за padding-global е следната:
- main-wrapper
- section-[section-identifier]
- padding-global
- container-large
...(например компоненти, елементи и др.)
Гъвкавост:
Има различни опции за разположение padding-global.
Разделяме стиловете на padding-global от другите стилове на Основната структура, така че да може да се използват с други елементи от структурата на страницата или без тях. Това е преимуществото на използването на слоевете.
Възможността да контролираме отделно вътрешните отстояния ни позволява да добавим padding-global
- Като родител на container-large
- Като дъщерен елемент на container-large
- Или и там, и там
Всеки вариант дава различен краен визуален резултат.
Ако добавим стойности за CSS padding към нашия клас container-large class, винаги ще сме зависими от стилове на отстоянията на страницата, когато използваме този контейнер. Обаче това не винаги е удобно. Ако отделим padding от max-width, можем да ги използваме независимо един от друг.
container-[size]
Единна глобална система на контейнери за съдържанието на страницата. Цялото или по-голямата част от съдържанието на страницата може да се намира вътре в класа container-.
Стилове:
- margin-left и margin-right са сложени автоматично да изравняват Div блока в центъра на страницата.
- width: 100% за да може съдържанието да заема 100% от наличното пространство.
- Стойността на max-width за ограничаване на широчината на съдържанието width. Client-First включва три различни размера на контейнери - малък, среден и голям. Можем да редактираме тези стойности, да добавяме нови или да ги трием.
Основна употреба:
- Центриране на съдържанието на страницата
- Задаване и управление на единни стойности на max-width в целия проект.
В зависимост от сайта, който разработваме, можем да зададем 2, 3 или 4 различни класа на контейнери.
Client-First предлага три различни размера на max-width контейнера - малък, среден и голям. Можем да редактираме тези стойности, да добавяме нови или да ги трием в зависимост от нашия проект.
padding-section-[size]
Единна глобална система за вертикално отстояние за секциите. Създава вътрешно отстояние отгоре и отдолу на секцията.
Стилове:
- padding-top и padding-bottom за създаване на вертикални отстояния на секцията.
Основна употреба:
- Поддържане на единни стойности за отстоянията на секциите в проекта.
- Обновяване на всички отстояния отгоре и отдолу във всички секции глобално в целия проект.
Можем да зададем 2, 3 или 4 различни размера на секции в нашия проект.
Client-First предлага три различни размера на вертикалното отстояние на секциите - малък, среден и голям. Можем да редактираме тези стойности, да добавяме нови или да премахваме стойности в зависимост от нашия проект.
Ако някъде имаме специфично отстояние за секция, можем да приложим уникалните стилове към класа section_[section-identifier].