Pii: A minimal Webflow style guide.
About the style guide
Introduction
Pii is a minimal framework of classes and guidelines to help you make Webflow websites. Pii favours descriptive class names and less elements to create fast and lightweight Webflow projects that are easier to maintain.
Goals of Pii
To provide a solid foundation for creating high quality and scalable Webflow projects.
To create a standard for using classes effectively and consistently.
To make it easy for designers, developers and clients to understand a project.
To create a standard for how projects are built and organized.
Getting started
Clone styleguide
The first step is to clone the Pii Webflow Style Guide Project. One you have this project cloned, you can update the fonts and domain for your new project.
Customize styleguide
Project Variables
The Pii styleguide contains a powerful set of variables that you can use to easily configure to your brand. Within the variables panel you will find options to configure:
- The primary and secondary font family
- Primary and secondary brand colors
- Neutral and utility colors
- Default colors set for headings, primary text, and secondary text
- Basic configuration for default container size, global padding, section padding, and input height
Headings
There are two types of headings to customize: Classes and Elements.
Select a heading and then in the Style selector panel select All (H1-H4) Headings to set the default style for each heading. The styleguide contains corresponding h1 h2 h3 and h4 classes that are styled exactly as the H1-H4 elements but can be changed to fit your theme.
Want to learn how to build websites that sell with this styleguide?
Our courses will take you from complete Webflow beginner to professional.
Start learning today for free
