.png)
V2 ажурирања
Сè е појасно објаснето во V2
Го воведуваме стратегискиот пристап[Тема].
Најзначајното ажурирање на Client-First V2 е како ги објаснуваме Client-First концептите. На V1 му недостасуваше организација на содржината и јасно објаснување за некои теми.
V2 воведува нов метод за организација на содржината за да ни помогне подобро да го разбереме Client-First. Секоја тема има попрецизно објаснување.
Посуштинските теми се организирани како "стратегии"—
Папки
Папките ќе го редефинираат начинот на кој ги визуелизираме класите во рамките на нашиот Webflow проект.
Client-First папките ќе ни овозможат да ги организираме класите во флексибилна структура на папки.
Користете го знакот 'долна црта' за да креирате сопствена папка. Организирајте ги помошните класи само со цртички.
Папките ќе работат само со Client-First + Finsweet Extension. Научи повеќе во Папки.
Компонентите се подобро дефинирани
Во V2, ќе бидеме поконкретни кога користиме компоненти - и поконкретни кога користиме долни црти!
V1 Почетно издание
долна црта во класното име = компонента
V2 издание со Папки
долна црта во класното име = папка
[име на папка]_компонента = компонента
Користењето на долна црта во името на класата не мора да значи дека папката е компонента. Сега користиме долни црти за организација или групирање на елементи во Папки.
Компонентите сега имаат специфична класификација. Ако сакаме некој елемент да се смета за компонента, го користиме зборот "компонента" за идентификаторот на елементот.
Научи повеќе во Стратегија на папки.
Типовите на класи се подобро дефинирани
Прилагодена класа, помошна класа, глобална класа, комбо класа се подобро дефинирани и објаснети во Стратегија на класи 1.
Со подобро разбирање на типовите на класи, можеме да донесуваме подобри одлуки додека градиме.
page-padding сега е padding-global
Најважната вредност за padding на нашиот проект се нарекува padding-global. Оваа промена на името води до подобра организација на нашиот систем на папки.
Наместо да ја ставиме нашата padding класа во page- папката, ја ставаме во папката padding
Научи повеќе во Стратегија на суштинската структура.
section-[identifier] сега е section_[identifier]
Класите на секции сега ја користат долната црта наместо цртичката.
Нашето ново ажурирање на Папка гарантира дека Помошните класи се единствените класи кои користат цртички. Прилагодливите класи користат долна црта. Класите на секции се класифицирани како "прилагодливи класи", што значи дека им треба долна црта во името на класата.
Долната црта ги поставува "класите на секции" во една папка за прилагодливите класи - section_.
Сите класи на секции ќе бидат во папката section.
Нова padding-section-[size] воспоставува global section padding
Додадовме нов систем за помошни класи за управување на глобалното растојание помеѓу секциите. Ова ажурирање на системот за растојание има за цел да го ограничи бројот на опции за растојание што ги имаме за секциите + да ги задржи унифицирани низ целиот проект.
Нови padding-section-[size] класи (3 класи) — copy to clipboard.
Новата heading-style-[h#] ги одржува унифицирани стиловите за наслов
Кога стиловите на ознаката Heading треба да се прикажат како различна ознака Heading, можеме да ја користиме нашата класа heading-style-[h#].
На пример, ако ни треба H2 за целите на SEO, но текстот треба да ги следи стиловите на H3, можеме да примениме heading-style-h3 на H2 за да го промениме неговиот стил додека ја одржуваме соодветната семантичка HTML ознака.
Научи повеќе во Типографска стратегија.
Нови heading-style-[h#] класи (6 класи) — copy to clipboard.
Нови display-inlineflex помошни класи.
Примени го CSS својството display: inline-flex, што не е поддржано CSS својство во Webflow.
Случај за употреба: Користејќи го CSS својството display: flex обично е важно во нашиот проект. Сепак, по стандард, display: flex предизвикува елементите да зафаќаат 100% од просторот. Ова го отежнува користењето на flexbox за копчиња. display: inline-flex овозможува елементите да се однесуваат како inline, додека задржувајќи ги flex способностите во себе.
Научи повеќе во Системи за Помошни класи.
Нови display-inlineflex класи (1 класа) — copy to clipboard.
Отстратени show- помошни класи
Отстранети се show- помошните класи. Класите show применуваа display: block на различни нивоа на responsivity.
Откривме дека класите show- беа многу ограничувачки, и работеа само во мал број на случаи за употреба, и можеа да доведат до несакани проблеми со responsivity.
Наместо да ги применуваме "show" класите на елементи, можеме да ги применеме display својствата директно на прилагодливата класа.
Дополнително, можеме да применеме било какви display својства на комбинирана класа. На пример, modal_component is-visible-tablet.
Нови стратегии за растојание
V2 го проширува начинот на кој што можеме да користиме помошни и прилагодливи класи за да се распространуваат елементи преку проектот. Додадовме нови методи за имплементација на распространување.
Растојание со систем за помошна класа
- Обвивки за растојание(V1)
- Блокови за растојание(ново во V2)
Растојание со прилагодливи класи
- На елементот (V1)
- CSS Grid на родителот (ново во V2)
Подобрен прилагодлив CSS во градувањето на Глобални Стилови
Постои целосен преглед на секој CSS фрагмент вклучен воhe Global Styles embed страната.
Целосно нови страни во= V2
V2 додава нови страници со содржина за теми кои не се опфатени во V1
- Intro ги опишува најважните теми на Client-First.
- Learning path ни дава 7-дневен пат до учење Client-First.
- Big docs помага да нѐ мотивира да се научи Client-First во целост.
- Folders и Folders strategy ни дава целосно објаснување за нашиот нов метод за визуелизација на класата.
- Semantic HTML tags ни дава подобро разбирање за тоа како правилно да се гради во HTML.
- CSS Specificity ни дава објаснување зошто класите за margin и padding не функционираат кога копирате и залепувате елементи и компоненти.
- Global embed ни помага да ја разбереме целта на прилагодливиот CSS додаден на Client-First cloneable.
- Sales strategy ни дава методи за користење на Client-First во нашиот процес на продажба за да освоиме повеќе проекти.
- Convert past projects ни дава информации за конвертирање на минатите проекти во Client-First.
Од Client-first до Client-First
Finsweet неодамна објави ново лого. Ова лого ја заменува малата "f" со голема "F".
Ќе го следиме истиот тренд за Client-First.
Client-first V1 има мала буква "f". Во V2, ја формализираме големата F низ брендот. Ова ажурирање го менува Client-first во Client-First.
Дали сте заинтересирани за преместувањето на Finsweet од f во F? Гледајте го нашиот пренос во живо овде.