Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marmelab/universal.css
The only CSS you will ever need
https://github.com/marmelab/universal.css
css framework
Last synced: about 2 months ago
JSON representation
The only CSS you will ever need
- Host: GitHub
- URL: https://github.com/marmelab/universal.css
- Owner: marmelab
- License: wtfpl
- Created: 2016-05-17T15:51:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-11T12:22:08.000Z (about 7 years ago)
- Last Synced: 2024-05-08T12:31:49.496Z (4 months ago)
- Topics: css, framework
- Language: CSS
- Homepage:
- Size: 506 KB
- Stars: 1,258
- Watchers: 22
- Forks: 39
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-CSS-Resources - universal.css:
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](https://www.w3.org/Style/CSS/specs.en.html) is all we need!
## Usage
Insert this one line in your HTML source file:
```html
```
Then you can change the CSS classes in your HTML to **universal CSS classes**:
Before:
```html
```
``` css
/* 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:
```html
```
``` css
/* main.css */
/* Nothing! */
```
[Check out our demo](http://jsbin.com/mahimemiti/edit?html,output)
## 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](https://github.com/marmelab/universal.css/blob/master/universalCssGenerator.js) 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.
```css
.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 `` tag with a `` tag:
```html
<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](https://v4-alpha.getbootstrap.com/utilities/spacing/) 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](http://maintainablecss.com/).
## License
Universal.css is provided free of charge, courtesy of [marmelab](http://marmelab.com), under the [WTFPL License](http://www.wtfpl.net/).