A clean Style Sheet.

Intro

cleanSS is a beautiful CSS framework that aims to help you build awesome projects on the web.
Responsive

cleanSS is built for mobile-first in mind. It efficiently scales your website or application from phone to desktop

Powerful

cleanSS comes with dozens of custom CSS components, that are using best practices from the community and will not require JS.

 
Customizable

cleanSS is written in Sass to easily overwrite the CSS Rules and to make the appearence work with your next web project.

Examples

Getting started

cleanSS has a few ways to quickly get started. Read through to see what suits your particular needs.
cleanSS

Compiled and minified CSS and fonts.
Supports Internet Explorer 9+

Sass

Modify cleanSS for your exact needs. Change fonts, variables and exclude components.

What’s included

Within the cleanSS directory you'll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.
cleanSS/
├── dist/
│   ├── cleanSS-fonts.css
│   ├── cleanSS-fonts.css.map
│   ├── cleanSS-fonts.min.css
│   ├── cleanSS.css
│   ├── cleanSS.css.map
│   └── cleanSS.min.css
├── fonts/
│   ├── cleanSS.woff
│   ├── Roboto-Light.ttf
│   ├── Roboto-Medium.ttf
│   └── Roboto-Regular.ttf
└── src/
                

All files from the dist/ folder are precompiled for quick drop-in usage in web projects. It includes a compiled CSS file (cleanSS.css) including CSS source maps (cleanSS.css.map) for development, as well as a compiled and minified CSS file (cleanSS.min.css) for production.

All included Fonts are embedded into the CSS to save on server requests. You don't have to include those seperately.

Customization

If you’re after more customization we’ve also included a custom Gulp file, which can be used to quickly re-compile cleanSS. You’ll need to install both Node and Gulp before using our included gulpfile.js.

Once Node is installed, run the following npm command to install Gulp.

$ npm install gulp -g

When you’re done, make sure you’ve installed the rest of cleanSS’s dependencies. Run this command from within the extracted folder:

$ npm install

Now, modify your source files and run $ gulp to generate new local dist/ files automatically. Be aware that this replaces existing dist/ files, so proceed with caution.

$ gulp watch can be used to watch the whole src/ folder for changes - new local dist/ files gets generated automatically.

Sass

Include custom components or exclude components - that does not fit your needs - from the Sass file src/cleanSS.scss.

Most of cleanSS’s variables are bundled in the file src/_variables.scss. By uncommenting and changing those, the defaults gets overwritten.

If you would like to include a individual Font - cleanSS comes with an Task that converts every TTF or WOFF Font within the fonts/ folder to an Base64 Font. Just place or replace the Fonts to your needs and run the $ gulp base64css command - the source src/_fonts.scss gets compiled automatically.

In case multiple Fonts are from the same Font Family, name them according to their rules:
Roboto-Light gets font-weight: 300;
Roboto-Light-Italic gets font-weight: 300; font-style: italic;

Basic template

The basic template is a guideline for how to structure your pages when building with cleanSS.

Copy the example below into a new HTML file to get started with it.

