Primitive

Primitive is a minimalist Sass boilerplate that provides helpful, browser-consistent styling for default HTML elements - buttons, forms, tables, lists, and typography.

Star Follow @taniarascia

Boring Mode EIGHTIES MODE!

Download and Installation

There are two options for using Primitive.

CSS (easy)

Download the stylesheet, link to it in the <head>, and place all your custom CSS in a separate stylesheet.

Sass (recommended)

Download the source and set up a Sass workflow with npm scripts.

HTML Starting Point

Begin with a basic HTML5 template that does the following: 

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

  <title></title>

  <link rel="stylesheet" href="css/main.css">
  <link rel="icon" href="images/favicon.png">
</head>

<body></body>

</html>

View all HTML5 with Primitive CSS applied to them.

HTML5 Elements Test

Containers

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

<div class="small-container">Small</div>
<div class="medium-container">Medium</div>
<div class="container">Large</div>
Small Medium Large
800px 1000px 1200px

Grid

A simple flex grid with two breakpoints. .half, .one-fourth, .three-fourths, .one-third, and .two-thirds classes are available for sizes. 

<div class="flex-row">
	<div class="flex-small"></div>
	<div class="flex-small"></div>
</div>
<div class="flex-row">
	<div class="flex-large"></div>
	<div class="flex-large"></div>
</div>
1/2 small
1/2 small
1/2 large
1/2 large
1/3
2/3
1/4
3/4

Typography

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

Headings all have the same line-height and margins, and only the font size is individually defined.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Blockquote

Blockquote is set to have a left border, with the browser default padding removed. A cite will be right aligned and italicized. 

<blockquote>
	<p>Keep it secret. Keep it safe.</p>
	<cite>Gandalf the Gray</cite>
</blockquote>

Keep it secret. Keep it safe.

Gandalf the Gray

Buttons

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

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

Accent Buttons

Adding an accent-button class will display a secondary color.

<button class="accent-button">Button</button>
Link

Muted Buttons

Adding a muted-button class will create ghost/outline buttons.

<button class="muted-button">Button</button>
Link

Round Buttons

Adding a round-button class will create rounded buttons.

<button class="round-button">Button</button>
Link

Square Buttons

Adding a square-button class will create square buttons.

<button class="square-button">Button</button>
Link

Full Width Buttons

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

<button class="full-button">Button</button>
Link

Forms

Default forms will have full-width, block level labels, inputs, selects, and textareas. 

<form>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="First Name">
  <label for="choose">Select</label>
  <select id="choose">
    <option disabled selected>Please select</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="comments">Additional Comments</label>
  <textarea id="comments"></textarea>
  <label>
    <input type="checkbox">
    Remember me
  </label>
  <input type="submit" value="Submit">
</form>

Form Validation

To express that action was successful, you can use is-success class. If user's input has some errors, has-error class may be good for you. 

<input type="text" id="name" placeholder="Name" class="has-error">
<input type="email" id="email" placeholder="Email" class="is-success">

Tables

Tables are set to a width of 100%, with a bottom border and bold headings.

<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>
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 striped class for alternating row background colors.

<table class="striped-table">
  <!-- etc -->
</table>
Head 1 Head 2 Head 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3

Contained Tables

Wrap the table in a contain-table class to prevent tables with a lot of content from stretching on small screens. 

<div class="contain-table">
  <table>
  <!-- etc -->
  </table>
</div>
Head 1 Head 2 Head 3
https://taniarascia.github.io/primitive Description 2 Description 3
Description 1 Description 2 Description 3
Footer 1 Footer 2 Footer 3

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>
  • List item one
    • Nested list item
  • List item two
  • List item three
  1. List item one
    1. Nested list item
  2. List item two
  3. List item three

Definition Lists

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

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

Code

Style has been added for inline <code> tags, and <kbd> is a keyboard input.

Place blocks of preformatted code in a <pre><code>.

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}

Helpers

Helper classes are helpful for templating.

