Documentation v1.0.31

This older version is not actively maintained.

1.0.31 arrow_drop_down

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.

Get the source package

Install with NPM
npm install pavilion@1.0.31
Install with Bower
bower install pavilion#1.0.31

Pavilion source files

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

├── dist/
│   ├── pavilion.css
│   ├── pavilion.min.css
│   ├──
├── demo/
│   ├── demo project files
├── scss/
│   ├── pavilion.scss
│   └── parts/
│       ├── _base.scss
│       ├── _buttons.scss
│       ├── _flexbox.scss
│       ├── _forms.scss
│       ├── _grid.scss
│       ├── _helpers.scss
│       ├── _lists.scss
│       ├── _mixins.scss
│       ├── _normalize.scss
│       ├── _tables.scss
│       ├── _typography.scss
│       └── _variables.scss
├── license
├── gruntfile.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.


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 configuring section for the variables.


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

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

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

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


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 -->
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


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


Columns & breakpoints

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 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' -->

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.

Try resizing your browser. The columns are switched around on desktop and will switch back when they break out of the desktop breakpoint.

.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.


Flexbox columns

Instead of using a .row to contain your columns, you can use .row-flex and apply the Flexbox Layout Model for Pavilion’s columns. Flex-columns take up the maximum possible width. The normal column classes still apply within the ‘flexboxed’ row. To use a flex-column add a div with the class .col inside a .row-flex.

Please read the grid documentation first if you haven’t done so.

Flexbox elements

Apply the class .display-flex to create a flexbox container element. You can now use flex utility classes to align and arrange the contained items according to the Flex Box Layout Model. Pavilion has classes for most of the specs’ properties. Since it is useless to create classes for properties like flex grow, shrink, basis and order, these are not included. Want to learn more about flexbox? Check out this handy tutorial by

For example, centering horizontally and vertically is easy with flexbox:

Display flex Behaviour
.display-flex Creates flex container
.display-inline-flex Creates inline flex container
.row-flex Creates row flex container (for columns)
Flex direction Behaviour
.flex-direction-row Set main axis direction left to right (default)
.flex-direction-row-reverse Set main axis direction right to left
.flex-direction-column Set main axis direction top to bottom
.flex-direction-column-reverse Set main axis direction bottom to top
Flex wrap Behaviour
.flex-no-wrap Keep flex children on a single-line (default)
.flex-wrap Wrap flex children to multiple lines
.flex-wrap-reverse Same as above, but bottom to top
Justify content (main axis) Behaviour
.flex-justify-content-start Align items towards the main axis' start (default)
.flex-justify-content-end Align items towards the main axis' end
.flex-justify-content-center Align items between the main axis' start/end
.flex-justify-content-between Distribute items between the main axis' start/end, space between
.flex-justify-content-around Distribute items between the main axis' start/end, space around
Align items (cross axis) Behaviour
.flex-align-items-stretch Stretch items along the cross-axis (default)
.flex-align-items-start Align items towards the cross-axis' start
.flex-align-items-end Align items towards the cross-axis' end
.flex-align-items-center Align items between the cross-axis' start/end
.flex-align-items-baseline Align items to their baselines
Align multiple lines (cross axis) Behaviour
.flex-align-content-stretch Stretch multiline contents along the cross-axis (default)
.flex-align-content-start Align multiline contents towards the cross-axis' start
.flex-align-content-end Align multiline contents towards the cross-axis' end
.flex-align-content-center Align multiline contents between the cross-axis' start/end
.flex-align-content-between Distribute items between the cross axis' start/end, space between
.flex-align-content-around Distribute items between the cross axis' start/end, space around
Align flex child (apply on child) Behaviour
.flex-align-self-start Align flex child towards the cross-axis' start
.flex-align-self-end Align flex child towards the cross-axis' end
.flex-align-self-center Align flex child between the cross-axis' start/end
.flex-align-self-baseline Align flex child to flex baselines
.flex-align-self-stretch Stretch flex child along the cross-axis

Breaking changes from v1.0.28 and up
Version 1.0.27 had different classes for the Flexbox Layout Model. Version 1.0.28 came with new classes which reflect the purpose and usage of the Flexbox Layout Model much more accurate. You can still use the old classes, for now. They will be discarted in the future. So it is adviced to update your classes if you have used flexbox utilities. The deprecated classes can be found here.


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 inherit the body font-size. Typography calculated by type-scale.

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>
Other typographic elements

Below you’ll find a set of elements that are commonly used in web typography. Pavilion comes with a .summary which, when added to a <p> element, bumps up the font-size a bit and decreases font-weight. Next to that a .dropcap which is optional for <p> elements and a .split class, which cuts your paragraph in half.

Summary paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt magnam hic ex tenetur amet, recusandae id nulla ullam nostrum cum vitae sunt aliquam atque, unde, veniam, aliquid earum nam corporis. Commodi repellendus dolor deleniti earum doloribus dignissimos nulla quaerat cupiditate totam est in reiciendis, autem aliquam. Dolorum asperiores corporis, magnam doloribus! Voluptate.

<!-- Bumps up the font-size and decreases font-weight -->
<p class="summary">Lorem ipsum ...</p>

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.

