Getting Started

Download the Primed ZIP file from Github by clicking on the button below. Once you have download the ZIP archive, unzip the package.

Download Primed

Directory Structure

The ZIP archive contains all the source and destination folders, as well as a few necessary project files.

dist - the distribution folder that contains all the compiled CSS, JavaScript, and HTML output. You can use the primed.css or minified primed.min.css file from this folder in your project by linking to it in the <head> of your HTML document, and placing all your custom CSS in a separate stylesheet.
src - the source folder that contains all the scss files and folders.
.gitignore - ignore node_modules
gulpfile.js - Gulp script to compile the scss source files into CSS, minify CSS and javascript, and copy files to the dist folder.
package.json - npm package file to initialize node_modules. If you are going to customize this framework by editing the Sass files then you must install the required Node Modules listed as Dev Dependencies in the package.json file.

    dist/
    ├── css/
    │   ├── primed.css
    │   └── primed.min.css
    ├── img/
    │   └── favicon.ico
    ├── js/
    │   ├── pristine.js
    │   └── pristine.min.js
    ├── index.html
    ├── boilerplate.html
    src/
    ├── copy/
    ├── js/
    └── scss/
        ├── base/
        │   ├── _base.scss
        │   ├── _reset.scss
        ├── config/
        │   ├── _config.scss
        │   ├── _mixins.scss
        ├── elements/
        │   ├── _buttons.scss
        │   ├── _forms.scss
        │   ├── _tables.scss
        │   ├── _typography.scss
        ├── utilities/
        │   ├── _containers.scss
        │   ├── _grid.scss
        │   └── _utilities.scss
        └── primed.scss
    .gitignore
    gulpfile.js
    LICENSE.md
    package-lock.json
    package.json
    README.md

HTML Starting Point

Begin with a basic HTML5 template that does the following:

Sets the default language and character set.
Uses the latest Internet Explorer rendering mode.
Defines the width of the viewport to enable responsiveness.
Includes links to the Primed CSS file, and a Favicon.

There is a HTML5 boilerplate starter file included in the Primed dist folder.

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <meta name="description" content="">

    <link rel="stylesheet" href="css/primed.css">
    <link rel="icon" href="img/favicon.ico">
</head>

<body></body>

</html>

View all HTML5 elements with Primed CSS applied to them.

HTML5 Elements Test

Browser Support

Primed UI is not designed for old browsers, so I recommend using the latest versions of each browser supported below. However, great effort has been made to support Internet Explorer 11. IE versions below version 11 are not supported.

Containers

There are three container sizes for content that is centered on the page, and one full width container with left and right padding. Content without a container will span the full width of the viewport.

<div class="small-container">Small</div>
<div class="medium-container">Medium</div>
<div class="container">Large</div>
<div class="container-max">Max</div>

Small	Medium	Large	Max
620px	900px	1200px	100%

Grid

A simple flex grid with three breakpoints for mobile (col-sm), tablet (col-md) and desktop (col-lg). .half, .one-third, .two-thirds, .one-fourth and .three-fourths classes are available for sizes.

<div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
</div>
<div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
</div>
<div class="row">
    <div class="col-lg"></div>
    <div class="col-lg"></div>
</div>

1/2 mobile

1/2 tablet

1/2 desktop

1/3 tablet

2/3 tablet

1/4 tablet

3/4 tablet

Typography

The font size is set to 1rem on the <html> element, so all font sizing will cascade from the root.

Headings & Display Headings

The six HTML heading sizes are defined and you also have four larger display heading sizes available for greater emphasis.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Display 1

Display 2

Display 3

Display 4

Blockquote

Blockquote is set to have a left border with a cite that is right aligned and italicized.

<blockquote>
    <p>This is a Blockquote.</p>
    <cite>— said Primed</cite>
</blockquote>

This is a Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque eros aliquet mi venenatis, sed mollis velit pretium. — said Primed

Lists

Regular ordered and unordered lists have no special styling applied to them.

<ul>
    <li>List item one
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item two</li>
    <li>List item three</li>
</ul>

Unordered List

First Unordered List Item
- Nested list item
Second Unordered List Item
Third Unordered List Item

