Article.css Demo
Hey there! Thanks for checking out this CSS style template! I created this because I wanted a quick, configurable starter set of styles for any page with a larger amount of written content.
If the styling looks familiar, that's because Article.css was inspired by the excellent reading experience over at Medium.
Basic Features
Some of the basic supported features include:
- Small code snippets with the
<code>tag -
Highlighting with
<mark>or.highlight <h1>and<h2>headers<ol>and<ul>styling
Quotes
This is a default blockquote
You can give it a .large class for a bigger blockquote:
“If there's a book that you want to read, but it hasn't been written yet, then you must write it.” ― Toni Morrison
Images
Images are set to width: 100%; by default. Here's a
sample by
Michal Klajban,
CC BY-SA 4.0, via Wikimedia Commons:
Design System
The Grid System
Article.css is built around the 8px grid system, which is
set as an editable variable --grid.
Typography
The base serif font used is Lora, and the base serif is Lato. Both fonts are freely available on Google Fonts.
Color
Article.css uses a solid primary black color of
#121212 for ease of reading on a pure white background.
The secondary grey #767676 and background grey
#e0e0e0 are selected to ensure a high level of contrast
for accessibility.
Highlights
Finally, the highlight color can be configured to a color of your preference.