concrete.css

A simple and to the point classless CSS stylesheet

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.

Inspired by Milligram and Skeleton.

Version badge Size badge Downloads badge

Get Started

In your HTML <head>

Just drop this line into your HTML head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/concrete.css/3.0.0/concrete.min.css">

In your javascript project

Add the dependency:

npm install concrete.css

Import it somewhere in your code:

import 'concrete.css'

Reading this page

In order to see the HTML code that creates the elements you're seeing, you can either:

Typography

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.

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.

Buttons

Images

Simply add an image element, and voilà !

Placeholder

Figures

Adding a caption to a figure is as simple as it sounds.

Placeholder
This is the right-aligned caption for the figure. This example is very long to demonstrate at least one line-break.

Lists

The concrete list is simply marked by a square.

  1. Ordered element 1
  2. Ordered element 2
Description term
Description detail

Navigation

A clean navigation bar is simple to achieve.

Forms

Please enter your information

Tables

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

Blockquotes

"I'm quoting myself" - Louis Merlin

Progress Bar

40%

Horizontal Rule


Sites using Concrete