.jpg)
Option 1: Convert existing project to match Client-First
Converting our old projects to Client-First is very appealing. Before Client-First, we had different strategies, different naming conventions, and maybe less knowledge. We want to change old projects into our new Client-First mindset to properly manage and scale them.
The complexity of this initiative is entirely dependent on the past project. Our task can completely change based on the size, build style, and class strategy of the project.
* This is a time-consuming process. *
Be aware that converting an existing project to Client-First is a big task. We will have a lot of manual work if:
- The website is large.
- The naming convention is very different from Client-First.
- The project was built by someone else.
However long you think this will take, it will take longer.
Analyze the existing project and make sure it's worth it to make the switch.
Below are the steps we will take to convert a project to Client-First:
1. Copy Client-First utility classes to the project
Step 1:
Clone the Client-First official cloneable project.
Step 2:
Delete margin and padding classes on the Style Guide page of the cloneable project.
Copy the Style Guide page-wrapper to copy the entire page contents.
Create a new page in the project to serve as the Client-First style guide.
Paste the page-wrapper contents to the new page.
Step 3:
Use Finsweet Extension to correctly add margin and padding classes to the project. Go to "Client-First" then "Add spacing system". This creates the margin and padding classes in the project.
Why do we follow this process? We explain in detail on the CSS specificity docs page.
Step 4:
Start editing the project. Follow the steps below.
2. Start using Client-First immediately
Once we have our Client-First utility classes in the project, we should go 100% Client-First. We should not follow the previous naming, style, or strategy. Our goal is to strip the project of its previous conventions, so we should no longer use them.
Everything moving forward should follow Client-First principles, strategies, and naming convention. Any class that needs to be renamed or added should be Client-First approved.
3. Convert from px, em, and vw to rem
We want to convert all or most measurement units in the project to rem.
rem and % are good.
px, em, or vw should be converted to rem.
If the project was built in px, Finsweet Extension can manage the conversion. The PX to REM Migrator Tool can convert all px values in our project to rem. This will save us a lot of time.
If the project was built in em or vw, we should go through each class and manually update the size values to rem-based measurements. This can be a very long and time-consuming process.
4. Set up the core structure on each page
Implement the Client-First core structure on each page of the project. This may require us to delete or change classes, reorganize the HTML and current page structure, or even rebuild the outer structure from scratch.
Follow these steps on each page of the project
- Assure the entire page is wrapped in a page-wrapper
- Add global styles embed to the page
- Separate the nav and footer components from the main content
- Put all main content in main-wrapper
- Create section_[identifier] wrappers for each section of the page
- Implement universal outer padding-global
- Implement universal container-[size] system
5. Implement Client-First principles
This is likely the most time-consuming step of the conversion.
Update the style guide
Update the Client-First style guide with the styles of the project. Update sizes, typography, and colors.
Rename classes to match Client-First naming
All or most classes in the project will likely have to be renamed to Client-First standards.
As the project is reviewed, rename each class that does not follow Client-First. Create folders and bring organization to the project.
It is recommended to "duplicate" an existing class and rename it to Client-First.
If there is a stacked combo class that is creating the style, it is recommended to use the "Merge Combo Classes" Candy in Finsweet Extension. This helps us quickly create new classes based on the combined styles of stacked classes.
As we continue going through the project and making updates, this will be an ongoing process. By the end of the conversion, all classes in the project should Client-First naming.
Change text elements to follow Client-First
Follow the concepts in Typography strategy.
Update all of the H1 - H6 Heading tags to confirm they are styled correctly. Assure that most Heading text elements have no class applied to them.
Apply heading- classes everywhere in the project where the default heading size needs to be modified.
Apply text- classes where a text variation is required in the project.
Add utility spacing strategies
Follow the concepts in Spacing strategy.
Add spacing blocks and spacing wrappers in the project where appropriate. Apply padding-section- classes to unify vertical section spacing.
Example of spacing block implementation:
6. Publish and test on all breakpoints
We must continuously test the project on a published webflow.io link. As we make significant updates to our project, something may break in the process.
We may have some mobile responsive issues. We may have some old custom CSS that's no longer needed.
It's a good practice to test during and after the conversion process. As we finish converting pages, we should continuously test and iterate.
Tools to help
Add Finsweet Extension to Webflow
Finsweet Extension Client-First tab
The Client-First tab has tools specific to using Client-First.
- Add Core Page Structure
- Add Spacing System
- PX to REM Calculator
- PX to REM Migrator
- Fluid Design Generator
Finsweet Extension Candies
These Candies may help us with the conversion process.
- Color Swatches Reorder
- CSS Styles Reorder
- Interactions Reorder
- Merge Combo Classes
- Remove Classes
- Remove Styles
- Symbols Reorder
- Unbind CMS
Converting to Client-First live build
In this Learn it Live session, we show the process of converting one page of a Webflow site to Client-First.
Option 2: Rebuild in a new project
In many cases, rebuilding the current site in a new Webflow project will take less overall time and will have better long-term maintainability.
Many times when people convert old large projects, we hear the same feedback.
"I should have built it on a new project!"
Option 1 always takes more time than we initially expected. Converting an existing project to match Client-First can be a large project.
Rebuilding the project from a blank canvas may be a better overall strategy and learning opportunity.
Potentially less overall time
If the project we want to convert is very different from Client-First, making updates to the structure and classes may be very time intensive.
This could be hours or days of work for element renaming and project reorganization. Starting from a blank screen may take less time.
This statement relies highly on the project size, scope, and requirements.
Long-term maintainability
Starting from a new project will always be more organized than converting an existing project. A converted project will always have old classes showing up after the conversion.
We may find 'weird things' happen in our project because of existing configurations we forgot about or did not set up ourselves. If we continue to scale the site, it may be a good long-term strategy to build from a new project.
Option 3: Don't change it to Client-First
It may not be a good idea to convert the project to Client-First. Evaluate the project and decide if it is worth the time to convert or rebuild it.
Will the site need a lot of maintenance?
Is the current project unusable?
Is there a problem with site scaling?
If the answer to each of those questions is "No", it may not be a good idea to convert the project to Client-First. There should be a clear benefit and use case to convert or rebuild a past project.
If there is a good reason, go for it. Use Option 1 or Option 2 based on the project requirements.
General recommendation
Remember that all projects are different. This is a general recommendation, not a recommendation based on any specific project.
Go with Option 2: Rebuild in a new project.
We find that it takes less time to build a new project in Webflow than it takes to make significant edits to a poorly built project.
We also believe a new project build leads to better learning and understanding of the Client-First system. We can focus purely on the best Client-First implementation practices instead of being frustrated with updating past work.