Vertical Center

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

<div class="vertical-center">
	<div>Vertically centered</div>
</div>
Vertically centered

Text Alignment

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

<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>

Left

Center

Right

Screen Reader Text

Accessibility is important - if you have a label that should be hidden but accessible, or use an icon as a link, or want to skip navigation, use the screen-reader-text class to hide content visually. 

<a class="screen-reader-text" href="#content">Skip Navigation</a>

Responsive Images

Add a responsive-image class for responsive images.

<img src="#" class="responsive-image" alt="Responsive Image">
Example of responsive-image CSS class

More Helper Classes

Class What it does
.space-between justify-content: space-between
.justify-center justify-content: center
.align-center align-items: center
.block display: block
.inline-block display: inline-block
.inline display: inline
.show display: block !important
.hide display: none !important
.padding-top padding-top: 2rem
.no-padding-top padding-top: 0
.padding-bottom padding-bottom: 2rem
.no-padding-bottom padding-bottom: 0
.margin-top margin-top: 2rem
.no-margin-top margin-top: 0
.margin-bottom margin-bottom: 2rem
.no-margin-bottom margin-bottom: 0
.content-section padding: 60px 0 (30px on mobile)

Sass

This project is built with Sass (SCSS) and npm scripts. If you're not familiar with these technologies, please read the tutorials below.

Sass is used to extend your CSS, allowing you to use useful concepts like variables and nesting, as well as compartmentalizing and organizing the code. Npm is used to watch for changes and process those Sass files into regular CSS files, as well as minifying and adding prefixes for cross-browser compatibilty.

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

git clone https://github.com/taniarascia/primitive.git

install the dev dependencies in the root of the project...

npm install

and run.

npm run sass:watch

Directory Structure

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

  • dist - the distribution folder that contains the final CSS, JavaScript, and HTML output.
  • src - the source folder that contains all the scss files and folders.
  • .gitignore - ignore node_modules and .sass-cache files.
  • package.json - npm package folder to initialize node_modules 
dist/
├── css/
│   ├── main.css
│   └── main.css.map
├── js/
│   └── script.js
├── images/
│   └── favicon.png
├── index.html
src/
└── scss/
    ├── base/
    │   ├── _mixins.scss
    │   ├── _normalize.scss
    │   ├── _reset.scss
    │   └── _variables.scss
    └── components/
        ├── _scaffolding.scss
        ├── _grid.scss
        ├── _helpers.scss
        ├── _buttons.scss
        ├── _forms.scss
        ├── _tables.scss
        ├── _navigation.scss
        └── _layout.scss
        main.scss
.gitignore
LICENSE.md
README.md
package-lock.json
package.json

Main Sass File

In the main Sass file, main.scss, we'll pull in the configuration (variables and mixins) first, followed by resets, then all the components. 

// Configuration
@import "base/variables";
@import "base/mixins";

// Reset
@import "base/normalize";
@import "base/reset";

// Components
@import "components/scaffolding";
@import "components/grid";
@import "components/helpers"; 
@import "components/buttons";
@import "components/forms";
@import "components/tables";
@import "components/navigation";
@import "components/layout";

Most of the components should be self-explanatory. Scaffolding is the main styling of typography, links, headings, etc. Navigation and layout are empty files, but I kept them in because they're generally necessary. Add more files as necessary (3rd party, fonts, etc).

Configuration

Much of the design can be configured just by changing some settings in _variables.scss. This file will define your colors, typography, sizes, breakpoints, buttons, borders, and more. Define all your variables here to keep your project organized. 

/**
* Variables
*
* The majority of the configuration for the toolkit.
*/

//==============================================================================
// Containers
//==============================================================================

$x-small: 600px !default;
$small: 800px !default;
$medium: 1000px !default;
$large: 1200px !default;

//==============================================================================
// Breakpoints
//==============================================================================

$mobile: $x-small !default;
$tablet: $small !default;
$desktop: $medium !default;

