Documentation

Because who doesn't like reading documentation?

Version:
2.0.3 arrow_drop_down

Why Pavilion

Pavilion is a simple CSS framework for developers who tend to never use the countless pre-defined UI components other frameworks ship with. If you are looking for a a simple, lightweight and customizable CSS starting point without the bloat, Pavilion might be for you.

Pavilion includes tried and tested core settings for readability, accessibility and responsiveness. A versatile yet easy to understand fully responsive grid system to create the layouts you need — including reordering and offsets.

Typography is calculated trough a modular type calculator and common elements like forms, buttons, tables and lists have appealing yet minimal styling which makes them easy to customize. When it comes to customizing, you can tweak and configure the variables.scss file to make Pavilion just how you want it to be. Lastly Pavilion includes handy tools and utilities like a viewport indicator and common helper classes to speed up production. All carefully picked to avoid bloat.

Pavilion lays down the groundwork — the rest is up to you.

TL;DR
  • Lightweight. Only 26kb minified.
  • Versatile fully responsive grid system.
  • Responsive, modular typography.
  • Only basic elements with minimal styling.
  • Tools & utilities to speed up production.
  • Tried and tested core settings.
  • Easy to customize.

Getting started

First of all, thanks for checking out Pavilion! Now let’s get you started. Here are four options to include Pavilion in your project.

Download

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pavilion/2.0.3/pavilion.min.css" />
Install with NPM
npm install pavilion
Install with Bower
bower install pavilion


Pavilion source files

When installing Pavilion with NPM, Bower or the source download, the following structure is delivered.

pavilion/
├── dist/
│   ├── pavilion.css
│   ├── pavilion.min.css
│   ├── pavilion.min.css.map
├── demo/
│   ├── demo project files
├── scss/
│   ├── pavilion.scss
│   └── pavilion-parts/
│       ├── _base.scss
│       ├── _buttons.scss
│       ├── _forms.scss
│       ├── _functions.scss
│       ├── _grid.scss
│       ├── _lists.scss
│       ├── _mixins.scss
│       ├── _normalize.scss
│       ├── _tables.scss
│       ├── _typography.scss
│       ├── _utilities.scss
│       └── _variables.scss
├── README.md
├── CHANGELOG.md
├── license
├── gulpfile.js
└── package.json

For consistent browser behaviour Pavilion ships with normalize.css, a collection of HTML element and attribute style-normalizations by Nicolas Gallagher and Jonathan Neal. See their documentation here.

Breakpoints

Pavilion’s grid system works with four breakpoints which break between common device screen widths:

Device & orientation Active on Class usage
Phone Portrait Smaller than phone landscape *-pp-*
Phone Landscape 540px and larger *-pl-*
Tablet Portrait 768px and larger *-tp-*
Tablet Landscape 991px and larger *-tl-*
Desktop 1200px and larger *-dt-*

The breakpoint classes are derived from their respective devices and orientations. The Phone Portrait breakpoint uses the Phone Landscape width as it’s maximum width.

The breakpoints can be adjusted in the _variables.scss, which is included in the source download and NPM/Bower installations. See getting started for those installations or the customizing section for the variables.

Containers

To keep all your elements packed in consistent left and right paddings you should wrap them in containers. Basically you have three types of containers.

Standard (fixed width) container

This container has a default max-width of 1140px and is centered in the viewport.

<div class="container">
    <!-- Container width: 1140px -->
</div>
Full width container
<div class="container-full-width">
    <!-- Container width: 100% -->
</div>
Smaller containers (matches breakpoints)
<div class="container-pl">
    <!-- Container width: phone landscape / 540px -->
</div>

<div class="container-tp">
    <!-- Container width: tablet portrait / 768px -->
</div>

<div class="container-tl">
    <!-- Container width: tablet landscape / 991px -->
</div>

Breakpoint specific container are of good use when creating narrow designs. They behave like standard containers but have a smaller max-width.

Grid

When creating layouts with columns there are a couple of things to consider. Pavilion leans on the following, common concept:

