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="">
<link rel="stylesheet" href="">

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'


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>

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


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


Simply add an image tag, and voilà !

<img src="" />


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
  <li>Unordered element 1</li>
  <li>Unordered element 2</li>

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

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



    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname">

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname">

    <label for="age">Age Range</label>
    <select name="age" id="age">
      <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>

    <label for="comment">Comment</label>
    <textarea name="comment" id="comment"></textarea>

    <input type="submit" value="Send">



Name Year Size Comment
Skeleton 2011 5.7kB Awesome
Milligram 2015 8.3kB Amazing


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

Progress Bar

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

Break line

<hr />

Sites using Concrete