https://acss-io.github.io/atomizer/
A library to create small, reusable CSS that scales as your website grows.
https://acss-io.github.io/atomizer/
atomic-css atomizer css functional-css utility-css
Last synced: 3 months ago
JSON representation
A library to create small, reusable CSS that scales as your website grows.
- Host: GitHub
- URL: https://acss-io.github.io/atomizer/
- Owner: acss-io
- License: other
- Created: 2014-10-01T21:35:27.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T21:16:00.000Z (6 months ago)
- Last Synced: 2024-10-29T15:09:26.298Z (6 months ago)
- Topics: atomic-css, atomizer, css, functional-css, utility-css
- Language: JavaScript
- Homepage: https://acss-io.github.io/atomizer/
- Size: 6.1 MB
- Stars: 1,542
- Watchers: 45
- Forks: 97
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Support: docs/support.md
Awesome Lists containing this project
- awesome-functional-css - Atomic CSS Architecture
README
# Atomizer
Atomizer is a tool that helps you create Atomic CSS rules ([acss.io](http://acss.io)).
Atomic CSS is a collection of single purpose styling units for maximum reuse that fits well with components in templated frameworks such as [React](https://github.com/facebook/react), [Ember](https://github.com/emberjs/ember.js/) or [Angular](https://github.com/angular/angular.js). For more information we recommend that you read "[Challenging CSS best practices](http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/)", watch the Atomic CSS [presentation](https://www.youtube.com/watch?v=ojj_-6Xiud4), or [check this deck](https://www.haikudeck.com/atomic-css-science-and-technology-presentation-dJ0xlFjhBQ).
## Info
This is a monorepo of the various Atomizer ecosystem packages.
### Library
- Atomizer: The library source code is located in the `packages/atomizer` directory
### Plugins
- Grunt : [grunt-atomizer](https://github.com/acss-io/atomizer/tree/main/packages/grunt-atomizer)
- Gulp : [gulp-atomizer](https://github.com/acss-io/gulp-atomizer)
- Metalsmith : [metalsmith-atomizer](https://github.com/tests-always-included/metalsmith-atomizer)
- Webpack : [webpack-atomizer-loader](https://github.com/acss-io/atomizer/tree/main/packages/webpack-atomizer-loader)
- Boot-clj : [boot-atomizer](https://github.com/azizzaeny/boot-atomizer)
- Ember : [ember-cli-atomizer](https://github.com/nag5000/ember-cli-atomizer)
### Third Party Extensions
#### For Chrome
- [Atomic CSS Dev Tools](https://chrome.google.com/webstore/detail/atomic-css-devtools/dpkcndhnanpdlppppalhnhfbokhicdmi/related?hl=en)
- [Web Maker](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh?hl=en)
- [Atomic CSS Helper](https://chrome.google.com/webstore/detail/atomic-css-helper/gpickgadladepnjlmaipnekafhpmangd?hl=en)
#### For VSCode
- [Atomic CSS Snippets](https://marketplace.visualstudio.com/items?itemName=acss-io.atomic-css-snippets) - Provides quick suggestions for Atomic CSS class names
- [Atomic-css-search](https://marketplace.visualstudio.com/items?itemName=ArvinH.atomic-css-search) - Search Atomic css right in your favorite editor.
## Contributing
Please read through our [CONTRIBUTING.md](https://github.com/acss-io/atomizer/blob/main/CONTRIBUTING.md) and fill out an issue at [atomizer/issues](https://github.com/acss-io/atomizer/issues/new)!
## License
This software is free to use under the Yahoo Inc. BSD license. See the [LICENSE file][] for license text and copyright information.
[license file]: https://github.com/acss-io/atomizer/blob/main/LICENSE.md
Third-party open source code used are listed in our [package.json file](https://github.com/acss-io/atomizer/blob/main/package.json).