A .container wraps elements and provides you with left and right padding to keep the edges of the screen away from your content. When placing columns inside containers, negative margin is used to prevent double padding (columns have padding too). This is done by placing the columns inside a .row.

<div class="container">
    <div class="row">
        <!-- Columns go here, inside a row to prevent double paddings -->
    </div>
</div>
Rules of thumb:
  1. Always wrap a row in a container
  2. Columns within a container must have a row as their first parent to prevent double padding

Columns

As stated above: wrap columns in a row to prevent double padding. Although there is one exception. That is when you don’t use a container, you don’t wrap your columns in a row. This would remove the padding along the edges of your screen.

Column widths

.col-*-10
.col-*-90
.col-*-20
.col-*-80
.col-*-25
.col-*-75
.col-*-30
.col-*-70
.col-*-33
.col-*-66
.col-*-40
.col-*-60
.col-*-50
.col-*-50
.col-*-100

Responsive columns

To create a flexible layout you need to be able to set specific column widths per breakpoint. Pavilion uses a common concept to do this. Just add the breakpoint’s abbreviation class to the column. Does that sound confusing? It’s easy, look:

.col-pl-50 .col-tl-33
.col-pl-50 .col-tl-66
<div class="row">
    <div class="col-pl-50 col-tl-33">
        <!-- 33.3333% width on 'tablet landscape' or larger -->
        <!-- 50% width on 'phone landscape' or larger -->
        <!-- 100% width on smaller than 'phone landscape' -->
    </div>
    <div class="col-pl-50 col-tl-66">
        <!-- 66.6666% width on tablet landscape or larger -->
        <!-- 50% width on 'phone landscape' or larger -->
        <!-- 100% width on smaller than 'phone landscape' -->
    </div>
</div>

The columns above will span a width of 33% and 66% when the viewport is equal or larger than tablet landscape (hence the *-tl-*). When the viewport gets smaller, they’ll both span a width of 50% until the screensize drops below phone landscape. You can add column classes for each breakpoint to create fitting layouts. When a column breaks out of its breakpoint it will default to 100% width. See the breakpoints section for more information about breakpoints and screensizes.

Reordering columns

You can reorder columns per breakpoint. To shift columns to the left and right you can use push-*-* and pull-*-*. Push and pull makes use of the left and right CSS properties and won’t actually push other content or columns away.

These classes are breakpoint specific. So for example: adding the class pull-tp-50 will only pull the column 50% to the left while the tablet portrait breakpoint is active. It won’t affect other breakpoints.

The columns below are pushed and pulled around on desktop size (with push-dt-* and pull-dt-*). Try to resize the browser and see how the columns below switch around.

.col-tp-66 .push-dt-33
.col-tp-33 .pull-dt-66
Offsetting columns with margin

Where reordering makes use of the left and right CSS properties, offsetting adds margin to the left of a column and will affect the DOM flow. Offsets are created by adding offset-*-* to your column in the same way pulls and pushes are created.

Typography

The headings h1 trough h6 are available and accompanied by corresponding classes: .h1 trough .h6. These classes come in handy when you want to bump up (or down) an element’s textual context to a certain heading size. For instance, giving a button the class .h3 will give it a text size matching that of a h3 heading.

The font-sizes are set in EM’s and are relative the body font-size.


The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox
The quick brown fox


<!-- Heading tags -->
<h1>The quick brown fox</h1> <!-- font-size: 3.157em; margin-top: 0; -->
<h2>The quick brown fox</h2> <!-- font-size: 2.369em; -->
<h3>The quick brown fox</h3> <!-- font-size: 1.777em; -->
<h4>The quick brown fox</h4> <!-- font-size: 1.333em; -->
<h5>The quick brown fox</h5> <!-- font-size: 1em; -->
<h6>The quick brown fox</h6> <!-- font-size: 0.75em; -->

<!-- Heading classes -->
<span class="h1">h1 wannabe</span>
<span class="h2">h2 wannabe</span>
<span class="h3">h3 wannabe</span>
<span class="h4">h4 wannabe</span>
<span class="h5">h5 wannabe</span>
<span class="h6">h6 wannabe</span>
Modular typography sizing

