The purpose of this style guide is to help you understand how to manage this project in style. It lays out all the elements, components, tools, and resources used to develop it. Each section begins with a tutorial to reinforce you further. If you have any questions, please reach out hello@protocore.co
This project comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project. Styles are added to an embed so we can see the CSS inside the Webflow Designer. Feel free to update and add to it.
The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.
Everything in this project is measured using REM. The base font size is 1 rem. When you need to convert units such as pixels to REM, simply select your input field and type 14/16rem and it automatically calculates the difference and converts. You can do any other form of calculation, as well.
Once you're finished editing the project, open the Style Manager and click Clean Up to remove unused classes. Then open the Interactions panel and click Clean Up to remove unused interactions. Finally, open the Assets Panel, expand it from the top right, click Select All and Delete. Webflow will automatically dispose of any assets you haven't used. The rest will show up again once you publish your project and refresh the page.
All the colors used in this project are saved as global swatches in the color picker. If you use a new color, please remember to save it as a swatch. Text colors are also saved as individual classes such as "text-color-grey" so they can be globally managed.
Headings help users and search engines to read and understand text. For example, they act as signposts for the readers and make it easier for them to figure out what a post or page is about. Headings also define which parts of your content are important, and show how they’re interconnected. Remember to use only one H1 per page.
Typography organization keeps your brand professional. Use class prefix text- on a piece of text to change the size of the text. This project uses a global classing system based on Client-First. This project uses a 4pt system based on REM measurements. When you need to convert units such as pixels to REM, select your input field and type 20/16rem and it automatically calculates the difference and converts.
text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-strikethrough
text-style-italic
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.
Style text-align css to make text, or other elements, align left, center, or right.
A rich text element (RTE) is perfect for creating long-form content for blog posts, about pages, biographies — you name it. Instead of adding individual heading, paragraph, list, or image elements, you can double click into a rich text element to create these different content elements directly. RTE also makes it easy for collaborators (e.g. team members or clients) to edit rich content within the Editor.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Use global classes for your icons to easily manage them across the project. These are great for company logos, footer assets, etc. Avoid using them on elements that likely require unique customization on tablet or mobile. Please upload icons in the SVG format to avoid pixelation. If you want to embed them like the social media icons below, you can Find more icons here and add property fill='currentColor' inside of the <svg> tag to control the color of the icon through font color style.
In addition to the primary elements featured in this style guide, Webflow offers many more building blocks. This course walks through all the available elements, pointing out common examples and making suggestions to help you get the most out of each element.
The following snippets were used in this project. There are three ways to add custom code to this project. You can embed it directly into your page, insert it in your page settings, or host it on another server and then embed it as a script file. You can also upload the script file within your project as an asset and embed it.
<script>
const year = new Date().getFullYear();
$('.year').text(year);
</script>
Your Code
Take your Webflow game to the next level with these tools and services.
Give your Webflow website superpowers, such as advanced filtering, search, and much more.
Flowbase is the largest Webflow resource site, with premium components, templates, and guides.
Learn web design, development, and the ins and outs of Webflow through comprehensive tutorials.
Your website should be inclusive of, and accessible to, as many people as possible. This essential tool for Webflow users contains guidelines derived from WCAG, including how to implement them with no and low-code solutions.
This project was developed using the Client-First methodology by Finsweet to enable anyone that opens this Webflow Project to understand how it was structured and built. These are the primary pillars that were used.