<!-- Standard paragraph -->
<p>Lorem ipsum ...</p>
Lorem ipsum ...
A.A. Bernansky
<blockquote>Lorem ipsum ...
    <footer>A.A. Bernansky</footer>

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 class="dropcap">Lorem ipsum ...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis impedit doloremque aliquam deleniti repellat a quas rerum consectetur rem, temporibus possimus iste fugiat labore dolores commodi nam dolor perferendis voluptatum.

<!-- Breaks a text element into two columns until $phone-landscape-size is reached -->
<p class="split">Lorem ipsum ...</p>


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

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

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

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

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


Well, you know…lists. Who doesn’t use lists. Pavilion comes with three, common, types of lists. Unordered, ordered and description lists. All three have minimal styling with circles instead of dots.

  • 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 -->
<!-- Ordered list -->
    <li>Water melons</li>
    <li>Exotic fruits
<!-- Description list -->
    <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>


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 example
Legend element
Button-type file input
Radio buttons
Inline checkboxes
Inline radio buttons
<form action="">
        <!-- Legend -->
        <legend>Legend element</legend>
        <!-- Text input -->
        <label for="firstName">Text input</label>
        <input id="firstName" type="text" placeholder="'Placeholder'">
        <!-- Text input -->
        <label for="firstName">Text input disabled</label>
        <input id="firstName" type="text" placeholder="'Placeholder'" disabled="">
        <!-- Input with button left -->
        <div class="input-with-button button-left">
            <label for="lastName">Text input with button on the left</label>
            <span class="button-wrapper">
                <button class="button-default">Button</button>
            <input id="lastName" type="text" placeholder="'Placeholder'">
        <!-- Input with button right -->
        <div class="input-with-button button-right">
            <label for="lastName">Text input with button on the right</label>
            <input id="lastName" type="text" placeholder="'Placeholder'">
            <span class="button-wrapper">
                <button class="button-default">Button</button>

        <!-- Selectbox -->
        <label for="selectInterests">Selectbox</label>
        <select name="interests" id="selectInterests">
            <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>
        <!-- Multi selectbox -->
        <label for="selectInterestsMultiple">Multi selectbox</label>
        <select multiple name="interests" id="selectInterestsMultiple">
            <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>
        <!-- Standard file upload -->
        <label for="standardFileUpload">Standard file input</label>
        <input type="file" id="standardFileUpload">
        <!-- Button file upload -->
        <h5>Button-type file input</h5>
        <label for="profileUpload" class="button-default">
            Upload profile pic
            <input id="profileUpload" type="file">
        <!-- Checkboxes block -->
        <label for="checkbox1" class="checkbox">
            Option #1
            <input type="checkbox" id="checkbox1" checked="true">
        <label for="checkbox2" class="checkbox">
            Option #2
            <input type="checkbox" id="checkbox2">
        <label for="checkbox3" class="checkbox">
            Option #3
            <input type="checkbox" id="checkbox3">
        <label for="checkbox4" class="checkbox">
            Option #4
            <input type="checkbox" id="checkbox4">
        <h5>Radio buttons</h5>
        <!-- Radio buttons block -->
        <label for="radio1" class="radio">
            <input type="radio" name="frequency" id="radio1">
        <label for="radio2" class="radio">
            Or this..
            <input type="radio" name="frequency" id="radio2">
        <label for="radio3" class="radio">
            Or maybe this!
            <input type="radio" name="frequency" id="radio3">
        <h5>Inline checkboxes</h5>
        <!-- Checkboxes inline -->
        <label for="inlineCheckbox1" class="checkbox checkbox-inline">
            Option #1
            <input type="checkbox" id="inlineCheckbox1" checked="true">
        <label for="inlineCheckbox2" class="checkbox checkbox-inline">
            Option #2
            <input type="checkbox" id="inlineCheckbox2">
        <label for="inlineCheckbox3" class="checkbox checkbox-inline">
            Option #3
            <input type="checkbox" id="inlineCheckbox3">
        <label for="inlineCheckbox4" class="checkbox checkbox-inline">
            Option #4
            <input type="checkbox" id="inlineCheckbox4">
        <h5>Inline radio buttons</h5>
        <!-- Radio buttons inline -->
        <label for="inlineRadio1" class="radio radio-inline">
            <input type="radio" name="frequency" id="inlineRadio1">
        <label for="inlineRadio2" class="radio radio-inline">
            Or this..
            <input type="radio" name="frequency" id="inlineRadio2">
        <label for="inlineRadio3" class="radio radio-inline">
            Or maybe this!
            <input type="radio" name="frequency" id="inlineRadio3">
        <!-- Textarea -->
        <label for="textarea1">Textarea</label>
        <textarea id="textarea1" name=""></textarea>
    <!-- Send button -->
    <button type="submit" class="button-default">Submit</button>
Show full example


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 head -->
    <!-- Table footer, must come before the body -->
    <!-- Table body -->
            <td>Pete Jackson</td> 
            <td>Yi Sun</td> 
            <td>André Umstadt</td> 
Show full example

Utility classes

