Simplestyle

Build simple projects with style.

Note: This is a work in progress.

GITHUB

Overview

1. Serve from Github CDN using RawGit.

<head>
  <link href="//cdn.rawgit.com/harrymt/simplestyle/master/simplestyle.min.css" rel="stylesheet">
</head>

2. Download Minified CSS file, place it into a `css` folder then reference it within your HTML.

<head>
  <link href="/css/simplestyle.min.css" rel="stylesheet">
</head>

Page Layout

A basic page layout is as follows.

<body>
  <div class="container">
    <div class="main">
      <div class="information">
        <h1>A heading</h1>
        <p>A paragraph.</p>
      </div>
    </div>
  </div>
</body>

Buttons

A button is a button.

Button

<a href='#' class="button">Button</a>

Grid

Each information box uses a material style that is resting on the page, like paper. An inner grid is used rarely to position information inside these boxes.

half

full

<div class="row">
  <div class="half">
    <p>
      half
    </p>
  </div>
  <div class="half">
    <p>
      half
    </p>
  </div>
</div>
<div class="row">
  <div class="full">
    <p>
      full
    </p>
  </div>
</div>