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.
Columns
Columns have also been rebuilt to follow the Flusponsive system.
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
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Block Quote
Paragraph
Bold
Italics
- UL 1
- UL 2
- UL 3
- OL 1
- OL 2
- 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
- UL 1
- UL 2
- UL 3
- OL 1
- OL 2
- 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.
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.
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.
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
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.
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.
Knockout
Add knockout to any text that also has a background image or gradient set.
Forms
One-Column Form
Two-Column 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.
Buttons
All button variants have been "minimalized" for consistency and simplicity. Additionally, many common javascript functions are available to use out-of-the-box.
General
Social Media
Dropdowns
You can configure dropdown menus by adding a couple classes.
.dropdown__caret--upleft
.dropdown__caret--upcenter
.dropdown__caret--upright
.dropdown__caret--downleft
.dropdown__caret--downcenter
.dropdown__caret--downright
Accordions
Create an accordion on hover or click with just a couple classes.
Images
Zoom
Use data-action="zoom" to create an image zoom effect.
Theme
Things like border radius and shadows can benefit from standardization as well.
Space
Scale
Parallax
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.
Fonts
The company's official fonts for headings, paragraphs, handwriting, etc.
abcdefghijklmnopqrstuvwxyz
1234567890`~!@#$%^&*()-_=+\|
abcdefghijklmnopqrstuvwxyz
1234567890`~!@#$%^&*()-_=+\|
abcdefghijklmnopqrstuvwxyz
1234567890`~!@#$%^&*()-_=+\|
Colors
Company Colors
Color Palette
Grayscale
External Brands
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.