.png)
Опција 1: Конвертирајте го постоечкиот проект да одговара на Client-First
Претворањето на нашите стари проекти во Client-First е многу привлечно. Пред Client-First, имавме различни стратегии, различни конвенции за именување, а можеби и помалку знаење. Сакаме да ги промениме старите проекти во нашиот нов Client-First начин на размислување за правилно да ги управуваме и да ги прошируваме.
Комплексноста на оваа иницијатива е целосно зависна од минатиот проект. Нашата задача може целосно да се промени врз основа на големината, стилот на градење и стратегијата на класата на проектот.
* Ова е процес кој одзема многу време. *
Бидете свесни дека конвертирањето на постоечки проект во Client-First е голема задача. Ќе имаме многу рачна работа ако:
- Вебсајтот е голем.
- Конвенцијата за именување е многу различна од Client-First.
- Проектот го изградил некој друг.
Колку и да мислите дека тоа ќе потрае, ќе потрае подолго.
Анализирајте го постоечкиот проект и бидете сигурни дека вреди да се направи префрлањето.
Подолу се чекорите што ќе ги преземеме за да конвертираме проект во Client-First:
1. Копирајте ги помошните класи Client-First во проектот
Чекор 1:
Клонирајте го Client-First официјален проект што може да се клонира.
Чекор 2:
Избришете ги margin и padding класите на Style Guide страната на проектот што може да се клонира.
Копирајте ја Style Guide page-wrapper за да ја копирате цела содржина на страната.
Создадете нова страна во проектот за да служи како Client-First водич за стил.
Залепете ја page-wrapper содржината на новата страна.
Чекор 3:
Користете го Finsweet Extension за правилно да се додадат margin и padding класи на проектот. Одете во "Client-First", потоа "Add spacing system". Ова ги создава margin и padding класите во проектот.
Зошто го следиме овој процес? Детално го објаснуваме на страната за документација CSS специфичност.
Чекор 4:
Започнете со уредување на проектот. Следете ги чекорите подолу.
2. Веднаш почнете да го користите Client-First
Откако ќе ги имаме нашите Client-First помошни класи во проектот, треба да одиме 100% Client-First. Не треба да го следиме претходното именување, стил или стратегија. Нашата цел е да го одземеме проектот од неговите претходни конвенции, па затоа повеќе не треба да ги користиме.
Сè што се движи напред треба да ги следи Client-First принципите, стратегиите и конвенцијата за именување. Секоја класа што треба да се преименува или додаде треба да биде одобрена од Client-First.
3. Претворете од px, em и vw во rem
Сакаме да ги конвертираме сите или повеќето мерни единици во проектот во rem.
rem и % се добри.
px, em или vw треба да се претворат во rem.
Ако проектот е изграден во px, Finsweet Extension може да управува со конверзијата. PX до REM migrator алатката може да ги конвертира сите px вредности во нашиот проект во rem. Ова ќе ни заштеди многу време.
Ако проектот е изграден во em или vw, треба да поминеме низ секоја класа и рачно да ги ажурираме вредностите на големината на мерења базирани на rem. Ова може да биде многу долг и временски процес.
4. Поставете ја основната структура на секоја страница
Имплементирајте ја основната Client-First структура на секоја страна од проектот. Ова може да бара од нас да ги избришеме или менуваме класите, да ја реорганизираме HTML и тековната структура на страната, па дури и да ја обновиме надворешната структура од нула.
Следете ги овие чекори на секоја страна од проектот
- Уверете се дека целата страница е завиткана во page-wrapper
- Додајте embed за глобални стилови на страната
- Одделете ги nav и footer компонентите од главната(main) содржина
- Ставете ја целата главна(main) содржина во main-wrapper
- Создадете section_[identifier] обвивки за секоја секција на страната
- Спроведете на универзално надворешно padding-global
- Спроведете универзален container-[size] систем
5. Спроведување на Client-First принципи
Ова е веројатно фазата од конверзија што зафаќа најмногу време.
Ажурирајте го водичот за стилови
Ажурирајте го Client-First водичот за стиловисо стиловите на проектот. Ажурирајте ги големините, типографијата и боите.
Преименувајте ги класите за да одговараат на Client-First именувањето
Сите или повеќето класи во проектот најверојатно ќе треба да се преименуваат во Client-First стандардите.
Како што се разгледува проектот, преименувајте ја секоја класа што не следи Client-First. Креирајте папки и доведете ја организацијата во проектот.
Се препорачува да се „дуплира“ постоечка класа и да се преименува во Client-First.
Ако постои наредена комбо класа што го создава стилот, се препорачува да се користи бонбоната "Merge Combo Classes" во Finsweet наставката. Ова ни помага брзо да создадеме нови класи врз основа на комбинираните стилови на наредени класи.
Како што продолжуваме да го спроведуваме проектот и да правиме ажурирања, ова ќе биде континуиран процес. До крајот на конверзијата, сите класи во проектот треба да се нарекуваат Client-First.
Променете ги текстуалните елементи за да го следите Client-First
Следете ги концептите во Типографска стратегија.
Ажурирајте ги сите H1 - H6 Heading ознаки за да потврдете дека се точно стилизирани. Уверете се дека повеќето Heading текст елементи немаат класа применета на нив.
Применете ги heading- класите насекаде во проектот каде што треба да се измени стандардната големина на насловот.
Применете ги text- класите каде што е потребна варијација на текстот во проектот.
Додадете помошни стратегии за растојание
Следете ги концептите од Стратегија за растојание.
Додајте блокови за растојание и обвивки за растојание во проектот каде што е соодветно. Применете ги padding-section- класите за да го обедините растојанието од вертикалните секции.
Пример за имплементација на блокови за растојание:
6. Објавете и тестирајте ги сите точки на прекин
Мораме континуирано да го тестираме проектот на објавен webflow.io линк. Како што правиме значајни ажурирања на нашиот проект, нешто може да се скрши во процесот.
Можеби ќе имаме некои проблеми за мобилна респонзивност. Можеби имаме некои стар прилагодлив CSS кои веќе не се потребен.
Добра практика е да се тестира за време и по процесот на конверзија. Кога ќе завршиме со конвертирање на страниците, треба постојано да ги тестираме и итерираме.
Алатки за помош
Додадете го Finsweet Extension на Webflow
Finsweet Extension Client-First таб
Client-First tab-от има алатки специфични за користење на Client-First.
- Додавање на структура на основна страна
- Додавање на систем за растојание
- PX до REM Калкулатор
- PX до REM Мигратор
- Fluid Design Генератор
Finsweet Extension бонбони(Candies)
Овие Candies може да ни помогнат во процесот на конверзија.
- Преуредување на Color Swatches
- Преуредување на CSS Стилови
- Преуредување на Интеракции
- Спојување на Комбо Класи(Merge Combo Classes)
- Отстранување на Класи
- Отстранување на Стилови
- Преуредување на Компоненти
- Одврзување на CMS
Конвертирање во Client-First градење во живо
Во оваа сесија на Learn it Live, ние го прикажуваме процесот на конвертирање на една страна од Webflow вебсајт во Client-First.
Опција 2: Реконструкција во нов проект
Во многу случаи, реконструкцијата на сегашниот сајт во нов проект на Webflow ќе трае помалку време и ќе има подобра долгорочна одржливост.
Многу пати кога луѓето конвертираат стари големи проекти, ги слушаме истите повратни информации.
"Требаше да го изградам на нов проект!"
Option 1 always takes more time than we initially expected. Converting an existing project to matchОпција 1 секогаш одзема повеќе време отколку што првично очекувавме. Конвертирањето на постоечки проект за да одговара на Client-First може да биде голем проект..
Повторното градење на проектот од празно платно може да биде подобра севкупна стратегија и можност за учење.
Потенцијално помалку целокупно време
Ако проектот што сакаме да го конвертираме е многу различен од Client-First, ажурирањето на структурата и класите може да биде многу време интензивно.
Ова може да биде часови или денови на работа за преименување на елементите и реорганизација на проектот. Започнувајќи од празен екран може да трае помалку време.
Оваа изјава во голема мера зависи од големината, опсегот и барањата на проектот.
Долгорочна одржливост
Поаѓањето од нов проект секогаш ќе биде поорганизирано од конвертирањето на постоечки проект. Конвертираниот проект секогаш ќе има стари класи кои се појавуваат по конверзијата.
Може да откриеме дека се случуваат 'чудни работи' во нашиот проект поради постоечките конфигурации што ги заборавивме или не ги поставивме самите. Ако продолжиме да го прошируваме сајтот, може да биде добра долгорочна стратегија да се гради од нов проект.
Опција 3: Не менувајте ја во Client-First
Можеби не е добра идеја да се конвертира проектот во Client-First. Оценете го проектот и одлучете дали вреди да се одвои време за да го конвертирате или обновите.
Дали на сајтот ќе му треба многу одржување?
Дали сегашниот проект е неупотреблив?
Дали има проблем со скалирање на сајтот?
Ако одговорот на секое од тие прашања е „Не“, можеби не е добра идеја да го претворите проектот во Client-First. Треба да има јасна корист и случај на употреба за конвертирање или реконструкција на минат проект.
Ако има добра причина, оди по неа. Користете ги опциите 1 или 2 врз основа на барањата на проектот.
Општа препорака
Запомнете дека сите проекти се различни. Ова е општа препорака, а не препорака заснована на некој специфичен проект.
Оди со Опција 2: Реконструкција во нов проект.
Откривме дека е потребно помалку време за да се изгради нов проект во Webflow отколку што е потребно за да се направат значајни уредувања на лошо изграден проект.
Ние, исто така, веруваме дека изградбата на нов проект води до подобро учење и разбирање на Client-First системот. Можеме да се фокусираме чисто на најдобрите практики за Client-First имплементација наместо да бидеме фрустрирани со ажурирањето на претходната работа.