https://github.com/acss-io/awesome-acss

A curated list of awesome resources related to Atomic CSS
https://github.com/acss-io/awesome-acss

List: awesome-acss

Last synced: about 2 months ago
JSON representation

A curated list of awesome resources related to Atomic CSS

• Host: GitHub
• URL: https://github.com/acss-io/awesome-acss
• Owner: acss-io
• Created: 2016-10-30T16:27:15.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-07-17T05:30:00.000Z (about 2 years ago)
• Last Synced: 2024-04-10T03:38:54.439Z (6 months ago)
• Homepage: http://acss.io
• Size: 13.7 KB
• Stars: 25
• Watchers: 6
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Awesome Acss  

A curated list of awesome resources related to Atomic CSS. Please refer to the contribution guidelines and the license for more information.

[![Awesome Badge](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

## Table of contents  

  - [Official Links](#official-links)

  - [Articles](#articles)

  - [Conference Talks](#conference-talks)

  - [Slide Decks](#slide-decks)

  - [Screencasts](#screencasts)  

  - [Tools](#tools)

  - [Editor Plugins](#editor-plugins)

  

## Official Links

  - [Project homepage](http://acss.io/)

  - [Github Organization](https://github.com/acss-io)

  - [Atomizer](https://github.com/acss-io/atomizer)

  - [Official Docs](http://acss.io/quick-start.html)

  - [Frequently Asked Questions](http://acss.io/frequently-asked-questions.html)

  - [Syntax Reference](http://acss.io/reference)

  

## Articles

  - [Challenging CSS Best Practices](https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/) by @thierryk on Smashing Magazine

  - [The Making of Atomic CSS: An Interview With Thierry Koblentz](https://css-tricks.com/thierry-koblentz-atomic-css/)

  - [Is 2016 the year of Atomic CSS?](http://www.creativebloq.com/css3/atomic-css-11619006) by Richard Bray on Creative Bloq

  - [Atomic CSS as a toolset](https://www.lucidchart.com/techblog/2014/01/31/atomic-css-tool-set/) by Alma Madsen on Lucid Chart

  - [OOCSS, ACSS, BEM, SMACSS: What are they? What should I use?](http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/) by @hilja

  - [Atomic CSS on Steroids](http://www.cssmojo.com/atomic-css-on-steroids/) by @thierryk on CSS Mojo

  - [How to write better CSS in teams with ACSS — A dynamic Atomic CSS library](https://medium.freecodecamp.org/acss-a-dynamic-atomic-css-library-402dff9756e0) by @chinchang

  

## Conference Talks

  - [Atomic CSS](https://www.youtube.com/watch?v=bokjM0ZaizQ) by Thierry Koblentz at FEDLondon

  - [Atomic Cascading Style Sheets](https://www.youtube.com/watch?v=ojj_-6Xiud4) by Renato Iwashima at HTML5DevConf

  - [Atomic CSS: How to Take Control of Your CSS](https://www.youtube.com/watch?v=P2seO1yYz88) by Amelia Downs at WWCode Network Events

  

## Slide Decks  

  

  - [Atomic CSS](https://www.haikudeck.com/atomic-css-science-and-technology-presentation-dJ0xlFjhBQ) by @thierryk  

  

## Screencasts

  - [What is Atomic CSS? - Organising CSS](https://www.youtube.com/watch?v=NRqbLuKKOlE) by Richard Bray

  - [Getting started with Yahoo's Atomizer - Organising CSS](https://www.youtube.com/watch?v=dX_oVU2TiVo) by Richard Bray

  - [Atomic CSS on steroids](https://www.youtube.com/watch?v=988XpUvzslE) by @thierryk

  

## Tools

  - [Atomizer Web](http://pankajparashar.com/atomizer-web/) Online playground for ACSS - by @pankajparashar

  - [ACSS Browser](https://github.com/acss-io/acss-browser) Auto-generate acss classes in your browser for debugging - by @whmountains

  - [Web Maker](https://webmakerapp.com) Offline web playground as a Google Chrome Extension with ACSS support - by @chinchang

  - [ACSS Searcher](https://chrome.google.com/webstore/detail/acss-searcher/jfjnohnigljooioglaeegkjkggjmamjo) A handy Atomic CSS class searcher on Chrome extension - by @tom76kimo

  - [Atomic CSS Devtools](https://chrome.google.com/webstore/detail/atomic-css-devtools/dpkcndhnanpdlppppalhnhfbokhicdmi) Transform element style to atomic css class automatically from your chrome devtool Element panel. - by @ArvinH

  

## Editor Plugins

  - [VSCode Extension - Atomic CSS Snippets](https://marketplace.visualstudio.com/items?itemName=acss-io.atomic-css-snippets) by @kfay

  - [VSCode Extension - Atomizer](https://marketplace.visualstudio.com/items?itemName=pankaj-parashar.atomizer) by @pankajparashar

  - [VSCode Extension - Atomic-css-search](https://marketplace.visualstudio.com/items?itemName=ArvinH.atomic-css-search) by @ArvinH

  

## Contribution Guidelines  

Please feel free to suggest new resources by [creating a new issue](https://github.com/acss-io/awesome-acss/issues) and submit translation in other languages by [creating a new pull request](https://github.com/acss-io/awesome-acss/pulls). Few points to note,

  - Use one of the appropriate lables, namely, **#official-links**, **#tutorials**, **#demos**, **#miscellaneous** while creating a new issue to categorize the resource.

  - To request the addition of a new label, raise a separate issue to create the label first and tag it appropriately with the **#new-label**.

  - To update the hyperlink of a resource, already present in the list, use the label **#updated-link** and include the new hyperlink in the body of the issue page.

## License  

[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)