Scaffolding

This section will outline the basic structure of our UI framework, including core setup and common layout components.

Core Settings

Doctype

As stated in our Wiki, usage of common doctype applies on our Admin project just as it applies in any other project. We utilize the standard HTML5 doctype:


<!doctype html>
    <html lang="en">
    ...
    </html>

    

Required Partials

Also in our How To Use section, every Admin project will also require a base set of SCSS partials in order to render and compile properly.

In most cases, you'll most likely load all of the current styles with the Kitchen Sink Imports (_kitchensinkheader.scss and _kitchensinkfooter.scss). This will ensure that you have all of the latest CommonStyles shared on our newly developed applications.

For other use cases, at minimum, the required partials that need to be included are listed below:

  • _normalize.scss
  • _adminskin.scss
  • _variables.scss
  • _extends.scss
  • _fontawesome.scss
  • _gridhelper.scss
  • _helpers.scss

Grid

We utilize a very simple grid system, based on Chris Coyier's "Don't Overthink It" Grids. They have been slightly modified by specifying an attribute of display:table-cell on the columns in order to make them equal height.

Grid Structure

The grid structure is very simple as it's purely based off of pre-determined percentages, in the most common fractions.

1/4 Column (25%)

Biodiesel put a bird on it brunch pour-over flannel, banh mi bushwick pork belly pickled four loko typewriter pinterest organic. Stumptown ugh aesthetic pop-up fashion axe viral semiotics, bespoke narwhal. Etsy Austin gastropub lomo, pug salvia raw denim tonx meh DIY ennui cliche leggings deep v. Tousled blog selvage 90's occupy, bushwick bicycle rights deep v pop-up helvetica lo-fi dreamcatcher ethnic scenester sriracha.

1/4 Column (25%)

Biodiesel put a bird on it brunch pour-over flannel, banh mi bushwick pork belly pickled four loko typewriter pinterest organic. Stumptown ugh aesthetic pop-up fashion axe viral semiotics, bespoke narwhal. Etsy Austin gastropub lomo, pug salvia raw denim tonx meh DIY ennui cliche leggings deep v. Tousled blog selvage 90's occupy, bushwick bicycle rights deep v pop-up helvetica lo-fi dreamcatcher ethnic scenester sriracha.

1/4 Column (25%)

Biodiesel put a bird on it brunch pour-over flannel, banh mi bushwick pork belly pickled four loko typewriter pinterest organic. Stumptown ugh aesthetic pop-up fashion axe viral semiotics, bespoke narwhal. Etsy Austin gastropub lomo, pug salvia raw denim tonx meh DIY ennui cliche leggings deep v. Tousled blog selvage 90's occupy, bushwick bicycle rights deep v pop-up helvetica lo-fi dreamcatcher ethnic scenester sriracha.

1/4 Column (25%)

Biodiesel put a bird on it brunch pour-over flannel, banh mi bushwick pork belly pickled four loko typewriter pinterest organic. Stumptown ugh aesthetic pop-up fashion axe viral semiotics, bespoke narwhal. Etsy Austin gastropub lomo, pug salvia raw denim tonx meh DIY ennui cliche leggings deep v. Tousled blog selvage 90's occupy, bushwick bicycle rights deep v pop-up helvetica lo-fi dreamcatcher ethnic scenester sriracha.

Grid Usage

Usage of the grid is simple and intuitive, and doesn't require you to fiddle with static width declarations. To set up a grid, set a container to a class="grid" and then set up your containers to equal a percentage of 100%:


<div class="grid">
    <div class="col-3-4">Main content here...</div>
    <div class="col-1-4">Sidebar here...</div>
</div>

    

There are common fractions available for use, and we've kept the options minimal in order to facilitate as even layout as possible.

Column (div) width % 12.5% 20% 25% 33.3% 40% 50% 60% 66.66% 75% 80%
Respective Class .col-1-8 .col-1-5 .col-1-4 .col-1-3 .col-2-5 .col-1-2 .col-3-5 .col-2-3 .col-3-4 .col-4-5

.grid-pad

