@volusion/element-atomic-css

Atomic CSS by Volusion

A CSS library based on Tachyons for use on Element based Volusion storefronts.

Individual Stylesheets

• box-sizing
• coordinates
• display
• flexbox
• height
• images
• lists
• max-width
• normalize
• overflow
• position
• skins
• spacing
• text-align
• text-decoration
• utilities
• vertical-align
• width
• z-index

NPM Scripts

npm script	Description
less	Compiles the src/less/index.less file to dist/index.css.
minify	Minifies the dist/index.css file to dist/index.min.css.
compile	Runs the less script and then the minify script.
watch	Watches the files in src/less/ for changes and compiles matching css files in dist. Does NOT minify the final dist/index.min.css file.

Combining Atomic CSS with custom aphrodite classes

<div
    className={joinClasses(
        'flex items-center w-100',
        css(classes.yourCustomClassA, classes.yourCustomClassB)
    )}
/>

Output:

<div class="flex items-center w-100 dynamic_custom_class"></div>

What is the joinClasses function?

That function can be found in your block props and is meant to join your classes together with some extra logic to ensure you output classlist is clean and free of unintended classes and whitespace. It will

• Join all arguments together with a single space between each one.
• Remove any unnecessary whitespace that might be caused before, between, or after your final classes.
• Remove any invalid classes that might be output by bad logic (removes undefined, null, false, and additional whitespace), which is the biggest reason to use it over string literals.