A simple and to the point classless CSS stylesheet

GitHub | npm | CDN

What is this ?

This is a classless CSS stylesheet, 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:

npm install 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>.


For structuring your page, you can use the <main> element inside of the body. It will be automatically centered on the page, with a maximum width of 640px, like the page you are reading right now.

To isolate the title of your page, and make it bigger, you can use the <header> element. You can see an example at the top of this page.

You can use the <section> element to separate between the different sections. The section will simply be given some bottom padding.

The <footer> element will center the text inside of it. You can see an example at the bottom of this page.



      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      Thank you for reading !



<button>a button</button>
<button disabled>a disabled button</button>

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


Simply add an image element, and voilà !

<img src="" />


The concrete list is simply marked by a square.

  1. Ordered element 1
  2. Ordered element 2
Description term
Description detail
  <li>Unordered element 1</li>
  <li>Unordered element 2</li>

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

  <dt>Description term</dt>
  <dd>Description detail</dd>


Please enter your information
    <legend>Please enter your information</legend>

    <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="os">Operating System</label>
    <select name="os" id="os">
      <option value="GNU/Linux">GNU/Linux</option>
      <option value="MacOS">MacOS</option>
      <option value="Windows">Windows</option>
      <option value="Other">Other</option>

    <label for="comment">Comment</label>
    <textarea name="comment" id="comment" placeholder="Please leave a 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>

Horizontal Rule


Sites using Concrete