Utility classes are classes that may come in handy when you quickly want to apply CSS rules to an element!

Test classes Behaviour Usage
.show-elements Shows all element outlines On <body>
.test-block Adds a test-block to a column On columns

General utilities Behaviour
.float-left float: left
.float-right float: right
.clearfix Wrap floating elements

Hiding and showing Behaviour Active on breakpoint
.show display: block All
.hide display: none All
.show-pp display: block Phone Portrait
.show-pl display: block Phone Landscape
.show-tp display: block Tablet Portrait
.show-tl display: block Tablet Landscape
.show-dt display: block Desktop
.show-pp-inline display: inline Phone Portrait
.show-pl-inline display: inline Phone Landscape
.show-tp-inline display: inline Tablet Portrait
.show-tl-inline display: inline Tablet Landscape
.show-dt-inline display: inline Desktop
.show-pp-inline-block display: inline-block Phone Portrait
.show-pl-inline-block display: inline-block Phone Landscape
.show-tp-inline-block display: inline-block Tablet Portrait
.show-tl-inline-block display: inline-block Tablet Landscape
.show-dt-inline-block display: inline-block Desktop
.hide-pp display: none Phone Portrait
.hide-pl display: none Phone Landscape
.hide-tp display: none Tablet Portrait
.hide-tl display: none Tablet Landscape
.hide-dt display: none Desktop

Text-align classes Align text Active on breakpoint
.text-center center All
.text-pp-center center Phone Portrait
.text-pl-center center Phone Landscape
.text-tp-center center Tablet Portrait
.text-tl-center center Tablet Landscape
.text-dt-center center Desktop
.text-left left All
.text-pp-left left Phone Portrait
.text-pl-left left Phone Landscape
.text-tp-left left Tablet Portrait
.text-tl-left left Tablet Landscape
.text-dt-left left Desktop
.text-right right All
.text-pp-right right Phone Portrait
.text-pl-right right Phone Landscape
.text-tp-right right Tablet Portrait
.text-tl-right right Tablet Landscape
.text-dt-right right Desktop

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
16px 10px All sizes below Tablet Portrait


Download the source files trough NPM, Bower or source download (see: getting started). This enables you to customize and configure your build specifically for your project.


Head over to scss/parts/_variables.scss. This file holds your project’s base settings which are weaved trough the entire core of Pavilion.

  * Component & Type sizing, normal and small.

$remsize-normal: 15px; /* Adjust this to adjust your REM sizes on tablets and larger screens, 1REM equals the size you set here. */
$emsize-normal: 18px;  /* Adjust this to adjust your EM sizes on tablets and larger screens. EM is used for typography. 1EM equals the size you set here.*/

$remsize-small: 10px; /* Adjust this to adjust your REM sizes on phones, 1REM equals the size you set here. */
$emsize-small: 16px;  /* Adjust this to adjust your EM sizes on phones. EM is used for typography. 1EM equals the size you set here.*/

  * Line-height 

$line-height-normal: 1.5; 

  * Paddings/borders for buttons and inputs
$padding-input-and-button-y: 0.6rem;
$padding-input-and-button-x: 1rem;
$padding-input-and-button: $padding-input-and-button-y $padding-input-and-button-x;

$border-input-and-button: 1px; /* Borders for buttons and inputs are set to 1px by default */

  * Breakpoints

$phone-landscape-size: 540px;    /* Phone landscape minimum */
$tablet-portrait-size: 768px;    /* Tablet portrait minimum */
$tablet-landscape-size: 991px;   /* Tablet landscape minimum */
$desktop-size: 1200px;           /* Desktop minimum */

$breakmargin: 20px;              /* Margin added to the breakpoint */
$size-switch: $tablet-portrait-size; /* Breakpoint at which the EM & REM sizes switch to small */

  * Colors and tints

$body-copy-color: #333; /* Standard text color */
$heading-color: $body-copy-color;

$soft-gray: #EFEFEF;
$medium-gray: #BCBCBC;
$hard-gray: #565656;

$primary-color: #426AFB;
$accent-color: #2980b9;

$error-color: #FA435A;
$alert-color: #F5A623;
$success-color: #7ED321;

  * Border radius

$small-radius: 3px; /* Used on buttons, form elements, etc */
$large-radius: 10px; /* Not used, but will come in handy */

  * Heading sizes

$h1: 3.157em;
$h2: 2.369em;
$h3: 1.777em;;
$h4: 1.333em;
$h5: 1em;
$h6: 0.75em;

  * Font-weights, you can set your own values to match your font.

$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

  * Base font stack

$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$heading-font-family: $base-font-family;
$mono-font-family: "Lucida Console", Monaco, monospace;
Show full example
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.

You can use the included Grunt.js file to compile your SCSS.


The Grunt.js file shipped with the NPM, Bower and source download has two tasks. The default task ( grunt ) has the following subtasks:

  • grunt-contrib-clean
  • grunt-contrib-sass
  • grunt-autoprefixer
  • grunt-stripcomments
  • grunt-contrib-watch

If you only want to build, and not watch, use grunt dist. Both tasks produce the following files in the dist folder:

├── pavilion.css
├── pavilion.min.css


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.