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: 20 days 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 (about 10 years ago)
• Default Branch: main
• Last Pushed: 2024-05-19T14:48:07.000Z (6 months ago)
• Last Synced: 2024-05-19T14:49:29.585Z (6 months ago)
• Topics: atomic-css, atomizer, css, functional-css, utility-css
• Language: JavaScript
• Homepage: https://acss.io
• Size: 7.11 MB
• Stars: 1,530
• Watchers: 46
• Forks: 95
• Open Issues: 18
• 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-list - atomizer - io | 1181 | (JavaScript)

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).