Similair to Tim Brown’s Modular Scale calculator, Pavilion has it’s own modular typography system. Pavilion uses a $scale-ratio and a fontsize(index) to calculate headings sizes. The default ratio is set to 1.200 (minor third). Head over the the customizing section to see how this concept is applied in Pavilion and how to create your own Pavilion build with beautiful custom heading sizes.

Responsive typography

In Pavilion you can add a breakpoint abbreviation to a heading class to create responsive typographic elements. For example: if we want a paragraph to have the size of an h3 heading on tablet landscape size we just add the class .h3-tl.

<!-- h1 size on $phone-portrait-size -->
<p class="h1-pp">...</p>

<!-- h2 size on $tablet-landscape-size -->
<h3 class="h2-tl">...</h3> 
Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi repellendus dolor deleniti earum doloribus dignissimos nulla quaerat cupiditate totam est in reiciendis, autem aliquam. Dolorum asperiores corporis, magnam doloribus! Voluptate.

<p>Lorem ipsum ...</p> <!-- font-size: 1em; -->
Formatting

Regular HTML formatting will behave as expected in Pavilion. Below you can find some examples.

Bold <b> Bold
Strong <strong> Strong
Italic <i> Italic
Emphasized <em> Emphasized
Marked text <mark> Marked text
Small text <small> Small text
Deleted text <del> Deleted text
Inserted text <ins> Inserted text
Superscript <sup> Superscript
Subscript <sub> Subscript
Short quote <q> Short quote
Code <code> code
Keyboard input <kbd> kbd
Preformatted text <pre>
pre
Blockquotes
Lorem ipsum ...
A.A. Bernansky
<blockquote>
    Lorem ipsum ...
    <footer>
        A.A. Bernansky
    </footer>
</blockquote>

Buttons

There are three button variations included. Default, outlined and stripped.

<button class="button button-default">Default button</button> 
<button class="button button-outlined">Outlined button</button> 
<button class="button button-stripped">Stripped button</button>
Button fullwidth

<button class="button button-default button-full-width">Button fullwidth</button> 
Button sizes

Just add a heading class to a button, and done.




<button class="button button-default h1">h1 button</button> 
<button class="button button-default h2">h2 button</button> 
<button class="button button-default h3">h3 button</button> 
<button class="button button-default h4">h4 button</button>
<button class="button button-default h5">h5 button</button> <!-- Same size as a normal button -->
<button class="button button-default h6">h6 button</button>

Lists

Well, you know…lists. Who doesn’t use lists. Pavilion comes with three common list elements.
Unordered, ordered and description lists.

  • Wheels
  • Doors
  • Windows
    • Read
    • Sides
    • Front
  • Bumpers
  • Lights
  1. Water melons
  2. Strawberry's
  3. Exotic fruits
    1. Mango's
    2. Bananas
    3. Grapes
  4. Kiwi's
  5. Oranges
List item 1
List item 2
List item 3
Sub item
Sub item
Sub item
List item 4
List item 5
<!-- Unordered list -->
<ul>
    <li>Wheels</li>
    <li>Doors</li>
    <li>Windows
        <ul>
            <li>Read</li>
            <li>Sides</li>
            <li>Front</li>
        </ul>
    </li>
    <li>Bumpers</li>
    <li>Lights</li>
</ul>
<!-- Ordered list -->
<ol>
    <li>Water melons</li>
    <li>Strawberry's</li>
    <li>Exotic fruits
        <ol>
            <li>Mango's</li>
            <li>Bananas</li>
            <li>Grapes</li>
        </ol>
    </li>
    <li>Kiwi's</li>
    <li>Oranges</li>
</ol>
<!-- Description list -->
<dl>
    <dt>List item 1</dt>
    <dt>List item 2</dt>
    <dt>List item 3</dt>
        <dd>Sub item</dd>
        <dd>Sub item</dd>
        <dd>Sub item</dd>
    <dt>List item 4</dt>
    <dt>List item 5</dt>
</dl>

Forms

