concrete.css

A simple and to the point CSS microframework

What is this ?

This is a CSS microframework, built for lightness and simplicity.

Concrete can be a great starting point for a simple website.

It also switches to a dark theme if your OS uses one.

Best used in pair with normalize.css.

Inspired by Milligram and Skeleton.

Version badge Size badge Downloads badge

Get Started

In your HTML <head>

Just drop these lines into your HTML head.

<link rel="stylesheet" href="https://unpkg.com/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/concrete.css">

In your javascript project

Add the dependencies:

yarn add normalize.css concrete.css

Import them somewhere in your code:

import 'normalize.css'
import 'concrete.css'

Typography

Concrete does not redefine headings, although normalize does. This is what you can expect:

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

I can simply be a paragraph.

I can be a link.

I can be bold.

I can be underlined.

I can be emphasised.

I can be small.

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

<p>
  I can simply be a paragraph.
</p>
<p>
  I can be <a href="./">a link</a>.
</p>
<p>
  I can be <strong>bold</strong>.
</p>
<p>
  I can be <u>underlined</u>.
</p>
<p>
  I can be <em>emphasised</em>.
</p>
<p>
  I can be <small>small</small>.
</p>

Buttons

<a class="button" href="./">a link button</a>
<a class="button filled" href="./">a filled link button</a>

<button>a button</button>
<button class="filled" >a filled button</button>

<input type="submit" value="an input submit button" />
<input type="submit" class="filled" value="a filled input submit button" />

Images

Simply add an image tag, and voilà !

Placeholder
<img src="https://picsum.photos/640/480?grayscale" />

Lists

The concrete list is simply marked by a square.

  • Unordered element 1
  • Unordered element 2
  1. Ordered element 1
  2. Ordered element 2
Description element 1
Description element 1.1
<ul>
  <li>Unordered element 1</li>
  <li>Unordered element 2</li>
</ul>

<ol>
  <li>Ordered element 1</li>
  <li>Ordered element 2</li>
</ol>

<dl>
  <dt>Description element 1</dt>
  <dd>Description element 1.1</dd>
</dl>

Grids

Concrete comes with a row class and a column class for your basic grid needs.

They use flexbox, which means you can easily write small classes to extend the power of the grid.

.column
.column
.column
.column
<div class="row">
  <div class="column">.column</div>
  <div class="column">.column</div>
  <div class="column">.column</div>
  <div class="column">.column</div>
</div>

Forms

<form>
  <fieldset>
    <div class="row">
      <div class="column">
        <label for="firstNameField">First Name</label>
        <input type="text" id="firstNameField">
      </div>
      <div class="column">
        <label for="lastNameField">Last Name</label>
        <input type="text" id="lastNameField">
      </div>
    </div>
    <label for="ageRangeField">Age Range</label>
    <select id="ageRangeField">
      <option value="0-13">0-13</option>
      <option value="14-17">14-17</option>
      <option value="18-23">18-23</option>
      <option value="24+">24+</option>
    </select>
    <label for="commentField">Comment</label>
    <textarea id="commentField" ></textarea>
    <input type="submit" value="Send">
  </fieldset>
</form>

Tables

Name Year Size Comment
Skeleton 2011 5.7kB Awesome
Milligram 2015 8.3kB Amazing
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Year</th>
      <th>Size</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Skeleton</td>
      <td>2011</td>
      <td>5.7kB</td>
      <td>Awesome</td>
    </tr>
    <tr>
      <td>Milligram</td>
      <td>2015</td>
      <td>8.3kB</td>
      <td>Amazing</td>
    </tr>
  </tbody>
</table>

Blockquotes

"I'm quoting myself" - Louis Merlin
<blockquote>
  "I'm quoting myself" - <em>Louis Merlin</em>
</blockquote>

Progress Bar

40%
<progress value="40" max="100">40%</progress>

Break line


<hr />

Sites using Concrete