@volusion/element-atomic-css v2.0.3

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

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.