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 getsfont-weight: 300;
Roboto-Light-Italic getsfont-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
Background colors
Border colors
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>
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>Menus
clean Menus have minimal design and are designed to indicate active and selected items.
Vertical Menu
By default, vertical menu items take up 100% of the width of their container
<div class="clean-menu clean-menu--vertical">
<ul class="clean-menu-nav">
<li class="clean-menu--active"><a href="#1">Menu Item #1</a></li>
<li><a href="#2">Menu Item #2</a></li>
<li><a href="#3">Menu Item #3</a></li>
</ul>
</div>Horizontal Menu
To create a horizontal menu, add the clean-menu--horizontal class name instead.
<div class="clean-menu clean-menu--horizontal">
<ul class="clean-menu-nav">
<li class="clean-menu--active"><a href="#1">Menu Item #1</a></li>
<li><a href="#2">Menu Item #2</a></li>
<li><a href="#3">Menu Item #3</a></li>
</ul>
</div>Responsive Menu
In combination with a clean Grid and some CSS magic we can make a fully responsive Menu, which uses hidden Radio buttons to switch through different Pages/Tabs.
<div class="clean-grid clean-menu clean-menu--responsive">
<input type="radio" id="menu-1" name="menu" checked>
<input type="radio" id="menu-2" name="menu">
<input type="radio" id="menu-3" name="menu">
<ul class="clean-menu-nav clean-unit-1-1 clean-unit-md-1-5">
<li><label for="menu-1">Menu Item #1</label></li>
<li><label for="menu-2">Menu Item #2</label></li>
<li><label for="menu-3">Menu Item #3</label></li>
</ul>
<ul class="clean-menu-list clean-unit-1-1 clean-unit-md-4-5">
<li>Content #1</li>
<li>Content #2</li>
<li>Content #3</li>
</ul>
</div>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.
<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
<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;
}