With forms Pavilion does some of the heavy lifting for you. The styling is normalized and set up in a way in which you can easily style or use them in a way you see fit.

<form action="">
            
    <div class="form-part">
        <!-- Text input -->
        <label for="textInput1">Text input</label>
        <input id="textInput1" type="text" placeholder="'Placeholder'">
    </div>
    
    <div class="form-part">
        <!-- Text input disabled -->
        <label for="textInput2" class="disabled">Text input disabled</label>
        <input id="textInput2" type="text" placeholder="'Placeholder'" disabled>
    </div>
    
    <div class="form-part">
        <!-- Password input -->
        <label for="passwordInput">Password input</label>
        <input id="passwordInput" type="password" placeholder="'Password'">
    </div>

    <div class="form-part">
        <!-- Selectbox -->
        <label for="selectBox">Selectbox</label>
        <select name="interests" id="selectBox">
            <option value="all" selected="true">All options</option>
            <option value="option1">Option #1</option>
            <option value="option2">Option #2</option>
            <option value="option3">Option #3</option>
            <option value="option4">Option #4</option>
        </select>
    </div>
        
    <div class="form-part">
        <!-- Multi selectbox -->
        <label for="multiSelectBox">Multi selectbox</label>
        <select multiple name="interests" id="multiSelectBox">
            <option value="option1">Option #1</option>
            <option value="option2">Option #2</option>
            <option value="option3">Option #3</option>
            <option value="option4">Option #4</option>
            <option value="option1">Option #5</option>
            <option value="option2">Option #6</option>
            <option value="option3">Option #7</option>
            <option value="option4">Option #8</option>
        </select>
    </div>
    
    <div class="form-part">
        <!-- File upload -->
        <label for="standardFileUpload">Standard file input</label>
        <input type="file" id="standardFileUpload">
    </div>
    
    <div class="form-part">
        <!-- Checkboxes block -->
        <label>Checkboxes and radio buttons</label>
        <label for="checkBox1" class="checkbox">
            Option #1
            <input type="checkbox" id="checkBox1" checked="true">
        </label>
        <label for="checkBox2" class="checkbox">
            Option #2
            <input type="checkbox" id="checkBox2">
        </label>
        <label for="checkBox3" class="checkbox">
            Option #3
            <input type="checkbox" id="checkBox3">
        </label>
        <label for="checkBox4" class="checkbox disabled">
            Option #4 — disabled
            <input type="checkbox" id="checkBox4" disabled>
        </label>
    </div>
    
    <div class="form-part">
        <!-- Radio buttons block -->
        <label for="radio1" class="radio">
            This?
            <input type="radio" name="frequencyBlock" id="radio1">
        </label>
        <label for="radio2" class="radio">
            Or this..
            <input type="radio" name="frequencyBlock" id="radio2">
        </label>
        <label for="radio3" class="radio disabled">
            Or maybe this! — disabled
            <input type="radio" name="frequencyBlock" id="radio3" disabled>
        </label>
    </div>
    
    <div class="form-part">
        <!-- Inline checkboxes -->
        <label>Inline checkboxes and radio buttons</label>
        <label for="inlineCheckbox1" class="checkbox checkbox-inline">
            Option #1
            <input type="checkbox" id="inlineCheckbox1" checked="true">
        </label>
        <label for="inlineCheckbox2" class="checkbox checkbox-inline">
            Option #2
            <input type="checkbox" id="inlineCheckbox2">
        </label>
        <label for="inlineCheckbox3" class="checkbox checkbox-inline">
            Option #3
            <input type="checkbox" id="inlineCheckbox3">
        </label>
        <label for="inlineCheckbox4" class="checkbox checkbox-inline">
            Option #4
            <input type="checkbox" id="inlineCheckbox4">
        </label>
    </div>
    
    <div class="form-part">
        <!-- Inline radiobuttons -->
        <label for="inlineRadio1" class="radio radio-inline">
            This?
            <input type="radio" name="frequencyInline" id="inlineRadio1">
        </label>
        <label for="inlineRadio2" class="radio radio-inline">
            Or this..
            <input type="radio" name="frequencyInline" id="inlineRadio2">
        </label>
        <label for="inlineRadio3" class="radio radio-inline">
            Or maybe this!
            <input type="radio" name="frequencyInline" id="inlineRadio3">
        </label>
    </div>
    
    <div class="form-part">
        <!-- Textarea -->
        <label for="textarea">Textarea</label>
        <textarea id="textarea" name=""></textarea>
    </div>
    
    <!-- Send button -->
    <button type="submit" class="button button-default">Submit</button>
        
