Quick Start

Edit on Github

This page is here to help you quickly set up an example site powered by Atomizer.

Playground

To create a basic Atomic project, clone the atomizer-examples repo:

git clone git@github.com:acss-io/atomizer-examples.git

then start:

cd atomizer-examples
npm install
npm start

This should open a page in your browser at http://localhost:3000

Now try this:

  • Open the index page in a text editor
  • Edit, add, or remove Atomic classes in the markup (get help from the reference page)
  • Save the file

The browser should reload the page, displaying all your changes. Check the atomic.css file to see that it only contains the rules for the classes that are being used in the project.

config.js

Give the config a try! Open this file (which is inside /examples/) and edit the value of the custom class it contains. You can also check the home page for examples of how to use the config to create breakpoints, variables, and more.

Next Steps

From here, learn about Atomic CSS Architecture, read the FAQ, learn more about Atomic classes and their syntax.

Please visit the Atomizer and grunt-atomizer repositories for more information.