Quick Start
Edit on GithubThis 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 ACSS 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.
Configuration
Atomizer allows you to define breakpoints, variables/custom values, and predefined classes in a JSON-formatted config file. Take a look at this example for more information on how configuration is used in Atomizer.
Next Steps
From here, learn about Atomic CSS Architecture, read the FAQ, learn more about ACSS classes and their syntax.
Please visit the Atomizer and grunt-atomizer repositories for more information.