</form>
Show full example

Tables

Not having to style a table is reason enough to use a framework. Pavilion ships with a clean table. Use <thead>, <th> and <tfoot> to emphasize data.

# Name Age Country Birthsign
# Name Age Country Birthsign
1 Pete Jackson 26 Netherlands Libra
2 Yi Sun 23 Japan Leo
3 André Umstadt 34 Germany Virgo
<table> 
    <!-- Table head -->
    <thead> 
        <tr> 
            <th>#</th> 
            <th>Name</th> 
            <th>Age</th> 
            <th>Country</th> 
            <th>Birthsign</th> 
        </tr> 
    </thead>
    
    <!-- Table footer, must come before the body -->
    <tfoot> 
        <tr> 
            <td>#</td> 
            <td>Name</td> 
            <td>Age</td> 
            <td>Country</td> 
            <td>Birthsign</td> 
        </tr> 
    </tfoot>  
    
    <!-- Table body -->
    <tbody> 
        <tr> 
            <th>1</th> 
            <td>Pete Jackson</td> 
            <td>26</td> 
            <td>Netherlands</td> 
            <td>Libra</td>
        </tr> 
        <tr> 
            <th>2</th> 
            <td>Yi Sun</td> 
            <td>23</td> 
            <td>Japan</td> 
            <td>Leo</td>
        </tr> 
        <tr> 
            <th>3</th> 
            <td>André Umstadt</td> 
            <td>34</td> 
            <td>Germany</td> 
            <td>Virgo</td>
        </tr> 
    </tbody>
</table>
Show full example

Utilities

To speed up production Pavilion includes a couple of utility classes to quickly apply styles to an element.

Clearing elements Behaviour
.clearfix Wraps element around floats


Floats Behaviour
.float-left float: left;
.float-right float: right;


Positioning Behaviour
.center-block Centers an element


Text-alignment Behaviour
.text-left text-align: left;
.text-left-* text-align: left; (at defined breakpoint)
.text-center text-align: center;
.text-center-* text-align: center; (at defined breakpoint)
.text-right text-align: right;
.text-right-* text-align: right; (at defined breakpoint)


Showing and hiding Behaviour
.hide display: none;
.hide-* display: none; (at defined breakpoint)
.show display: block;
.show-* display: block; (at defined breakpoint)


Tools Behaviour
<div class="show-size"></div> Add as last body child. Shows active breakpoint.
.show-elements Apply to body. Outlines elements.

Using EM & REM

EM’s and REM’s inherit a value set by a parent. REM is different from EM in that it always inherits its value from the root element, which is your html tag. The EM unit inherits its value from its first parent with a specified font-size.

Pavilion uses EM’s for typography and REM’s for component margins, paddings or other properties. One EM is equal to 18px, which is set on the body. One REM is equal to 15px, which is set on the html tag.

Smaller screens

On smaller screens the font-sizes on the body and html tags wil decrease, which will affect the EM’s and REM’s throughout the rest of the DOM.

1 EM equals 1 REM equals On breakpoints
18px 15px Tablet Portrait and larger
15px 10px All sizes below Tablet Portrait


Customizing

First download the source files trough NPM, Bower or get the source download (see: getting started). This enables you to customize Pavilion by setting the variables to your needs. May it be breakpoints or typography settings. Recompile pavilion.scss with the included Gulp build system or use your own SCSS compiler.

Variables reference

Head over to scss/pavilion-parts/_variables.scss. This file holds your project’s base settings which are weaved trough the entire core of Pavilion. All the variables are listed below with their default value’s and a description.

