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.
Get Started
In your HTML <head>
Just drop this line into your HTML head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/concrete.css@3.0.0/concrete.min.css">In your javascript project
Add the dependency:
npm install concrete.cssImport 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:
- left-click and "View Page Source"
- left-click and "Inspect"
- read the index.html on GitHub
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à !
Figures
Adding a caption to a figure is as simple as it sounds.
Lists
The concrete list is simply marked by a square.
- Unordered element 1
- Unordered element 2
- Ordered element 1
- Ordered element 2
- Description term
- Description detail
Navigation
A clean navigation bar is simple to achieve.
Forms
Tables
| Name | Year | Size | Comment |
|---|---|---|---|
| Skeleton | 2011 | 5.7kB | Awesome |
| Milligram | 2015 | 8.3kB | Amazing |
Blockquotes
"I'm quoting myself" - Louis Merlin