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

Source package Compiled CSS

CDN link

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

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

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:

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

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.

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

pre

Blockquotes

Lorem ipsum ...

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

Buttons

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

Default button Outlined button Stripped button

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

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

Button sizes

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

h3 button
h4 button
h5 button
h6 button

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

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

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>

Utilities

To speed up production Pavilion includes a couple of utility classes to quickly apply styles 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.

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.

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.