Awesome Acss

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

Table of contents

• Official Links
• Articles
• Conference Talks
• Slide Decks
• Screencasts
• Tools
• Editor Plugins

Official Links

• Project homepage
• Github Organization
• Atomizer
• Official Docs
• Frequently Asked Questions
• Syntax Reference

Articles

• Challenging CSS Best Practices by @thierryk on Smashing Magazine
• The Making of Atomic CSS: An Interview With Thierry Koblentz
• Is 2016 the year of Atomic CSS? by Richard Bray on Creative Bloq
• Atomic CSS as a toolset by Alma Madsen on Lucid Chart
• OOCSS, ACSS, BEM, SMACSS: What are they? What should I use? by @hilja
• Atomic CSS on Steroids by @thierryk on CSS Mojo
• How to write better CSS in teams with ACSS — A dynamic Atomic CSS library by @chinchang

Conference Talks

• Atomic CSS by Thierry Koblentz at FEDLondon
• Atomic Cascading Style Sheets by Renato Iwashima at HTML5DevConf
• Atomic CSS: How to Take Control of Your CSS by Amelia Downs at WWCode Network Events

Slide Decks

• Atomic CSS by @thierryk

Screencasts

• What is Atomic CSS? - Organising CSS by Richard Bray
• Getting started with Yahoo's Atomizer - Organising CSS by Richard Bray
• Atomic CSS on steroids by @thierryk

Tools

• Atomizer Web Online playground for ACSS - by @pankajparashar
• ACSS Browser Auto-generate acss classes in your browser for debugging - by @whmountains
• Web Maker Offline web playground as a Google Chrome Extension with ACSS support - by @chinchang
• ACSS Searcher A handy Atomic CSS class searcher on Chrome extension - by @tom76kimo
• Atomic CSS Devtools Transform element style to atomic css class automatically from your chrome devtool Element panel. - by @ArvinH

Editor Plugins

• VSCode Extension - Atomic CSS Snippets by @kfay
• VSCode Extension - Atomizer by @pankajparashar
• VSCode Extension - Atomic-css-search by @ArvinH

Contribution Guidelines

Please feel free to suggest new resources by creating a new issue and submit translation in other languages by creating a new pull request. 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