//==============================================================================
// Global Colors
//==============================================================================

$background: white !default;
$primary-color: #0366ee !default;
$secondary-color: #29de7d !default;
$accent-color: #cdcdcd !default;
$alternate-background: #fafafa !default;
$alternate-color: #404040 !default;
$link-color: $primary-color !default;
$link-hover-color: darken($link-color, 15%) !default;
$highlight: #ffeea8 !default;
$error: #d33c40 !default;
$success: #29de7d !default;
$bq-border: 16px solid #f0f0f0 !default;

//==============================================================================
// Typography
//==============================================================================

// Body
$font-size: 1rem !default;
$body-font-size: 1rem !default;
$font-style: normal !default;
$font-variant: normal !default;
$font-weight: normal !default;
$font-color: #404040 !default;
$font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$line-height: 1.6 !default;

// Headings
$heading-font-color: #404040 !default;
$heading-font-weight: 600 !default;
$heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial,
 sans-serif !default;
$heading-line-height: 1.2 !default;

$h1-mobile: 1.75rem !default;
$h2-mobile: 1.5rem !default;
$h3-mobile: 1.25rem !default;
$h4-mobile: 1.1rem !default;
$h5-mobile: 1rem !default;

$h1: 2.25rem !default;
$h2: 2rem !default;
$h3: 1.75rem !default;
$h4: 1.5rem !default;
$h5: 1.25rem !default;

//==============================================================================
// Spacing
//==============================================================================

$padding: 1rem !default;
$margins: 1.5rem !default;
$content-padding: 60px 0 !default;
$content-padding-mobile: 30px 0 !default;

//==============================================================================
// Borders
//==============================================================================

$border-width: 1px !default;
$border-style: solid !default;
$border-color: #dedede !default;
$border-radius: 4px !default;
$borders: $border-width $border-style $border-color !default;

//==============================================================================
// Buttons
//==============================================================================

$button-background: $primary-color !default;
$button-background-hover: darken($button-background, 10%) !default;
$button-color: #ffffff !default;
$button-font-weight: 600 !default;
$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$button-font-size: 1rem !default;
$button-border-width: 1px !default;
$button-border-style: solid !default;
$button-border-color: $button-background !default;
$button-border-radius: $border-radius !default;
$button-text-transform: none !default;

// Accent buttons
$accent-button-background: $secondary-color !default;
$accent-button-color: #ffffff !default;
$accent-button-color-hover: #ffffff !default;

// Muted Buttons
$muted-border: 1px solid $accent-color !default;
$muted-border-hover: 1px solid darken($accent-color, 30%) !default;
$muted-background: transparent !default;
$muted-background-hover: transparent !default;
$muted-color: darken($accent-color, 50%) !default;
$muted-color-hover: darken($accent-color, 50%) !default;

// Round Buttons
$round-buttons: 40px !default;

//==============================================================================
// Forms
//==============================================================================

$forms: (
 '[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email],        [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], [type=week], [type=time], select, textarea'
) !default;
$buttons: ('.button, a.button, button, [type=submit], [type=reset], [type=button]') !default;
$input-background: transparent !default;
$placeholder: darken($accent-color, 20%) !default;
$form-border: 1px solid $border-color !default;
$form-border-hover: 1px solid darken($border-color, 10%) !default;
$form-border-focus: 1px solid $link-color !default;

//==============================================================================
// Tables
//==============================================================================

$stripes: #f8f8f8 !default;
$caption: #ababab !default;

//==============================================================================
// Code
//==============================================================================

$code-color: $font-color !default;
$code-size: 14px !default;
$code-family: Menlo, monospace !default;
$code-background: transparent !default;
$code-borders: $borders !default;

Changing these default configurations will go a long way in setting the tone of the rest of your site. View the example below to toggle the style of common HTML5 elements between Primitive, Bootstrap, Foundation, Material, and Skeleton frameworks.

HTML5 Elements Test

From here, the design is up to you. Happy coding!