Ordered List

First Ordered List Item
1. Nested list item
Second Ordered List Item
Third Ordered List Item

Definition Lists

Definition titles are bold and italicized, and margins have been placed before each description.

<dl>
    <dt>Definition Title One</dt>
    <dd>First definition description</dd>
    <dt>Definition Title Two</dt>
    <dd>Second definition description</dd>
</dl>

Definition Title One: First definition description
Definition Title Two: Second definition description

Code

Styles have been added for inline <code> tags, and keyboard input is styled as some keyboard input.

Place blocks of preformatted code between <pre><code> and </code></pre> tags.

var x = myFunction(4, 3);
function myFunction(a, b) {
    return a * b;
}

Tables

Wrap tables in a <div> with the class container-table to prevent tables with a lot of content from stretching on small screens and breaking the rest of the layout on mobile devices.

<div class="container-table">
    <table>
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Footer 1</th>
                <th>Footer 2</th>
                <th>Footer 3</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Description 1</td>
                <td>Description 2</td>
                <td>Description 3</td>
            </tr>
            <tr>
                <td>Description 1</td>
                <td>Description 2</td>
                <td>Description 3</td>
            </tr>
            <tr>
                <td>Description 1</td>
                <td>Description 2</td>
                <td>Description 3</td>
            </tr>
        </tbody>
    </table>
</div>

Head 1	Head 2	Head 3
Footer 1	Footer 2	Footer 3
Description 1	Description 2	Description 3
Description 1	Description 2	Description 3
Description 1	Description 2	Description 3

Striped Tables

Add a table-striped class to the <table> tag for alternating row background colors.

<table class="table-striped">
    <!-- etc -->
</table>

Head 1	Head 2	Head 3
Footer 1	Footer 2	Footer 3
Description 1	Description 2	Description 3
Description 1	Description 2	Description 3
Description 1	Description 2	Description 3

Buttons

Button elements, links with a button class, and input elements should all render exactly the same.

<button>Button</button>
<a class="button">.button</a>
<input type="submit" value="Submit">
<input type="button" value="Input">

.button

Outlined Buttons

Adding a button-outlined class will display an outlined version of a button.

<button class="button-outlined">Button</button>
<a class="button button-outlined">.button</a>
<input type="submit" class="button-outlined" value="Submit">
<input type="button" class="button-outlined" value="Input">

.button

Secondary Buttons

Adding a button-secondary class will create a button with an alternative color.

<button class="button-secondary">Button</button>
<a class="button button-secondary">.button</a>
<input type="submit" class="button-secondary" value="Submit">
<input type="button" class="button-secondary" value="Input">

.button

Secondary Outlined Buttons

Adding a button-outlined class to a secondary button will display an outlined version of a secondary button.

<button class="button-secondary button-outlined">Button</button>

.button

Disabled Buttons

Adding disabled will create a disabled button.

<button disabled>Button</button>

.button

Full Width Buttons

Adding a button-block class will create full-width, block level buttons. Button styles can be combined.

<button class="button-block">Button</button>

.button

Forms

Form display is one of the biggest strengths of Primed. Default forms will have full-width, block level inputs, selects, and textareas.

Input fields and their labels should be wrapped in a form-group class. To place radio buttons inline add the radio-inline class to the form-group class.

<form id="form" action="#" method="post" novalidate>
    <div class="form-group">
        <label for="nameField">Name</label>
        <input type="text" name="name" id="nameField" placeholder="First Name">
    </div>
    <div class="form-group">
        <label for="emailField">Email</label>
        <input type="email" name="email" id="emailField" placeholder="Email Address">
    </div>
    <p>Who is your favorite superhero?</p>
    <div class="form-group radio-inline">
        <label>
            <input type="radio" name="hero" id="batman" value="batman" checked>
            <span>Batman</span>
        </label>
    </div>
    <div class="form-group radio-inline">
        <label>
            <input type="radio" name="hero" id="wonderWoman" value="wonderWoman">
            <span>Wonder Woman</span>
        </label>
    </div>
    <div class="form-group radio-inline">
        <label>
            <input type="radio" name="hero" id="spiderman" value="spiderman">
            <span>Spiderman</span>
        </label>
    </div>
    <div class="form-group">
        <label for="experienceField">Level of Experience</label>
        <select name="experience" id="experienceField">
            <option value="" selected>What is your level of experience?</option>
            <option value="beginner">Beginner</option>
            <option value="knowledgable">Knowledgable</option>
            <option value="experienced">Experienced</option>
        </select>
    </div>
    <div class="form-group">
        <label for="commentField">Comment</label>
        <textarea name="comment" id="commentField" placeholder="Your Comments"></textarea>
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox" name="accept" id="accept">
            <span>I accept the terms and conditions</span>
        </label>
    </div>
    <input type="submit" class="button" value="Submit">
