Layout

The fundamental building blocks of a Flusponsive layout.

Structure

Every page must strictly follow the html structure below:

<header id="Header" class=".header"></header>
<main id="Main" class="main"><div class="container"></div></main>

Containers

Containers have been built from scratch using divs to follow the Flusponsive system.

container
container-90
container-80
container-70
container-60
container-50

Columns

Columns have also been rebuilt to follow the Flusponsive system.

columns
column
column
column
column-shrink
column
column-20
column
column-25
column
column-30
column
column-35
column
column-40
column
column-45
column
column-50
column

Isotope

Use isotope-container, isotope-item, and isotope-sizer to easily make masonry layouts.

3-Column

To make a 3-column layout, add isotope-3col to both isotope-sizer and isotope-item.

4-Column

5-Column

Variations

Easily create dynamic grid layouts using css pseudo classes such as nth-child etc.

The following css targets the 1st item in a list and every 7th item thereafter.

#nth-child-example .isotope-item:nth-child(7n+1) {width: 66.66%;}

@media screen and (max-width: 479px) {
  #nth-child-example .isotope-iteml:nth-child(7n+1) {width: 100%;}
}

Typography

CSS Reset

Where possible, all default Webflow CSS values are reset.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Block Quote

Paragraph

Bold

Italics

Link

  • UL 1
  • UL 2
  • UL 3
  1. OL 1
  2. OL 2
  3. OL 3

Richtext

The primary richtext block is already balanced and ready to be used. Simply increase or decrease the font-size of the richtext element using ems to adjust it according to your needs.

Heading 1

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quisque placerat facilisis egestas cillum dolore. Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Cras mattis iudicium purus sit amet fermentum. Excepteur sint obcaecat cupiditat proid.

Heading 2

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quisque placerat facilisis egestas cillum dolore. Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Cras mattis iudicium purus sit amet fermentum. Excepteur sint obcaecat cupiditat proid.

Heading 3

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quisque placerat facilisis egestas cillum dolore. Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Cras mattis iudicium purus sit amet fermentum. Excepteur sint obcaecat cupiditat proid.

Heading 4

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quisque placerat facilisis egestas cillum dolore. Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Cras mattis iudicium purus sit amet fermentum. Excepteur sint obcaecat cupiditat proid.

Heading 5

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quisque placerat facilisis egestas cillum dolore. Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Cras mattis iudicium purus sit amet fermentum. Excepteur sint obcaecat cupiditat proid.

Heading 6

Tu quoque, Brute, fili mi, nihil timor populi, nihil! Quisque placerat facilisis egestas cillum dolore. Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Cras mattis iudicium purus sit amet fermentum. Excepteur sint obcaecat cupiditat proid.

Ambitioni dedisse scripsisse iudicaretur. Ut enim ad minim veniam, quis nostrud exercitation. Gallia est omnis divisa in partes tres, quarum.

Bold

Italics

Link

  • UL 1
  • UL 2
  • UL 3
  1. OL 1
  2. OL 2
  3. OL 3

Dropcaps

Add dropcaps to target the first letter of the first nested paragraph.

Use --dropcaps-size and --dropcaps-height variables to adjust as needed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero erat.

Regular Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero erat.

.dropcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Regular Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

.dropcaps

Smallcaps

Add smallcaps to convert all text to caps, but in a smaller font size than normal caps.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Regular Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

.smallcaps

Knockout

Add knockout to any text that also has a background image or gradient set.

KNOCKOUT
Regular Text
KNOCKOUT
.knockout

Forms

One-Column Form

Form Heading
1-800-123-4567
A brief welcome message to compel someone to want to fill out the form along with any additional information that might be needed.
Checkbox Buttons
Radio Buttons
Contact Info
Additional Info
How can we help you?
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
This is a disclaimer that is very important and you should know about it before you click submit.
Thank you for your submission!
Oops! Something went wrong while submitting the form.

Two-Column Form

Form Heading
1-800-123-4567
A brief welcome message to compel someone to want to fill out the form along with any additional information that might be needed.
Checkbox Buttons
Checkbox Buttons
Radio Buttons
Contact Info
Additional Info
How can we help you?
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
This is a disclaimer that is very important and you should know about it before you click submit.
Thank you for your submission!
Oops! Something went wrong while submitting the form.

Interface

Icons

All icon elements use svg code embeds to reduce http requests as well as speed up render time. This also allows you to control the svg icon color, apply svg knockout effects, and more.

Dropdowns

You can configure dropdown menus by adding a couple classes.

