Table of Contents

Piixel Pieces Styleguide

Welcome to Piixel Pieces, where our goal is to give you the best starting point to develop and organize your Webflow projects.

Based off of the Client-First principles, created by Finsweet as an organizational system to help standardize Webflow projects, this styleguide contains a mix of sensible core element styling and pre-build classes, providing you with the ultimate blank canvas ready for your creativity.

HTML Elements

Default styling for native HTML elements within Webflow.

Headings

All H1 Headings

Well, the way they make shows is, they make one show. That show's called a pilot.

All H2 Headings

Well, the way they make shows is, they make one show. That show's called a pilot.

All H3 Headings

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows.

All H4 Headings

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows.

All H5 Headings

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

All H6 Headings

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

Native Elements

All Paragraphs

My mentor taught me everything about the Force. Even the nature of the dark side. If one is to understand the great mystery, one must study all its aspects, not just the dogmatic narrow view of the Jedi. If you wish to become a complete and wise leader, you must embrace a larger view of the Force.

All Block Quote

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr. Glass.

All Ordered Lists

Pulp Fiction
Gattaca
Shawshank Redemption
Reservoir Dogs
Unbreakable

All Unordered Lists

Quentin Tarantino
Michael Bay
Christopher Nolan
David Fincher
M. Night Shyamalan

All Links

This is a link

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

container-small

max-width: 40rem;

container-medium

max-width: 50rem;

container-large

max-width: 70rem;

padding-global

padding: 0 3rem;

padding-section-small

padding: 3rem 0;

padding-section-medium

padding: 6rem 0;

padding-section-large

padding: 10rem 0;

button-group

Forms

These form components are built using Folders.

form_component

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Rich Text

Styling for the rich text element.

text-rich-text

H1. You think water moves fast? You should see ice. It moves like it has a mind.

H2. You think water moves fast? You should see ice. It moves like it has a mind.

H3. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.

H4. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.

H5. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.

H6. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.

And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is an unordered list item 1
This is an unordered list item 2
This is an unordered list item 3

This is an ordered list item 1
This is an ordered list item 2
This is an ordered list item 3

This is an image caption, you can add it here

‍

Heading Styles

Add to any heading element to maintain proper HTML structure while optimizing for design.

heading-style-h1

Some pilots get picked and become television programs. Some don't, become nothing.

heading-style-h2

Some pilots get picked and become television programs. Some don't, become nothing.

heading-style-h3

Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

heading-style-h4

Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

heading-style-h5

Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

heading-style-h6

Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

Buttons

Button combo class system.
NOTE: A link button <a> was given display:inline-block to make sure links display exactly like buttons.

button

Click here

button

is-small

Click here

button

is-large

Click here

button

is-secondary

Click here

button

is-accent

Click here

button

is-reverse

Click here

button

is-text

Click here

button

is-icon*

Click here

Text Classes

Use these text classes to add your typographic flavour to your project.

Here are the default values for text sizing (text/{variable-name}):

Size Name

Value

tiny

0.75rem

small

0.875rem

regular

1rem

medium

1.125rem

large

1.25rem

xlarge

1.5rem

xxlarge

1.75rem

huge

2rem

xhuge

2.5rem

xxhuge

3rem

Text Sizes

text-size-tiny

This font-size is xsmall and is set to 0.75rem.

text-size-small

This font-size is small and is set to 0.875rem.

text-size-regular

This font-size is medium and is set to 1rem.

text-size-medium

This font-size is large and is set to 1.125rem.

text-size-large

This font-size is xlarge and is set to 1.25rem.

text-size-xlarge

This font-size is xlarge and is set to 1.5rem.

text-size-xxlarge

This font-size is xslarge and is set to 1.75rem.

text-size-huge

This font-size is huge and is set to 2rem.

text-size-xhuge

This font-size is xhuge and is set to 2.5rem.

text-size-xxhuge

This font-size is xxhuge and is set to 3rem.

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

text-style-2lines

text-style-3lines