</form>

Name

Who is your favorite superhero?

Batman

Wonder Woman

Spiderman

Level of Experience

Comment

I accept the terms and conditions

Inline Forms

The following is an example of an inline form, which is commonly used on email optin pages.

To make a form inline add the class form-inline inside the form tag.

To force an inline form element onto a new row use an empty div with the class flex-break. You'll see an example of this below, which is used to place the checkbox under the inline input fields and submit button.

In this example the input labels have the class sr-only which hides the labels from view in the browser, but not so for screen readers which aids accessibility.

<form id="inline-form" class="form-inline" action="#" method="post" novalidate>    
    <div class="form-group">
        <label for="nameField" class="sr-only">Name</label>
        <input type="text" name="name" id="nameField" placeholder="Your First Name" required data-pristine-required-message="First name required">
    </div>
    <div class="form-group">
        <label for="emailField" class="sr-only">Email</label>
        <input type="email" name="email" id="emailField" placeholder="Your Email Address" required data-pristine-required-message="Valid email required">
    </div>
    <input type="submit" class="button" value="Sign Me Up">
    <div class="flex-break"></div>
    <div class="form-group">
        <label>
            <input type="checkbox" name="accept" id="accept" required data-pristine-required-message="Please accept our terms and conditions">
            <span>I accept the terms and conditions</span>
        </label>
    </div>
</form>

Form Validation

The form above has been setup to use live validation. This is provided by a third party javascript library called PristineJS. The PristineJS form validation library is included with Primed and has been modified slightly so that it works with Internet Explorer 11. Give it a try using the above inline form example. You'll notice that an error message clears when a valid input is entered, but before the form is submitted again.

In order to use PristineJS you must link to the javascript library in the bottom of your HTML document before the closing <body> tag. You'll also need to include the following javascript code which targets the form id. In the example above this id is inline-form.

<script src="js/pristine.min.js" type="text/javascript"></script>

window.onload = function () {
    var form = document.getElementById("your-forms-id");
    var pristine = new Pristine(form);
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var valid = pristine.validate();
        if (valid) {
            form.submit();
        }
    });
};

Make sure you place novalidate in the form tag. To stipulate that a field must be filled in, or an option or checkbox selected then required must be added to the input tag.

A custom error message can be added to the field by adding data-pristine-required-message="your error message" to the input tag. See the inline form example code above.

Utilities

What follows are additonal Primed classes which you'll find useful when building pages using this UI framework.

Text Alignment

Use text-left, text-right, text-center, and text-justify to align text content.

<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Maecenas condimentum metus sed consequat cursus. 
Sed ac justo et lectus posuere aliquam id in arcu.</p>

Left

Center

Right

Justified text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum metus sed consequat cursus. Sed ac justo et lectus posuere aliquam id in arcu.

Text Transform

Use text-uppercase, text-lowercase, and text-capitalize to transform text content.

<p class="text-uppercase">make me uppercase</p>
<p class="text-lowercase">MAKE ME LOWERCASE</p>
<p class="text-capitalize">capitalize the first letter</p>

make me uppercase

MAKE ME LOWERCASE

capitalize the first letter

Vertical Center

Vertically center an element with the is-vertical-center class. (Uses Flexbox.)

<div class="is-vertical-center">
    <div>Vertically Centered</div>
</div>

Vertically Centered

More Utility Classes

