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:
<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! */
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"></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.
Support matrix3d values
While I really like this idea I can't use it since it does not support
transform: martix3d().Could you add the matrix3d values?
Since matrix3d takes 16 values and each can be any valid 32bit integer this might take some space, but should be worth it in the end.
HTTPS support?
Just curious (sorry if this has been asked already), but will you guys support HTTPS over CSS? I need to secure some data while it's being sent over the pipe.
Was looking over the css file but found no workable solution, thanks.
Edit: Also, I need some help setting up a HTTP server within CSS too. But, cannot seem to get it working with nodejs... Node can read my css file, but JS doesn't seem to run well in it, any idea?
Edit2: I also tried the old CDATA style syntax, for example:
within CSS to run with node, but with no luck.
Add shorthand rules
In the spirit of functional CSS, which is really really great I would appreciate to have some shorter rules, that are easier to remember! My the first two letters of each property to reduce confusion!
bgcoforbackground-color,boraforborder-radiusetc. This will also help to reduce the overall size of my HTML!Add missing properties :turtle:
This issue can be used as a tracker to make sure that all properties and values are supported. Start of a list below:
How do you feel now Tailwindcss is a thing ?
I know this start from a joke, but now there are plenty users clapping for Tailwindcss
So this is a legitimate question to ask, no offenses. But do you still think that this is a step in the wrong direction ? Even if css-in-js or Purgecss are now a thing too ?
Cheers,
support for {border: none;}
We need to repair the typos on lines 432, 66645, 69828, 73011, and 76194, which are respectively:
| Row | Is | Should be | --- | --- | --- | 432 |
.border-style-lone { border-style: lone; }|.border-style-none { border-style: none; }| 66645 |.border-bottom-style-lone { border-bottom-style: lone; }|.border-bottom-style-none { border-bottom-style: none; }| 69828 |.border-left-style-lone { border-left-style: lone; }|.border-left-style-none { border-left-style: none; }| 73011 |.border-right-style-lone { border-right-style: lone; }|.border-right-style-none { border-right-style: none; }| 76194 |.border-top-style-lone { border-top-style: lone; }|.border-top-style-none { border-top-style: none; }Update Bootstrap link in README
Currently the Bootstrap v4 spacing utility link is broken. I believe this is where it should point to: https://v4-alpha.getbootstrap.com/utilities/spacing/
Love the framework, you should see if you can get it hosted in some CDNs! :D
Add mangled class-names
Add mangled class-names to universal.css. I decided to go with the first two letters of each class-name to prevent multiple rules with the same name (though I didn't really check if there are any). Also I implemented it by overwriting
console.logto improve the overall quality of the code!Fixes ##12
Lack of pseudo class css
Really great tool :two_hearts: , but there are no hover/focus/active/etc .... :cyclone: https://www.w3.org/wiki/CSS/Selectors#Pseudo-classes
I really think this is needed : but can we use css spec for this :question:
javascript trap + better documentation of js and css
Actually : LibreJs block universal.js :disappointed: .
I think :thought_balloon: js and css must be well documented with jsdoc and cssdoc too :notebook_with_decorative_cover:
Make this generated ( FILE SIZE )
Instead of having the file be CSS to start, why not use javascript to build the stylesheet on the fly instead?
Instead of a css files that has
border-width-1px,border-width-2px, ...border-width-npx, change to something likefor (x in [1...n]) { outputs.push('border-width-' + x + ' { border-width: ' + x + 'px; }'); }Right now the css is 5 megs, but it could be much MUCH smaller if js was used to build a stylesheet. The stylesheet would still be 5 megs, but the js downloaded would be only like <50k
Is Tailwind CSS a rip-off of this?
I've recently heard about an immensely popular CSS framework called Tailwind CSS.
And I could not help but notice how suspiciously similar the approach looks to universal.css (my favorite framework that I've been using in every project for the last years).
Now I'm just wondering, what helped Tailwind to become so popular, and if there is some kind of legal action planned...?
Missing class-based media queries
I think this framework is missing the most useful feature of 2018. The class-based media queries! Where them are? I'm totally missing them.
For example
or at least a longer version:
Conflicts with universal-squared.css
I'm needing to use this CSS alongside my fork universal-squared, but I'm getting inconsistent behavior depending on which stylesheet I include first.
Not sure if using universal.css is going to be an option for me if you can't get this fixed.