If you need padding on the outside of the grid (if you nest a grid in a container that doesn't have any built in padding), you can employ an add-on class of .grid-pad and 20px of padding will be added on the top, left and bottom sides of the grid.


<div class="grid grid-pad">
    <div class="col-3-4">Main content here...</div>
    <div class="col-1-4">Sidebar here...</div>
</div>

    

Single-use Containers

.app-shell

The .app-shell container class is used for javascript hooks, mainly for invoking overlays. .app-shell should only be used once, and should be your highest parent <div> before your <body> tag.


<body>
<div class="app-shell">
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
</div>
</div>

    

.page-container

The .page-container structural class is used to contrain the width of app sections to our maximum width, which is currently 1000px. This can be reused where necessary, however, it most generally will only be used once in the header area.

.page-container is different than .app-container, as it can be called multiple times, where as .app-container should only be called once when invoking an app shell.


<header class="page-container">...</header>
<section class="app-container">...</section>
<footer class="page-container">...</footer>

    

.app-container

.app-container is a one-time use structural container, which defines the content/functional part of the app code. This is also used as the structural element an app is rendered in via iFrame or dynamically via javascript.


<header class="page-container">...</header>
<div class="app-container">...</div>
<footer class="page-container">...</footer>

    

Multi-use Containers

.container

.container is a reusable structural element that is used to contain, and optionally visually break-up, sections of app code.

A top container

This content, with its groovy bottom border, is the bomb diggity.

a bottom container

This content, which is a plain vanilla container, would beg to differ.


<div class="container-sectioned">
    <h3>A top container</h3>
    <p>This content, with its groovy bottom border, is the bomb diggity.</p>
</div>
<div class="container">
    <h3>a bottom container</h3>
    <p>This content, which is a plain vanilla container, would beg to differ.</p>
</div>

    

The .container class can be extended with -sectioned to add a bottom border for a more distinct visual separation. Both types of containers should be used on a frequent basis to harness code and provide hooks for easy additional styling as well as responsive design.

.toolbar

.toolbar is a structural class set aside for grouping sets of elements inline, such as buttons or input fields. By default all text, select and other form elements included within the toolbar will float next to each other on the left, and buttons will be floated to the right.


<div class="toolbar">
    <input type="text" value="text field one"/>
    <select>
        <option>--- Please select ---</option>
        <option>Option #1</option>
        <option>Option #2</option>
        <option>Option #3</option>
    </select>
    <input type="button" class="button floatright" value="apply" />
</div>

    

.toolbar-group

Groups of nested elements within .toolbar can be created by containing the desired elements inside a parent container with a class of .toolbar-group inside of the parent .toolbar container. This will allow more structure within the application layout process.


<div class="toolbar">
    <div class="toolbar-group">
        <input type="text" value="text field one"/>
        <input type="button" class="button" value="apply" />
    </div>
    <div class="toolbar-group">
        <select>
            <option>--- Please select ---</option>
            <option>Option #1</option>
            <option>Option #2</option>
            <option>Option #3</option>
        </select>
        <input type="button" class="button" value="apply" />
    </div>
</div>

    

.user-controls

.user-controls is a specific structural class that is purposed to use whenever there a specific controls for user account functions, such as login, logout, account editing, etc. It has no inherited properties on it's own, but with the inclusion of certain child partials, it may take on floats, or have extended child classes for elements under it; for example, the .separated-link class for header area inline links.


<div class="user-controls">
    <a href="#">This is one link</a>
    <a href="#" class="separated-link">This is another link</a>
</div>

    

.panel

.panel is a reusable class that serves as a container with a contrasting header section. Utilizing .panel panel--attention displays a panel with a muted yellow header.

Example Panel

This is a panel. You can use me for pretty much anything.

Example Attention Panel

This is an attention panel. You can use me when you need a panel with a header that has a bit more visual separation.

<div class="grid">
    <div class="col-1-3">
        <div class="panel" >
            <div class="panel-header">
                <h2 class="panel-title">...</h2>
            </div>
            <div class="panel-body">
                <div class="panel-content">...</div>
            </div>
        </div>
    </div>
    <div class="col-1-3">
        <div class="panel panel--attention" >
            <div class="panel-header">
                <h2 class="panel-title">...</h2>
            </div>
            <div class="panel-body">
                <div class="panel-content">...</div>
            </div>
        </div>
    </div>
</div>

    

.module

.module is a highly resuable generic class that serves as a container for any type of information or functionality. Utilizing .module contrast displays a module container in an offset gray or you can use .module note to give an offset muted yellow

This is a module. You can use me for pretty much everything - content, features, widgets - you name it!
This is a contrasted module. Use me when you need a bit more visual separation!
This is a contrasted module with a note/post it type feel. You can also use me when you need a bit more visual separation!

<div class="grid">
    <div class="col-1-3">
        <div class="module">...</div>
    </div>
    <div class="col-1-3">
        <div class="module contrast">...</div>
    </div>
    <div class="col-1-3">
        <div class="module note">...</div>
    </div>
</div>

    

.example

.example is a low use case module, primary used here in the UI Guide. It creates a .module with a little extra top padding and label of "example". Use this to showcase functionality, features and code.

This text is in an example of .example :p

<div class="example">
    This text is in an example of <code>.example</code> :p
</div>