Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acss-io/atomizer
A library to create small, reusable CSS that scales as your website grows.
https://github.com/acss-io/atomizer
atomic-css atomizer css functional-css utility-css
Last synced: about 2 months ago
JSON representation
A library to create small, reusable CSS that scales as your website grows.
- Host: GitHub
- URL: https://github.com/acss-io/atomizer
- Owner: acss-io
- License: other
- Created: 2014-10-01T21:35:27.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T22:39:56.000Z (about 2 months ago)
- Last Synced: 2024-05-02T08:39:42.768Z (about 2 months ago)
- Topics: atomic-css, atomizer, css, functional-css, utility-css
- Language: JavaScript
- Homepage: https://acss.io
- Size: 7.11 MB
- Stars: 1,526
- Watchers: 46
- Forks: 94
- Open Issues: 23
-
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
Lists
- awesome-list - atomizer - io | 1181 | (JavaScript)
- awesome-stars - atomizer - A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse. (JavaScript)
- awesome-stars - acss-io/atomizer - A library to create small, reusable CSS that scales as your website grows. (JavaScript)
- awesome-acss - Atomizer
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).