$ Default value Description
$remsize-normal 15px Defines what 1 REM equals to above $size-switch. Used mainly for components margins and paddings.
$remsize-small 10px Defines what 1 REM equals to below $size-switch. Used mainly for components margins and paddings.
$emsize-normal 18px Defines what 1 EM equals to above $size-switch. Used mainly for typographic elements.
$emsize-small 15px Defines what 1 EM equals to below $size-switch. Used mainly for typographic elements.
$phone-landscape-size 540px Minimum screenwidth defined for landscape oriented phones.
$tablet-portrait-size 768px Minimum screenwidth defined for portrait oriented tablets.
$tablet-landscape-size 991px Minimum screenwidth defined for landscape oriented tablets.
$desktop-size 1200px Minimum screenwidth defined for desktops.
$breakmargin 20px Margin added to breakpoint-screenwidths. Clears the edges of the browser from the content.
$size-switch $tablet-portrait-size Minimum screenwidth to define where Pavilion should switch from $rem/emsize-small to $rem/emsize-normal.
$default-border-width 1px Default border width. Used mainly on buttons, inputs, tables and horizontal rules.
$default-border-radius 4px Default border-radius. Used primarily on buttons and inputs.
$body-copy-color #333333 Default text-color.
$primary-color #0080ff Primary color. Used primarily on highlighted components and links.
$heading-color $body-copy-color Color defined for h1 to h6 headings.
$soft-gray #D9D9D9 Self explanatory. Used mainly for borders.
$medium-gray darken($soft-gray, 20%) Self explanatory. Used on blockquote footers.
$hard-gray darken($medium-gray, 20%) Self explanatory. Used on input placeholders.
$scale-ratio 1.200 Ratio used by Pavilion's modular typography calculator to calculate the heading sizes. See type-scale.com for more ratio's.
$h1 fontscale(4) Function with an index which calculates the size for a h1 heading.
$h2 fontscale(3) Function with an index which calculates the size for a h2 heading.
$h3 fontscale(2) Function with an index which calculates the size for a h3 heading.
$h4 fontscale(1) Function with an index which calculates the size for a h4 heading.
$h5 fontscale(0) Function with an index which calculates the size for a h5 heading. Equals 1 EM.
$h6 fontscale(-1) Function with an index which calculates the size for a h6 heading.
$font-weight-light 300 Light font-weight.
$font-weight-regular 400 Normal font-weight
$font-weight-medium 500 Medium font-weight.
$font-weight-bold 700 Heavy font-weight.
$base-font-weight $font-weight-regular Base font-weight. Applied on body.
$heading-font-weight $base-font-weight Font-weight applied on headings h1 to h6.
$base-line-height 1.5 Standard line-height. Applied on body.
$base-font-family "Helvetica Neue", Helvetica, Arial, sans-serif; Default font-family.
$heading-font-family $base-font-family Heading font-family.
$mono-font-family "Lucida Console", Monaco, monospace; Font-family for code, pre and keyboard components.
Be careful

Feel free to poke around and modify Pavilion the way you see fit. Note that when you change core files, your changes could be overwritten when you update Pavilion as a dependency.

Build system

Pavilion v2 ships with a GulpJS build system for compiling, autoprefixing and compressing Pavilion’s SCSS files. The following tasks with subtasks are defined:

Command:   gulp (default task)

  • Clean the dist/ and demo/css/ folders
  • Compile SCSS to CSS
  • Strip CSS comments
  • Autoprefix (last two browser versions)
  • Optimize and compress CSS
  • Output expanded and compressed CSS


Command:   gulp watch

  • Run gulp (default task)
  • Watch for changes in scss/**/*
  • On change run gulp


Command:   gulp clean

  • Clean the dist/ and demo/css/ folders

Support

Need help or found a bug? Open an issue at Github or tweet me at @wesselgrift.

Browser support

Although Pavilion is built for modern browsers, the CSS is prefixed for the last two versions of commonly used browsers. Yes, this will increase the file size. But it’s nice to have some browser support other than the latest versions.

If you find any bugs, please let me know and always test your productions thoroughly.

Cheers, Wessel.