Fork me on GitHub

Expressive CSS

Stop defining the same CSS properties over and over again. Utility classes are at the heart of Expressive CSS. They are easy to write and understand. Using them reduces the necessity to re-declare the same sets of related properties over and over again, keeping your CSS lightweight, scalable and easy to understand.

Document your classes as you go. Use them as building blocks for your html template library. A great example is the Tachyons Component Library.

View Authoring Guidelines

View Example

Styleguide

Base

A good base contains default styles for HTML elements, written in such a way to minimize the need to override. Also include libraries for reset and grid scaffolding.

Use a test page to view your base element styling.

Smart Defaults

html

Set default font styles, including family, color, size and line height. (See typography)

html {
    font-family: Verdana,sans-serif;
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

Libraries

Start with a normalize.css as a base, then customize the default element styling instead of having multiple declarations.

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

From About normalize.css by Necolas Gallagher

Bring your own grid. In this example, we use Simple Grid. Another grid system that works well with Expressive CSS that is worth checking out is Synapse Grid.

Colors

.bgr-blue
#287dbe
.bgr-blue-lt
#75c5df
.bgr-blue-dk
#384992
.bgr-white
#fff
.bgr-red
#cd242a
.bgr-dark
#234
.bgr-purple
#9e579e
.bgr-pink
#ec66a2
.bgr-green
#9fc74d
.bgr-green-dk
#5bb12f
.bgr-grey
#999
.bgr-grey-lt
#ececec

Typography

Maintain consistency by using utility classes for font size, weight and styling. Margin and padding are 0 for h1-h6.

Titillium

Regular
.text-reg

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Bold
strong, .bold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Light
.text-light

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

Italic
em, .italic

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0

h1 h2 h3 h4 h5 h6

p
small, .text-small
.text-small-2

h1,h2,h3,h4,h5,h6 { padding:0; margin:0; }
h1, .h1 { font-size: 5em; }
h2, .h2 { font-size: 2.5em; }
h3, .h3 { font-size: 1.75em; }
h4, .h4 { font-size: 1.375em; }
h5, .h5 { font-size: 1.2em; }
h6, .h6, .p { font-size: 1em; }
p { 
  font-size: 1em;
  font-weight: normal;
  padding-bottom:.5em;
}
<span class="h1">h1</span>
<span class="h2">h2</span>
<span class="h3">h3</span>
<span class="h4">h4</span>
<span class="h5">h5</span>
<span class="h6">h6</span>
blue-lt blue blue-dk green green-dk grey pink purple
.text-blue-lt { color: #75c5df; }
.text-blue { color: #287dbe; }
.text-blue-dk { color: #384992; }
.text-green { color: #9fc74d; }
.text-green-dk { color: #5bb12f; }
.text-white { color: white; }
.text-grey { color: #999999; }
.text-pink { color: #ec66a2; }
.text-purple { color: #9e579e; }

Layout

.grid-#

Use the grid to handle the arrangement of fluid width elements on the page. Your grid should allow for responsive width adjustments at different breakpoints.

<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
<div class="grid-12 m-grid-6 l-grid-3">
This div will be full 
width for small screens, 
2-column for medium and 
4-column for large.
</div>
.grid-flex

Apply flexbox styling to a grid for matching container heights.

Yes .grid-flex

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quod vel vitae!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptate modi doloribus veritatis laboriosam est excepturi velit aut eius, amet. Nam veniam officiis, provident temporibus! Libero, voluptatibus, ipsam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta magnam obcaecati voluptates doloremque, quam cum fuga tempora nulla!

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Not .grid-flex

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quod vel vitae!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptate modi doloribus veritatis laboriosam est excepturi velit aut eius, amet. Nam veniam officiis, provident temporibus! Libero, voluptatibus, ipsam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta magnam obcaecati voluptates doloremque, quam cum fuga tempora nulla!

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.container-#

Use container classes for semi-fixed width elements. Use .container, .box, .wrapper, .div, .div or something similar as a prefix. Typically these have their left and right margin set to auto so they will be centered.

.box-center {
  margin-left: auto;
  margin-right: auto;
}
.box-320 {  max-width:320px; }
.box-400 {  max-width:400px; }
.box-480 {  max-width:480px; }
.box-640 {  max-width:640px; }
.box-720 {  max-width:720px; }
.box-800 {  max-width:800px; }
.box-960 {  max-width:960px; }
.box-1100 { max-width:1100px; }
.box-1200 { max-width:1200px; }
.box-960
.box-800
.box-720
.box-640
.box-480
.box-400
.box-320
.box-center .box-960
.box-center .box-800
.box-center .box-720
.box-center .box-640
.box-center .box-480
.box-center .box-400
.box-center .box-320
.pad-# .marg-#

Use classes for levels of padding and margin to use across your site. By using these classes exclusively to set the spacing in and around the elements on the page, you will find it simple to maintain consistent alignment.

Use breakpoint prefixing to adjust spacing for making layout adjustments at different screen sizes (e.g. .s-pad-0 to remove padding for small screen sizes).

.pad-1 { padding: .5em; }
.pad-1-left { padding-left: .5em; }
.pad-1-right { padding-right: .5em; }
.pad-1-top { padding-top: .5em; }
.pad-1-bottom { padding-bottom: .5em; }
.pad-1-sides { padding-left: .5em; padding-right: .5em; }
.pad-1-vert { padding-top: .5em; padding-bottom: .5em; }
.pad-2 { padding: 1em; }
.pad-2-left { padding-left: 1em; }
...etc
.marg-1 { margin: .5em; }
.marg-1-left { margin-left: .5em; }
.marg-1-right { margin-right: .5em; }
.marg-1-top { margin-top: .5em; }
.marg-1-bottom { margin-bottom: .5em; }
.marg-1-sides { margin-left: .5em; margin-right: .5em; }
.marg-1-vert { margin-top: .5em; margin-bottom: .5em; }
.marg-2 { margin: 1em; }
.marg-2-left { margin-left: 1em; }
...etc
.pad-0
.pad-1
.pad-2
.pad-3
.marg-1-bottom
.marg-2-bottom
.marg-3-bottom
.s-marg-3-top .m-marg-2-top .l-marg-1-top
.pad-3-vert
.pad-3-sides
.pad-3-bottom
.pad-3-top
.pad-3-left
.pad-3-right
.border-#
.border
.border-dashed
.border-dotted
.border-left
.border-top
.border-bottom
.border-right
.border-green
.border-blue
.border-pink
.border-purple
.border-red
.border-grey
.rounded .circle
.rounded
.circle
.rel .abs .pos-#
.rel
.abs
.pos-top .pos-left
.abs
.pos-top .pos-right
.abs
.pos-bottom .pos-left
.abs
.pos-bottom .pos-right
.front
A
B
C
A
.front
B
.front-1
C
.front-2
.float-#
.float-left
.float-right

Components

To reduce complexity in your CSS, rely on utility classes whenever possible. For elements that necessitate additional custom styling, use component classes. For these components, you may wish to use a CSS methodology such as OOCSS or BEM.

Below are some common examples of components.

<button>
button, .btn {
    display: inline-block;
    background: #9fc74d;
    display: inline;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all .15s ease-in-out;
    border: none;
    outline: none;
    text-decoration: none;
    margin-bottom: 4px;
}
button:hover, .btn:hover {
    background: #5bb12f;
}
<form>

Use the grid to create the structure of your forms, and take advantage of its responsive breakpoint prefixing for control of its structure across all screen sizes.

Example Contact Form
Form Components

Use a library for tooltips and validation errors, such as bootstrap or hint.css, or do your own thing.

Here is a sentence of helpful information for you.
We got a problem.
We got a problem.
.modal
.box-gradient-overlay
Placeholder Image of Bill Murray

When you want to add a soft dark overlay on an image so the text is more readable.

Other Components

Some components are truly one-offs. When you truly will not ever need to use that style anywhere else, such as in a graphic with absolutely positioned interior elements, use a very specifically named component class (.e.g. .animated-flying-tomato).

More Info

This basic example styleguide is meant to be an example starting point. Use it as is, change it as you see fit, or throw it all away and roll your own. There are many variations that you may take for any given project.

To find out more about Functional CSS, check out the following related articles and projects.