Meet Atomizer!
Atomizer generates a simple static CSS stylesheet from the Atomizer classes you define in your project or predeclared configured styles - it's up to you.
Atomizer is not opinionated, brings no CSS of its own and integrates nicely with your favorite task runner.
Testimonials
Colors
hex
color.
Variables
Variables are useful for theming but they can also be used to share a common value across style declarations. In this example, brandColor
is responsible for setting the text color, background color and border color, while columnWidth
dictates the width of the first box and the left offset of its sibling.
CSS custom properties (variables) can also be referenced as class values. Note that values are not managed by Atomizer, and must be defined independently.
Read more »Contextual selectors
Atomizer syntax allows you to style elements depending on their ancestors or siblings.
In this example, two identical sets of boxes are styled differently depending on the class applied to their parent element.
Pseudo-classes
Create styles that rely on pseudo-classes.
In this example, the foreground and background color change when users hover over the box.
You can also combine descendant selectors with pseudo-classes. In this example, the nested box is revealed when a user hovers over its parent:
Lorem ipsum
Grids
Responsive Design
Define your responsive breakpoints in configuration using standard media query syntax. Then, reference those breakpoints in your Atomizer classes or configuration.
Classes mapped to a single breakpoint
Reference your breakpoints in your classnames using a double-dash suffix (eg, --sm
).
In this example, the four boxes are styled as inline-block
, with a width
of 25%
when the viewport is more than 700px
wide.
Classes mapped to multiple breakpoints
Classes may have different values associated with different breakpoints; meaning the same class applies different styles depending on media queries.
Helpers
Atomizer offers a selection of helper classes for common styling, such as "clearfix" to clear floats (Cf
), Bd
to help with setting borders, Ell
to truncate text with ellipsis, Hidden
to visually hide text, and more.
For example LineClamp()
, which takes two parameters:
Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.
Easily Integratable
Atomizers can be easily integrated into some of the most popular web frameworks. Here are some of the guides you can choose from.