Gaudiamus CSS got smarter

The idea of a framework builder might be exotic in the CSS world: usually we don't share SCSS functions & mixing like we do with code.

However, having a solid starting point to develop your custom CSS with seems logical. Frameworks like ornate make use of Gaudiamus' builder.

Utility class generator

Next to SCSS functions and mixing, almost all variables are exposed to the user to be changed & customized. This creates a setup that does not require anything else but a SASS compiler itself. This is an argument especially for those who suffered under the configuration of solutions like tailwind.

What's the learning curve?

Gaudiamus will give you a decent experience out-of-the-box. Starting with manipulating the variables will make every start easy:

npm i gaudiamus-css

// In your index.scss

// Start by changing variables
$primaryColor: #16ca24;

@import "../node_modules/gaudiamus-css/scss

// Now all default utilities using the primary color are updated.

p{
   @extend .text-primary
}

<p>hi</p>

Of course this is a rather primitive example, but changing the maps will soon reveal the customization power of the approach.

Standard utilities and grid

Even if you don't have the need to roll your own framework, you will likely find the Grid-System and included utilities a useful start to your design. I especially cherish that the responsive grid is true CSS-grid, not flexbox based. This cleans up my HTML and generates better overview.

Beyond

As of now, documentation centers around customization and composition. But dare to have a look at the mixins & functions within the package should you encounter you are comfortable with the system.