alga-css

Alga CSS

Alga CSS is a scope-first CSS toolkit for quickly compose or share any design between components

What I mean by scope-first is, this Alga CSS is specially made for frameworks or libraries that support scoped-css like Vue or (Svelte or Astro coming soon). Also, my goal in building this is to support all the UI libraries that I have now like vidie or (sastra still in progress)

All the main features:

1. Created for scoped CSS
2. As a PostCSS plugin
3. Composing or mixing CSS components
4. Provide/inject a large CSS component
5. Custom CSS utility/helper (preset, define, color, screen, etc.)
6. Extract classes from HTML (Petite-Vue, Alpine.js) and Vue or (in the future will support Svelte, Astro, and JSX as well)

Class Name Structure

Alga CSS allow you to use whatever special character you wish (use either -, ., : or _) as divider or separator of class names or references.

/* highly recommended */
<span class="md.mgTop-5 bgPrimary-725 txtColor-hex(333)"></span>

.className {
  ref: md.mgTop-5;
  ref: txtColor.rgb(205,45,67);
}


/* alternative */
md.pdTop.2

md-pdBottom-4

md:pdLeft:3

md_pdRight_7

Mixin and Composing CSS Component

For composing CSS utility, we provide a custom property which is ref.

.className {
  ref: flex justifyCenter flex-20 bgPrimary-3;
}

.otherClassName {
  ref: flex;
  ref: justifyCenter;
  ref: flex-20;
  ref: bgPrimary-3;
}

For mixing CSS properties, we provide props custom property.

@set className {
  ref: flex justifyCenter flex-20 bgPrimary-3;
}

.otherClassName {
  props: className;
}

For getting CSS custom class, you can use @get custom rule and emit custom property if you want to inject CSS utility to it.

@get className;

/* or */

@get className {
  emit: txtBold-5 bdSolid-5;
}

/* or */

@get className {
  emit: txtBold-5;
  emit: bdSolid-5;
}

Fragmenting CSS Component