viivue / atomic-css

⚛️ Customizable Atomic CSS Framework for everyone.

Atomic CSS

⚛️ Customizable Atomic CSS Framework for everyone.

• 💡Inspirited by Atomic CSS, Vì Một Thế Giới Hoà Bình
• 👀 Guided by Stacks
• ✨ Build with SCSS

We all might agree that Atomic CSS is a helpful tool for both FE and BE development. There's a lot of Atomic CSS frameworks out there (like tailwindcss), however, to elevate the advantage of Atomic CSS, while keeping it in as light-weight as possible, and even customizable for each project, we have this project on the go.

Usage

NPM

Install NPM package with basic config

npm i @viivue/atomic-css

Import

import "@viivue/atomic-css";

Or, you can download the default Atomic CSS files in the /dist folder.

CDN

Check the CDN served by jsDelivr here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/[email protected]/dist/atomic.min.css">

Customization

To add custom classes for a specific project, you will have to:

1. Clone this repo to your local machine.
2. Edit the /scss/_config.scss, you will find some example templates there.
3. Generate the new Atomic CSS by npm run prod.

Deployment

npm install

# Watch SCSS files, then compile to previewed CSS
npm run dev

# Compile compressed CSS for distribution.
# Check version at `_defs.scss` and `package.json`
npm run prod

# Publish NPM package
# Auto-publish package on release using GitHub workflow
npm publish

atomic-css's Issues

feat: container sizes

Create options to add multiple container sizes, and provide related CSS variables and classes.

Usage demo:

/* variables */
:root {
    /* Container */
    --bb-container:1076px;
    --bb-container-large:1196px;
    --bb-container-xl:1290px;
}

/* Container */
.container, .container-large, .container-xl {
    position:relative; width:100%; max-width:calc(var(--bb-container) + var(--bb-gap-container) * 2);
    margin-right:auto; margin-left:auto;
    padding-right:var(--bb-gap-container); padding-left:var(--bb-gap-container);
}
.container {max-width:calc(var(--bb-container) + var(--bb-gap-container) * 2);}
.container-large {max-width:calc(var(--bb-container-large) + var(--bb-gap-container) * 2);}
.container-xl {max-width:calc(var(--bb-container-xl) + var(--bb-gap-container) * 2);}

Width & height

Ref: https://stackoverflow.design/product/base/width-height/

All the classes below.

release npm package

Add Border radius

Ref: https://stackoverflow.design/product/base/border-radius/

Only create classes for what's inside this table.

Abbreviation	Output	Definition
.bar-pill	border-radius: 1000px	Apply a border radius of 1000px to each corner for a 100% rounding of the left and right corners
.bar-circle	border-radius: 100%	Apply a border radius of 100% to each corner circular appearance
.bar0	border-radius: 0	Apply a border radius of 0 to all corners
.bar3	border-radius: 3px	Apply a border radius of 3px to all corners
.bar5	border-radius: 5px	Apply a border radius of 5px to all corners
.bar10	border-radius: 10px	Apply a border radius of 10px to all corners
.bar15	border-radius: 15px	Apply a border radius of 15px to all corners

We should be able to generate the CSS using a config.json

• And have CLI to generate the CSS right inside the project.

specific transition properties

Why

We need to specify the transition properties instead of using transition:all in order to bypass the "avoid non-composited animations" issue from Lighthouse.

How

.t-transform {transition-property: transform;}
.t-transform-opacity {transition-property: transform, opacity;}
.t-transform-opacity-color {transition-property: transform, opacity, color;}
.t-transform-color {transition-property: transform, color;}
.t-opacity-color {transition-property: opacity, color;}
.t-opacity {transition-property: opacity;}
.t-color {transition-property: color;}

Ref

• https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations
• https://github.com/viivue/atomic-css/blob/main/scss/transitions.scss

Add top, right, bottom, left auto

.t-auto { top:auto; }
/* same for other props */

https://github.com/viivue/atomic-css/blob/main/css/positioning.css

🚐 Road map

At the end of this road map, we will have a responsive and customizable atomic CSS framework.

To avoid reinventing the wheel, we would follow the naming structure of Stacks.

Checklist

• Display
• Spacing vertical
• Spacing horizontal
• Font size
• Positioning
• Typography
• Flex
• Background
• Object fit
• Transitions
• Color

Core: option to remove hyphen from prefix

Problems with:

• z-index => .z-1,...
• border-radius => .bar-0,...

CSS issue: skeleton-shine unsupported background-position property on PageSpeed

The problem occurs when we test the page speed on https://pagespeed.web.dev/

I think it causes a bug because of the conflict between using background-position in animation.

add visually hidden

We need this to leverage the support to a11y.

/* Visually hidden */
.visually-hidden {
    position:absolute;overflow:hidden;clip:rect(0 0 0 0);
    width:1px;height:1px;margin:-1px;padding:0; border:0;
}

Read more in this article.

Add Overflow

Add all classes from https://stackoverflow.design/product/base/overflow/