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

Download v1.0.31

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.

pavilion/
├── dist/
│   ├── pavilion.css
│   ├── pavilion.min.css
│   ├── pavilion.min.css.map
├── 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
├── README.md
├── CHANGELOG.md
├── 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.

Breakpoints

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

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.

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

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:

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

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

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

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

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

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.

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

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

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.

<!-- Standard paragraph -->
<p>Lorem ipsum ...</p>

Blockquotes

Lorem ipsum ...

<blockquote>Lorem ipsum ...
    <footer>A.A. Bernansky</footer>
</blockquote>

Dropcaps

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>

Split

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>

Buttons

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

Default button Outlined button Stripped button

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

Button fullwidth

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.

h3 button
h4 button
h5 button
h6 button

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

Lists

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.

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

<form action="">
    <fieldset>
        <!-- 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>
            </span>
            <input id="lastName" type="text" placeholder="'Placeholder'">
        </div>
        
        <!-- 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>
            </span>
        </div>

        <!-- 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>
        </select>
        
        <!-- 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>
        </select>
        
    </fieldset>
    
    <fieldset>
        <!-- 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">
        </label>
    </fieldset>
    
    <fieldset>
        <h5>Checkboxes</h5>
        
        <!-- Checkboxes block -->
        <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">
            Option #4
            <input type="checkbox" id="checkbox4">
        </label>
    </fieldset>
    
    <fieldset>
        <h5>Radio buttons</h5>
        
        <!-- Radio buttons block -->
        <label for="radio1" class="radio">
            This?
            <input type="radio" name="frequency" id="radio1">
        </label>
        <label for="radio2" class="radio">
            Or this..
            <input type="radio" name="frequency" id="radio2">
        </label>
        <label for="radio3" class="radio">
            Or maybe this!
            <input type="radio" name="frequency" id="radio3">
        </label>
    </fieldset>
    
    <fieldset>
        <h5>Inline checkboxes</h5>
        <!-- Checkboxes inline -->
        <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>
    </fieldset>
        
    <fieldset>
        <h5>Inline radio buttons</h5>
        <!-- Radio buttons inline -->
        <label for="inlineRadio1" class="radio radio-inline">
            This?
            <input type="radio" name="frequency" id="inlineRadio1">
        </label>
        <label for="inlineRadio2" class="radio radio-inline">
            Or this..
            <input type="radio" name="frequency" id="inlineRadio2">
        </label>
        <label for="inlineRadio3" class="radio radio-inline">
            Or maybe this!
            <input type="radio" name="frequency" id="inlineRadio3">
        </label>
    </fieldset>
    
    <fieldset>
        <!-- Textarea -->
        <label for="textarea1">Textarea</label>
        <textarea id="textarea1" name=""></textarea>
    </fieldset>
    
    <!-- Send button -->
    <button type="submit" class="button-default">Submit</button>
    
</form>

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.

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

Utility classes

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

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.

Configuring

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.

Variables

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;

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.

Grunt

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:

dist/
├── pavilion.css
├── pavilion.min.css
└── pavilion.min.css.map

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.