universal.css

The only CSS you will ever need.

Features:

Self-documented classnames
Zero dependencies
Classnames are reusable accross projects
Removes the need for a CSS preprocessor
Removes the need for a CSS bundler
No more custom CSS required
No need to switch between HTML and CSS file while developing
HTTPS ready
No more debate about rule naming (dash, double dash or underscore?). The CSS spec is all we need!

Usage

Insert this one line in your HTML source file:

<link rel="stylesheet" src="https://cdn.rawgit.com/marmelab/universal.css/master/universal.css" />

Then you can change the CSS classes in your HTML to universal CSS classes:

Before:

<!-- index.html -->
<div class="sidebar">
    <!-- sidebar content -->
</div>

/* main.css */
.sidebar {
    border-top: 1.04em dotted lightgrey;
    border-bottom: 12px solid cornflowerblue;
    border-top-right-radius: 1.60em;
    padding: 5px;
    margin-left: 10px;
    background-color: fuchsia;
}

After:

<!-- index.html -->
<div class="
  border-top-width-1-dot-04em
  border-top-style-dotted
  border-top-color-lightgrey
  border-bottom-width-12px
  border-bottom-style-solid
  border-bottom-color-cornflowerblue
  border-top-right-radius-1-dot-60em
  padding-5px
  margin-left-10px
  background-color-fuchsia
">
    <!-- sidebar content -->
</div>

/* main.css */
/* Nothing! */

Check out our demo

FAQ

Where is the documentation?

You don't need documentation. Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname. For instance,

border-top-right-radius: 1.60em => .border-top-right-radius-1-dot-60em

How can you know which classes I need?

We use a smart CSS generator, based on statistical analysis of most used CSS rules, and coupled with a sophisticated prediction engine. Check out the source code for details.

Do you provide a minified version?

universal.css is already highly optimized, and wouldn't benefit much from minification. Check this extract of the source code for a glimpse of the universal.css file syntax.

.color-black { color: black; }
.background-color-black { background-color: black; }
.border-color-black { border-color: black; }
.color-blanchedalmond { color: blanchedalmond; }
.background-color-blanchedalmond { background-color: blanchedalmond; }
.border-color-blanchedalmond { border-color: blanchedalmond; }

But universal.css weights several MBs. How can I optimize the rendering time?

You're covered! If you don't want your users to download a large CSS file, replace the <link> tag with a <script> tag:

<script src="https://cdn.rawgit.com/marmelab/universal.css/master/universalCssGenerator.js" />

That's right! Our generator works both in the backend and in the frontend - it is truly universal. The JavaScript file is much lighter, and will load very quickly. Once loaded, it generates the universal.css styles directly in the browser.

I need a class for Webdings Fonts.

Universal.css is a community effort, currently at an early stage. We don't yet cover all CSS rules, but we welcome every Pull Request helping us to achieve feature completeness.

How can I deal with responsive designs and break points?

We're studying the question, please open an issue if you have a good idea about how to do it.

Where did you get the inspiration from?

Bootstrap V4 recently introduced spacing utility classes like m-t-1 (which translates to margin-top: 1rem!important), and we thought we'd expand this idea to more classes.

Is this a joke?

Of course it's a joke. Use semantic CSS class names.

License

Universal.css is provided free of charge, courtesy of marmelab, under the WTFPL License.