Class	What it does
`.hidden`	Hide visually and from screen readers
`.show`	Display as a block element
`.invisible`	Hide visually and from screen readers, but maintain layout
`.sr-only`	Hide visually, but not from screen readers
`.position-relative`	Relatively position the element
`.position-absolute`	Absolutely position the element
`.position-fixed`	Fix the position of the element
`.flex`	Defines a flex container, and enables a flex context for all its direct children
`.flex-break`	When applied to an empty `<div>` it starts a new flex row
`.is-full-screen`	When applied to a `<div>` it makes it full screen
`.is-full-width`	When applied to a `<div>` it makes it full width (100%)
`.is-horizontal-align`	Center child items on the horizontal main-axis
`.is-vertical-align`	Center child items in the cross-axis (perpendicular to the main-axis)
`.is-left`	Child items are packed toward the start of the flex-direction (left)
`.is-right`	Child items are packed toward the end of the flex-direction (right)
`.is-fixed`	Element is set at 100% and fixed into position
`.is-spaced`	Child items are evenly distributed in the line with equal space around them
`.is-nowrap`	All flex items will be on one line
`.m-0`	Make margin 0px
`.mt-0`	Make margin top 0px
`.mb-0`	Make margin bottom 0px
`.p-0`	Make padding 0px
`.pt-0`	Make padding top 0px
`.pb-0`	Make padding bottom 0px

Sass

This project is built with Sass (.scss). If you're an experienced web developer then you may already have a favoured development workflow in mind that is already set up on your system.

Primed comes with all the Sass (.scss) source files so you can make changes to the framework by editing these scss files, and recompile the CSS using your own processes, or use the included Gulp file and install all the necessary npm packages listed as dev dependancies.

If you already have Node installed, you can just clone the project from GitHub.

git clone https://github.com/pixelware/primed.git

Install the dev dependencies listed in Gulpfile.js to the root of the project.

npm install [npm package name] --save-dev

and run...

gulp

to run the gulpfile.js and compile and minify the source files, or...

gulp watch

to compile and minify the source files, launch a browser preview, and refresh the browser when changes are saved.

The Main Sass File

In the main Sass file, primed.scss, we'll pull in the configuration files first (variables and mixins), followed by the base files (resets and basic styles), then all the elements (buttons, forms, tables, and typography), and finally the utility files (containers, the grid and some helper classes).

// Configuration
@import "config/config";
@import "config/mixins";

// Base
@import "base/reset";
@import "base/base";

// Elements
@import "elements/buttons";
@import "elements/forms";
@import "elements/tables"; 
@import "elements/typography";

// Utilities
@import "utilities/containers";
@import "utilities/grid";
@import "utilities/utilities";

The Configuration File

Most of the changes you'll make will occur in the _config.scss file. This file contains all the framework Sass variables. This is where most of the styling decisions are made, such as colors, breakpoints, and font sizes and families.

Color Scheme

The color scheme of the entire Primed framework can be changed from a light scheme to a dark scheme by simply changing one variable in the _config.scss file on line 38. The default color scheme is light. To change to the dark color scheme change the following variable to dark.

$color-scheme: dark !default;

Font Family Pairings

Seven Google font family pairings are built into the Primed UI Framework. Font pairing are font family combinations that work well together. The "heading" font family is different to the "body" font family.

The seven font family schemes are called 'default-fonts', 'authority', 'landing-page', 'elite', 'designer', 'fun', and 'custom'.

This documentation demonstrates the default system fonts option - 'default-fonts'.

In order to change the font scheme edit line 228 in the _config.scss file as shown below. In this example the 'authority' font option has been selected.

// Font Themes - Set your font theme here
// Choose from - 'default-fonts', 'authority', 'landing-page', 'elite', 'designer', 'fun', 'custom'
$font: authority !default;

If you choose the 'custom' font scheme then you must specify your Google fonts in lines 230 and 231 of the _config.scss file (replace the word null).

$custom-font-body: null;
$custom-font-headings: null;

And, type your custom font imports on line 340.

// Put your custom font @imports here
@import url('your-1st-custom-font');
@import url('your-2nd-custom-font');