body 
{
font-size
:
 1vw
;}
OP?

Perfectly Proportional Design System

Flusponsive combines fluid and responsive web concepts into one design system that ensures every image, element and component is always perfectly and proportionally sized on every screen, device and browser.

  • Header 2
  • Header 2
  • Active
Getting started with Flusponsive

Flusponsive is a professional design system for the most OCD among us. Build extremely detailed and complex components that are proportionally perfect on every screen regardless of size, orientation, or browser.

body {font-size: 1vw;}

The basic premise of the Flusponsive design system is to set the body element's font-size to 1vw and use ems and % for every other CSS unit. It really is that simple and, once you get used to some of the weird quirks, building websites with this system is pretty fun.

The inspiration for this project came about when I was reading a magazine. I thought, "Wow, wouldn't this layout be absolutely wonderful on a website..." and over time I started to work with proportional web design more and more. Eventually, it led to making a spin off of other design systems that combined the methods needed in order to make reading a website as fun as reading a magazine.

Pro Tip: This article also serves as a "New Website" worksheet. Try duplicating this project in Webflow, fill in each section, edit various aspects to your liking and watch your website come together in an elegant and really satisfying way.

Quick start

Get started by cloning this Webflow project and following the website build process outlined below.

Benefits

Proportional web elements using viewport width. Resize entire components predictably and reliably using ems.

Limitations

Lose zoom functionality. Learning curve.

Naming

block__element--modifier: Classes.
Capital-Kebab-Case: Ids.
lower-kebab-case: Symbols, Variables, Interactions and Integrations.
camelCase: Form Fields, CMS Fields, and external Database Fields

*Abbreviations are used  where legibility is not  affected.

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

Layout

The fundamental building blocks of a Flusponsive layout.

Structure

Every page must strictly follow the html structure below (I'll explain later):

<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

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

Balance

Add balance-text to automatically calculate where to break multi-line text blocks.

Balance text is great for headlines that sometimes break awkwardly.
Regular Text
Balance text is great for headlines that sometimes break awkwardly.
.balance-text

Ellipsis

Add ellipsis to truncate text using [...] at the end of a set number of lines.

Ellipsis is great for variable width text that is limited in space availability.
Regular Text
Ellipsis is great for variable width text that is limited in space availability.
.ellipsis

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

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 easily create an image zoom effect.

Videos

Mute

Forms

Feedback

Morph

  Report a bug
Great! We'll call you shortly!

Subscribe

Search

Search - Default

Search - Grow

Search - Animate

Search - Icon

Filter - Default

Filter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Theme

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

Borders

.border-none
.border-sm
.border-md
.border-lg
.border-circle

Shadows

.shadow-none
.shadow-sm
.shadow-md
.shadow-lg
.shadow-xl

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`~!@#$%^&*()-_=+\|
Lato
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

Identity

Intangible elements of the company including values, mottos, slogans, taglines, etc. Establishing the fundamental tone of a project early allows me to have a deeper understanding of what the client is trying to achieve and even offers insights into what they would possibly like/not like in terms of design, UX/UI, theming, etc.

Values

Fundamental beliefs used to make decisions and drive the company forward.
Form over function.
Core Value 1
Aesthetics matter.
Core Value 2
To wow is to live.
Core Value 3

Mottos

Short expressions that describe guiding principles of the company.
Obsession is an understatement.
Motto 1
Every pixel must go.
Motto 2
Motto 3
Dress to impress.

Taglines

Short catchphrases used to represent the company's brand as a whole.
Proportionally Perfect.
Tagline 1
Pixel Perfect.
Tagline 2
Tagline 3
Perfection on every screen.

Slogans

Short catchphrase that can be attributed to a single marketing campaign.
Intelegant Design.
Slogan 1
Silky Smooth Websites.
Slogan 2
Slogan 3
Be water, my friend.

Company

Storing company information in symbols makes it easy populate/update them throughout the website, especially in larger, more complex projects.

Contact Info

Reach Marketing LLC
Company Name
651 N. Broad St Suite 201
Address Line 1
Middletown, DE 19709
Address Line 2
1-702-123-4567
Company Landline Phone
1-702-765-4321
Static Phone Number
1-800-123-4567
Dynamic Phone Number
consulations@choosereach.com
Sales Email
support@choosereach.com
Support Email
howdy@choosereach.com
General Email

Social Media

@ChooseReach
Webflow
@ChooseReach
Dribbble
@Choose_Reach
Twitter
@ChooseReach
Facebook
@ChooseReach
Instagram
@ChooseReach
Pinterest
   Made in USA © 
 ChooseReach.com
  Cookies
  Bugs
  Legal  
  Media  
 Powered by Reach