Alga CSS
Alga CSS is a scope or component-first CSS toolkit for quickly mix or compose CSS components and properties, visit https://algacss.com
Older version only work on Unix/Linux based operating system, if you're using Windows, that mean you need to use the newest version otherwise the default directives won't work (I mean all the CSS components from alga directory not being read), this is because of bug that I have fixed now.
All the main features:
- Created for scoped CSS
- As a PostCSS plugin
- Composing or mixing CSS components
- Custom CSS helpers (preset, define, color, screen, etc.)
- Extract classes from Vue, HTML (Petite-Vue, Alpine.js), Astro, Svelte, and JSX/TSX
Installation and Setup
Alga CSS built on top of PostCSS, so before installing Alga CSS, you need to have PostCSS first and after that you can use NPM or Yarn to install this Alga CSS.
npm install alga-css --save-dev
yarn add alga-css
If you use tool that support PostCSS out of the box like Vite for instance, you just need to create a new config file which is postcss.config.cjs
and add the code below to that file.
const algacss = require('alga-css')
module.exports = {
plugins: [
algacss({
extract: [
'./src/**/*.vue',
'./src/**/*.html',
'./src/**/*.astro',
'./src/**/*.svelte',
'./src/**/*.jsx',
'./src/**/*.tsx'
],
src: './src/styles/*.alga'
})
]
}
Class Name Structure
Alga CSS uses special character -
to gab classes from HTML elements or Vue components, and it uses :
for breakpoints and states and also _
as a divider or separator of css values.
<span class="marginTop-0.75rem padding-10px md:marginTop-5pct color-rgb(205,45,67) backgroundColor-hexfff"></span>
.className {
ref: marginTop-0.75rem padding-10px color-rgb(205,45,67) backgroundColor-hexfff;
screen-md: marginTop-5pct;
}
/* class structure: property (camelCase for prop name and prop value separated by - or dash) */
justifyContent-spaceBetween
/* class structure: unit size (pct is unit size in percent) */
width-100pct
height-250px
padding-1.75rem
/* class structure: screen, ss (extra small), sr (smaller), sm (small), md (medium), lg (large), lr (larger), ls (largest), wd (wide), wr (wider) */
ss:paddingLeft-3px
/* class structure: mode */
dark:backgroundColor-hex242424
light:backgroundColor-hexf2f2f2
/* (prefers-color-scheme: light) { [data-mode=dark] .backgroundColor-hex242424 {} } */
toDark:backgroundColor-hex242424
/* (prefers-color-scheme: dark) { [data-mode=light] .backgroundColor-hexf2f2f2 {} } */
toLight:backgroundColor-hexf2f2f2
mode:backgroundColor-hexfff /* for [data-mode=dark] .backgroundColor-hexfff {} */
/* class structure: state */
hover:backgroundColor-hex2f2f2f
facus:paddingLeft-3px
CSS Component
We provide alga format .alga
for creating CSS component.
@define refs {
name: navBar;
}
@define props {
size: 0.75rem;
}
@alga {refs.name} {
.{refs.name} {
ref: position-relative zIndex-3;
ref-paddingTop: {props.size};
ref-paddingBottom: {props.size};
}
}
@use navBar {
size: 20px;
}
Mixin and Composing CSS Component
to compose the CSS component.
@import 'navBar.alga'
@alga layout {
use: navBar;
}
@use layout;