concrete.css

A simple and to the point classless CSS framework

What is this ?

This is a classless CSS framework, 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/[email protected]/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/concrete.css">

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'

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>

Sections

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. 

<main>

  <header>
    <h1>
      Title
    </h1>
  </header>

  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </section>

  <footer>
    <p>
      Thank you for reading !
    </p>
  </footer>

</main>

Buttons

<a href="./"><button>a link button</button></a>
<a href="./"><button disabled>a disabled link button</button></a>

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

Images

Simply add an image element, and voilà !

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

Lists

The concrete list is simply marked by a square.

  1. Ordered element 1
  2. Ordered element 2
Description term
Description detail
<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 term</dt>
  <dd>Description detail</dd>
</dl>

Forms

Please enter your information 
<form>
  <fieldset>
    <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>
    </select>

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