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>

Accent Buttons

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

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

Muted Buttons

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

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

Round Buttons

Adding a round-button class will create rounded buttons.

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

Square Buttons

Adding a square-button class will create square buttons.

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

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>

Details and summary element

Show/hide toggle

Accordions

Pure CSS accordion

Accent accordion

Square accordion

Round accordion

Muted accordion

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>

Striped Tables

Add a striped class for alternating row background colors.

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

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>

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>

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>

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

More Helper Classes

Sass

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

• Learn to use Sass
• Learn to use Node.js/npm

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

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!