marmelab/universal.css

Name: universal.css

Owner: marmelab

Description: The only CSS you will ever need

Created: 2016-05-17 15:51:25.0

Updated: 2018-01-17 06:48:06.0

Pushed: 2017-08-11 12:22:08.0

Homepage:

Size: 518

Language: CSS

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

universal.css

The only CSS you will ever need.

Features:

• Self-documented classnames
• Zero dependencies
• Classnames are reusable across 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:

k 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 -->
 class="sidebar">
<!-- sidebar content -->
v>

css
ain.css */
ebar {
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 -->
 class="
rder-top-width-1-dot-04em
rder-top-style-dotted
rder-top-color-lightgrey
rder-bottom-width-12px
rder-bottom-style-solid
rder-bottom-color-cornflowerblue
rder-top-right-radius-1-dot-60em
dding-5px
rgin-left-10px
ckground-color-fuchsia

<!-- sidebar content -->
v>

css
ain.css */
othing! */

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.

or-black { color: black; }
kground-color-black { background-color: black; }
der-color-black { border-color: black; }
or-blanchedalmond { color: blanchedalmond; }
kground-color-blanchedalmond { background-color: blanchedalmond; }
der-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:

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

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.