Quickly learn how to use Atomizer with our simple examples.
Atomizer works by scanning HTML, JS and any other text file for Atomizer classes. The classes are tranformed into style declarations and outputted to a CSS file. Add this generated CSS file to your site and you are done!
We have created a few examples that you can check out before setting up Atomizer on your own site. Please follow the instructions below.
To try our example Atomic project, clone the atomizer repo:
git clone email@example.com:acss-io/atomizer.git
then run our simple example dev server:
npm install npm run examples
This should open a page in your browser at http://localhost:8080
Now try this:
- Open the index page in a text editor
- Edit, add, or remove Atomizer 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.
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.
Please visit the Atomizer repository for more information.