<!DOCTYPE html>
<!--[if lt IE 9 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>cleanSS Example</title>

    <!-- Include the CSS -->
    <link href="dist/cleanSS.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <h1>Hello, world!</h1>
    </div>
</body>
</html>

Base

BEM

cleanSS is namespaced and follows the BEM methodology - which stands for “Block”, “Element”, “Modifier”. This means that you can use it in association with any other framework you want without worrying about breaking anything.

Normalize.css

For improved cross-browser rendering, cleanSS is using Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Containers

cleanSS requires an element to wrap site contents.
Within this <div class="wrapper"></div> element you may choose one of two containers to seperate sections.

Use .container for a responsive fixed width container.

<section>
    <div class="container"></div>
</section>

Use .container.container--edge for a full width container, respecting the padding between sections.

<section>
    <div class="container contaier--edge"></div>
</section>

Grid

cleanSS includes a responsive, mobile-first grid system. It is easy to work with, and very powerful. There are a few simple concepts to keep in mind:

The grid system consist of two types of classes: the grid class (clean-grid) and unit classes (clean-unit or clean-unit-*).

Units have various class names that represent their widths. For example, clean-unit-1-2 has a width of 50%, whereas clean-unit-1-5 would have a width of 20%.

Child elements contained within an element with a clean-grid classname must be a grid unit with a clean-unit or clean-unit-* classname.

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

Let's look at a responsive grid.

The Example below shows how responsive grids are written.

<div class="clean-grid">
    <div class="clean-unit-1 clean-unit-md-1-3"> ... </div>
    <div class="clean-unit-1 clean-unit-md-1-3"> ... </div>
    <div class="clean-unit-1 clean-unit-md-1-3"> ... </div>
</div>

Elements within this grid will be width: 100% on small screens, but will become width: 33.33% on medium sized screens and above.

Units Sizes

cleanSS ships with both a 5ths and 12ths based grid.

1-5

2-5

3-5

4-5

5-5

1-12

2-12

3-12

4-12

5-12

6-12

7-12

8-12

9-12

10-12

11-12

12-12

The default Unit Sizes can be changed within the file src/_grid.scss to generate a custom grid system.

Media queries

cleanSS’s default responsive grids comes with the following class names and media query breakpoints.
Key CSS Media Query Applies Classname
None None Alyways .clean-unit-*
sm @media screen and (min-width: 35.5em) ≥ 568px .clean-unit-sm-*
md @media screen and (min-width: 48em) ≥ 768px .clean-unit-md-*
lg @media screen and (min-width: 64em) ≥ 1024px .clean-unit-lg-*
xl @media screen and (min-width: 80em) ≥ 1280px .clean-unit-xl-*

Typography

Headings

h1: cleanSS Header

h2: cleanSS Header

h3: cleanSS Header

h4: cleanSS Header

h5: cleanSS Header
h6: cleanSS Header

Text alignment

Use these classes to easily switch text-align across viewports when designing responsive pages.

//====================================================
//  Text Alignment
//====================================================

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

@media (min-width: $sm-break) {
    .text-sm-center { text-align: center; }
    .text-sm-left   { text-align: left; }
    .text-sm-right  { text-align: right; }
}

@media (min-width: $md-break) {
    .text-md-center { text-align: center; }
    .text-md-left   { text-align: left; }
    .text-md-right  { text-align: right; }
}

@media (min-width: $lg-break) {
    .text-lg-center { text-align: center; }
    .text-lg-left   { text-align: left; }
    .text-lg-right  { text-align: right; }
}

Text utilities

cleanSS provides a few utility classes for text transformation, sizing and line heights.

//====================================================
//  Styles & Transforms
//====================================================

.uppercase        { text-transform: uppercase; }
.lowercase        { text-transform: lowercase; }
.capitalize       { text-transform: capitalize; }
.italic           { font-style: italic; }
.tracked          { letter-spacing: 4px; }
.underline        { text-decoration: underline; }
.no-underline     { text-decoration: none; }
.list-style-none  { list-style-type: none; }

.thin    { font-weight: 300; }
.regular { font-weight: 400; }
.bold    { font-weight: 500; }

//====================================================
//  Line-Height
//====================================================

.lh1 { line-height:  1; }
.lh2 { line-height:  1.2; }
.lh3 { line-height:  1.3; }
.lh4 { line-height:  1.4; }
.lh5 { line-height:  1.5; }
.lh6 { line-height:  1.6; }
.lh7 { line-height:  1.7; }
.lh8 { line-height:  1.8; }
.lh9 { line-height:  1.9; }

//====================================================
//  Font Sizing
//====================================================


.fs-xs     { font-size: 50%; }
.fs-sm     { font-size: 75%; }
.fs-md     { font-size: $base-font-size; }
.fs-lg     { font-size: 125%; }
.fs-xl     { font-size: 150%; }
.fs-xxl    { font-size: 175%; }
.fs-double { font-size: 200%; }

Whitespace

To add padding and margin, there are classes like .m1, which would be margin: 1em; all around. Or .pt3, which is padding-top: 3em;

Positioning

There are a few basic positioning utility classes.

// ====================================================
//   Basic Positioning Properties
// ====================================================

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.center   { margin: 0 auto; }

// ====================================================
//   Absolute Positioning
// ====================================================

.top    { top: 0; }
.right  { right: 0; }
.bottom { bottom: 0; }
.left   { left: 0; }

.absolute-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

// ====================================================
//   Floats
// ====================================================

.float-left  { float: left; }
.float-right { float: right; }

Depth

You can layer elements from back to front with classes depth-1 through depth-10.

Icons

cleanSS comes with it's own icons.

Fonts and Icon-fonts are converted to inline CSS to reduce server requests and provide a stable implementation to host your fonts on your cdn (without using hacks). So you don't have to bother including the Fonts in your HTML file. Read about customization here.

Colors

Font colors

.font-blue
.font-green
.font-olive
.font-orange
.font-red
.font-purple
.font-black
.font-darkgrey
.font-midgrey
.font-grey
.font-lightgrey
.font-silver
.font-lightsilver
.font-white
.font-facebook
.font-google
.font-twitter

Background colors

.bg-blue
.bg-green
.bg-olive
.bg-orange
.bg-red
.bg-purple
.bg-black
.bg-darkgrey
.bg-midgrey
.bg-grey
.bg-lightgrey
.bg-silver
.bg-lightsilver
.bg-white
.bg-facebook
.bg-google
.bg-twitter

Border colors

.border-blue
.border-green
.border-olive
.border-orange
.border-red
.border-purple
.border-black
.border-darkgrey
.border-midgrey
.border-grey
.border-lightgrey
.border-silver
.border-lightsilver
.border-white
.border-facebook
.border-google
.border-twitter

Forms

Default Form

To create a default inline form, add the clean-form classname to any <form> element.

<form class="clean-form">
    <fieldset>
        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">
        <label for="remember">
            <input id="remember" type="checkbox"/>
            <span class="clean-checkbox clean-checkbox--blue"></span>
            Remember Me
        </label>
        <button type="submit" class="clean-button clean-button--primary">Sign in</button>
    </fieldset>
</form>

Stacked Form

To create a stacked form with input elements below the labels, add the clean-form--stacked classname to a <form> element alongside clean-form.

<form class="clean-form clean-form--stacked">
    <fieldset>
        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">

        <label for="remember">
            <input id="remember" type="checkbox"/>
            <span class="clean-checkbox clean-checkbox--blue"></span>
            Remember Me
        </label>

        <button type="submit" class="clean-button clean-button--primary">Sign in</button>
    </fieldset>
</form>

Aligned Form

To create an aligned form, add the clean-form--aligned classname to a <form> element alongside clean-form. In an aligned form, the labels are right-aligned against the form input controls, but on smaller screens revert to a stacked form.

<form class="clean-form clean-form--aligned">
    <fieldset>
        <div class="clean-form-group">
            <label for="email">Email</label>
            <input id="email" type="email" placeholder="Email">
        </div>
        <div class="clean-form-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>

        <div class="clean-form-controls">
            <label for="remember">
                <input id="remember" type="checkbox"/>
                <span class="clean-checkbox"></span>
                Remember Me
            </label>
            <button type="submit" class="clean-button clean-button--primary">Sign in</button>
        </div>
    </fieldset>
</form>

Multi-Column Form

To create multi-column forms, include your form elements within a grid. Creating responsive multi-column forms (like the example below) requires responsive grid to be present on the page.

<form class="clean-form clean-form--stacked">
    <fieldset>
        <div class="clean-grid">
            <div class="clean-unit-1-1 clean-unit-md-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" class="clean-input-2-3" type="text">
            </div>

            <div class="clean-unit-1-1 clean-unit-md-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" class="clean-input-2-3" type="text">
            </div>

            <div class="clean-unit-1-1 clean-unit-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" class="clean-input-2-3" type="email" required>
            </div>

            <div class="clean-unit-1-1 clean-unit-md-1-3">
                <label for="city">City</label>
                <input id="city" class="clean-input-2-3" type="text">
            </div>

            <div class="clean-unit-1-1 clean-unit-md-1-3">
                <label for="state">Gender</label>
                <select id="state" class="clean-input-1-3">
                    <option>F</option>
                    <option>M</option>
                </select>
            </div>
        </div>

        <label for="terms">
            <input id="terms" type="checkbox"/>
            <span class="clean-checkbox"></span>
            I accept the Terms & Conditions
        </label>

        <button type="submit" class="clean-button clean-button--primary">Submit</button>
    </fieldset>
</form>

Input Sizing

Input elements have fluid width sizes in a syntax that is similar to the grid. You can apply a clean-input-* class to these elements.






<form class="clean-form">
    <input class="clean-input-1-1" type="text" placeholder=".clean-input-1-1"><br>
    <input class="clean-input-2-3" type="text" placeholder=".clean-input-2-3"><br>
    <input class="clean-input-1-2" type="text" placeholder=".clean-input-1-2"><br>
    <input class="clean-input-1-3" type="text" placeholder=".clean-input-1-3"><br>
    <input class="clean-input-1-4" type="text" placeholder=".clean-input-1-4"><br>
 </form>

Rounded Inputs

To display a form control with rounded corners, add the clean-input--rounded classname.

<form class="clean-form">
    <input type="text" class="clean-input--rounded">
    <button type="submit" class="clean-button clean-button--primary">Search</button>
</form>

Checkboxes

To create a custom checkbox add a span.clean-checkbox next to the checkbox DOM element, which are localted inside an label Element. Custom checkboxes are available in all colors. Add the corresponding clean-checkbox--* color modifier.

<label>
    <input type="checkbox"/>
    <span class="clean-checkbox clean-checkbox--green"></span>
    .clean-checkbox--green
</label>

<label>
    <input type="checkbox"/>
    <span class="clean-checkbox clean-checkbox--orange"></span>
    .clean-checkbox--orange
</label>

<label>
    <input type="checkbox"/>
    <span class="clean-checkbox clean-checkbox--red"></span>
    .clean-checkbox--red
</label>

Radios

The syntax for creating custom radios is identical to checkboxes. Custom radios are available in all colors. Add the corresponding clean-radio--* color modifier.

<label>
    <input type="radio" name="radio"/>
    <span class="clean-radio clean-radio--green"></span>
    .clean-radio--green
</label>

<label>
    <input type="radio" name="radio"/>
    <span class="clean-radio clean-radio--orange"></span>
    .clean-radio--orange
</label>

<label>
    <input type="radio" name="radio"/>
    <span class="clean-radio clean-radio--red"></span>
    .clean-radio--red
</label>

Buttons

Outline buttons

To create a clean Button, add the clean-button classname to any <a> or <button> element.

A clean Button
<a class="clean-button" href="#">A clean Button</a>
<button class="clean-button">A clean Button</button>

Primary buttons

To indicate that a button represents a primary action, add the clean-button--primary classname alongside clean-button.

A primary Button
<a class="clean-button clean-button--primary" href="#">A primary Button</a>
<button class="clean-button clean-button--primary">A primary Button</button>

Pill buttons

Add clean-button--pill to any button to make them more rounded.

A primary pill Button
<a class="clean-button clean-button--primary clean-button--pill" href="#">A primary pill Button</a>
<button class="clean-button clean-button--pill">A pill Button</button>

Button sizes

Fancy larger or smaller buttons? Add clean-button--xl, clean-button--lg, clean-button--sm, or clean-button--xs for additional sizes.











<button class="clean-button clean-button--primary clean-button--xl">Extra large Button</button>
<button class="clean-button clean-button--xl">Extra large Button</button>
<button class="clean-button clean-button--primary clean-button--lg">Large Button</button>
<button class="clean-button clean-button--lg">Large Button</button>
<button class="clean-button clean-button--primary">Regular Button</button>
<button class="clean-button">Regular Button</button>
<button class="clean-button clean-button--primary clean-button--sm">Small Button</button>
<button class="clean-button clean-button--sm">Small Button</button>
<button class="clean-button clean-button--primary clean-button--xs">Extra small Button</button>
<button class="clean-button clean-button--xs">Extra small Button</button>

Button colors

clean Buttons are availabe in all colors. Add the corresponding clean-button--* color modifier.





<button class="clean-button clean-button--green">Green Button</button>
<button class="clean-button clean-button--orange">Orange Button</button>
<button class="clean-button clean-button--red">Red Button</button>
<button class="clean-button clean-button--primary clean-button--green">Green Button</button>
<button class="clean-button clean-button--primary clean-button--orange">Orange Button</button>
<button class="clean-button clean-button--primary clean-button--red">Red Button</button><br/><br/>

Tables

Default Table

To style an HTML table, add the clean-table classname.

# Name Gender City
1 Clemons Mcgowan male Carlton
2 Gladys Fleming female Wauhillau
3 Kennedy Greene male Biddle
<table class="clean-table">
    ...
</table>

Striped rows

Add .clean-table--striped to add zebra-striping to any table row within the <tbody>.

# Name Gender City
1 Clemons Mcgowan male Carlton
2 Gladys Fleming female Wauhillau
3 Kennedy Greene male Biddle
<table class="clean-table clean-table--striped">
    ...
</table>

Bordered table

Add .clean-table--bordered for borders on all sides of the table and cells.

# Name Gender City
1 Clemons Mcgowan male Carlton
2 Gladys Fleming female Wauhillau
3 Kennedy Greene male Biddle
<table class="clean-table clean-table--bordered">
    ...
</table>

Hover rows

Add .clean-table--hover to enable a hover state on table rows within a <tbody>.

# Name Gender City
1 Clemons Mcgowan male Carlton
2 Gladys Fleming female Wauhillau
3 Kennedy Greene male Biddle
<table class="clean-table clean-table--hover">
    ...
</table>

Alerts

Success! It worked.

Info! I need your attention.

Warning! Look out.

Error! Plase try again.

<div class="clean-alert clean-alert--success">
    <p><strong>Success!</strong> It worked.</p>
</div>

<div class="clean-alert clean-alert--info">
    <p><strong>Info!</strong> I need your attention.</p>
</div>

<div class="clean-alert clean-alert--warning">
    <p><strong>Warning!</strong> Look out.</p>
</div>

<div class="clean-alert clean-alert--danger">
    <p><strong>Error!</strong> Plase try again.</p>
</div>

Utilities

Tooltips

Tooltips does not rely on any Javascript, they can easily be added with an data-tooltip attribute on any element and the corresponding class with the position as the modifier.

<button type="button" class="clean-button tooltip tooltip--left" data-tooltip="Tooltip on the left">Tooltip on left</button>
<button type="button" class="clean-button tooltip tooltip--top" data-tooltip="Tooltip on the top">Tooltip on top</button>
<button type="button" class="clean-button tooltip tooltip--bottom" data-tooltip="Tooltip on the bottom">Tooltip on bottom</button>
<button type="button" class="clean-button tooltip tooltip--right" data-tooltip="Tooltip on the right">Tooltip on right</button>

Icon list

Use an icon list to place custom icons next to a list of items.

  • Facebook
  • Google Plus
  • Twitter
<ul class="clean-icon-list">
    <li><span class="icon-facebook font-facebook"></span>Facebook</li>
    <li><span class="icon-google-plus font-google"></span>Google Plus</li>
    <li><span class="icon-twitter font-twitter"></span>Twitter</li>
</ul>

Pricing Tags

$97
<div class="clean-price">
    <span>$</span>97
</div>

Rating

Add an rating system by defining multiple Radio buttons within an .clean-rating container.

<div class="clean-rating">
    <input type="radio" id="rating-5" name="rating" value="5">
    <label for="rating-5" ></label>

    <input type="radio" id="rating-4" name="rating" value="4">
    <label for="rating-4"></label>

    <input type="radio" id="rating-3" name="rating" value="3">
    <label for="rating-3"></label>

    <input type="radio" id="rating-2"  name="rating" value="2">
    <label for="rating-2"></label>

    <input type="radio" id="rating-1" name="rating" value="1">
    <label for="rating-1"></label>
</div>

Responsive embed

Embed an element, that scales on any device with an 16:9 aspect ratio based on the width of its containing block.
Rules are directly applied to <embed>, <iframe>, <object>, and <video> elements; optionally use an explicit descendant class .clean-aspect-ratio--object when you want to match the styling for other attributes.

<div class="clean-aspect-ratio">
    <iframe class="clean-aspect-ratio--object" src="..." frameborder="0"></iframe>
</div>

Helper classes

//====================================================
//  Display
//====================================================

.hidden {
    display: none;
}
.block {
    display: block;
}
.flex {
    display: flex;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}
.inline-flex {
    display: inline-flex;
}

.overflow-hidden {
    overflow: hidden;
}
.overflow-scroll {
    overflow: scroll;
}
.overflow-auto {
    overflow: auto;
}

.hide-on-sm {
    @media (max-width: $sm-break) {
        display: none !important;
    }
}
.hide-on-md {
    @media (max-width: $md-break) {
        display: none !important;
    }
}
.hide-on-lg {
    @media (min-width: $md-break) {
        display: none !important;
    }
}
.hide-on-xl {
    @media (min-width: $lg-break) {
        display: none !important;
    }
}

//====================================================
//  Text wrap
//====================================================

.pre {
    white-space: pre;
}
.nowrap {
    white-space: nowrap;
}

//====================================================
//  Scrolling
//====================================================

.scroll-horizontal {
    overflow-x: scroll;
    overflow-y: hidden;
}

.scroll-vertical {
    overflow-x: hidden;
    overflow-y: scroll;
}

.no-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;

    background: transparent;
}

//====================================================
//  Misc.
//====================================================

.cursor-pointer {
    cursor: pointer;
}

.no-pointer-events {
    pointer-events: none;
}

.disabled {
    cursor: not-allowed;
    pointer-events: none;

    opacity: .5;
}