.dropdown__menu--upleft
.dropdown__caret--upleft
.dropdown__menu--upcenter
.dropdown__caret--upcenter
.dropdown__menu--upright
.dropdown__caret--upright
.dropdown__menu--downleft
.dropdown__caret--downleft
.dropdown__menu--downcenter
.dropdown__caret--downcenter
.dropdown__menu--downright
.dropdown__caret--downright

Images

Zoom

Use data-action="zoom" to create an image zoom effect.

Videos

Mute

Theme

Things like border radius and shadows can benefit from standardization as well.

Space

.spacer-half
.spacer1
.space1
.space2
.space3
.space4
.space5
.space6
.space7

Scale

.scale-3
.scale-2
.scale-1
Default Text
.scale1
.scale2
.scale3
.scale4
.scale5
.scale6
.scale7
.scale8
.scale9
.scale10

Parallax

.parallax-up-1
.parallax-up-2
.parallax-up-3
.parallax-up-4
.parallax-up-5
.parallax-up-6
.parallax-up-7
.parallax-up-8
.parallax-right-1
.parallax-right-2
.parallax-right-3
.parallax-right-4
.parallax-right-5
.parallax-right-6
.parallax-right-7
.parallax-left-1
.parallax-left-2
.parallax-left-3
.parallax-left-4
.parallax-left-5
.parallax-left-6
.parallax-left-7
.parallax-down-1
.parallax-down-2
.parallax-down-3
.parallax-down-4
.parallax-down-5
.parallax-down-6
.parallax-down-7

Branding

Visible elements of the company including logos, icons, fonts, colors, etc. I find that setting up the branding before moving onto other aspects of a website helps develop some visual supports and often sets me off on a great pace for the rest of the project.

Logos

The company's official trademarks including wordmarks, iconmarks, logomarks & specialty marks.

Just replace the symbol's contents with the logo image and svg code to manage throughout the website.

Logomark
Iconmark
Wordmark

Fonts

The company's official fonts for headings, paragraphs, handwriting, etc.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890`~!@#$%^&*()-_=+\|
Alice
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890`~!@#$%^&*()-_=+\|
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890`~!@#$%^&*()-_=+\|
Bitcheese

Colors

Modifiers and Variables of company colors in CSS, HEX, RGB, HSL, CMYK, and Pantone formats. Just add the class to any element to change the font or background color.

Company Colors

  .primary-color-bg  
.primary-color
#685bc7
RGB (104, 91, 199)
H247.22 S0.49 L0.57
C37 M42 Y0 K22
2725 C
  .secondary-color-bg  
.secondary-color
#3a913f
RGB (58, 145, 63)
H123.45 S0.43 L0.4
C34 M0 Y32 K43
7740 C

Color Palette

.lite-grn
.lite-grn-bg
.dk-grn
  .dk-grn-bg  
.lite-blu
.lite-blu-bg
.dk-blu
  .dk-blu-bg  
.lite-prpl
.lite-prpl-bg
.dk-prpl
  .dk-prpl-bg  
.lite-pnk
.lite-pnk-bg
.dk-pnk
  .dk-pnk-bg  
.lite-red
.lite-red-bg
.dk-red
  .dk-red-bg  
.lite-brwn
.lite-brwn-bg
.dk-brwn
  .dk-brwn-bg  
.lite-orng
.lite-orng-bg
.dk-orng
  .dk-orng-bg  
.lite-yell
.lite-yell-bg
.dk-yell
  .dk-yell-bg  

Grayscale

.lite-text
.lite-bg
 .gray-1 
  .gray-1-bg   
 .gray-2 
  .gray-2-bg   
 .gray-3 
  .gray-3 -bg  
 .gray-4 
  .gray-4-bg   
 .gray-5 
  .gray-5-bg   
 .dk-text 
   .dk-bg   

External Brands

 .ta-grn 
.ta-grn-bg
 .fb-blue
.fb-blu-bg
 .li-blue
.li-blu-bg
 .tw-blu 
.tw-blu-bg
 .ig-pnk 
.ig-grad-bg
 .yp-red 
.yp-red-bg
 .pin-red 
.pin-red-bg
 .yt-red 
.yt-red-bg
 .gg-yell 
.gg-yell-bg

Colorize

Add colorize, colorize-bg or colorize-hue to any element to create branded color animations.

Use the variables --colorize-duration and --colorize-bg-duration to control how long the animation takes.

Use the variables --colorize0, --colorize25, --colorize50, --colorize75 and --colorize100 to control the color sequence.

 .colorize
.colorize-bg
.colorize-hue