Everything bootstrap?

After hundreds of hours of mentoring students from online academies to bootcamps, I cannot tell you how often students don't even know that there are other solutions. There is pure CSS and there is bootstrap? So something like tailwind or bulma is "a bootstrap"?
Eventually, people mature and learn about different design systems and CSS only frameworks. And more often then not, their journey into SASS or LESS starts with customizing the themes of these frameworks to their needs. Surely there isn't something like SASS programming, is there?

What is a CSS framework?

Let's first acknowledge that the term CSS framework is very misleading. Laravel, for example, is a PHP framework used to write applications. So is a CSS framework a tool to write CSS? Unfortunately not! While many solutions border such possibilities, the goal is mainly to customize existing behavior and maybe add to it. Don't get me wrong: if you look at how beautiful something like semantic UI is, it is absolutely okay to say "I'll just use what that team built". So what's with the lingo, then? Let's clarify:

CSS Framework

As stated above, this term is used to describe a collection of CSS, normally conceptualized as components that can visually be achieved by adhering to particular HTML semantics and classes. The issue with that is that often HTML structure must follow intended markup.

Design System

A design system goes a step further: usually based on a design guide, components are intended to be used when certain criteria are met (UI/UX). Not only are the components "static", design systems are also opinionated regarding frontend architecture in general. The most geeky example of course being primer, GitHub's very own.

CSS only Framework

Wait, what? You read that right! You might have never thought about it, but with materialize, bootstrap & co you always install JavaScript libraries. This created a problem in recent years with the advent of JS frontend frameworks, leading to issues like having competing adaptions for React alone ( e.g. react-strap or react-bootstrap). Both of these example's current releases are NOT based on the current version of bootstrap (at least at the time of writing this). Realizing that frontend-developers can be trusted with e.g writing JavaScript to display a modal - and with jQuery looking at its well deserved final years - CSS only frameworks (re-)became a thing.

Utility-first CSS Framework

By now I am just teasing you, am I? Not at all. This relatively modern approach has such an impact that big players like material design and bootstrap silently cuddle with it. The mother of this approach is surely Tailwind, but more and more of these solutions come up, as they solve a couple of very common problems with CSS. Sometimes markup like this

<div class="card is-primary is-inverted">
   <div class="card-header">
      <h3>Title</h3>
   </div>
</div>

simply isn't very intuitive if styles of .card-header are dependent on .card, but behave completely different when .is-inverted is applied to the parent. However, utilities make that clear and very short learning period:

<div class="border border-black rounded p-3">
   <div class="border-b">
      <h3 class="text-lg font-bold text-gray-900">Title</h3>
   </div>
</div>

Enter Gaudiamus

So if a CSS framework isn't really a framework, what could possibly be behind a project calling itself a CSS framework builder? Well, if certain terms are coined then we need to roll with them. While you can use Gaudiamus as a out-of-the-box utility CSS solution, it certainly isn't intended to be used that way.
It gives you full control not only of the behavior, but over most of its naming conventions. You want your primary-color to be called Khaleesi? Have at it, nerd:

$color-map: ("khaleesi":$primaryColor,"drogo":$accentColor);
@include "./gaudiamus-css/scss";

But let's get down to real business: Gaudiamus intends to make you a SCSS programmer rather than a consumer. In other words: Gaudiamus is an actual framework. Not only can you completely customize the look & feel of what you are developing, but finally have a toolset that is intended to write your very own bootstrap framework. Learning its mixins and function, a few lines like this:

$breakpoint-map:("sm":576px, "md":768px "lg":992px, "xl": 1200px);
$states: ("hover", "active", "disabled", "visited", "focus");
$border-styles:("dotted", "solid", "dashed");

@include ops.mapToClass("b", $border-styles,"border-style", $breakpoint-map, $states,true);

can spare you hundreds of lines of CSS and even SCSS.

Must be hard to learn

Well, I though so too. Gaudiamus' rather simple GitHub page speaks of "levels". And level 1 is easy to work with, requires not knowledge of compilers or bundlers and offers a "starter kit" that let's you explore the capabilities. Of course, faster than you'll know it, you will be writing code like this:

$references:("none", "half", "full", "zoom");

@function scaling($iterator, $name){
  $value: $iterator * .5;
  $reference: nth($references, $iterator+1);
  @if($name){
   @return (#{$name}-#{$reference}: $value);
  }
  @return (#{$reference}:$value);
}
@function zoomClasses($val, $key){
  @if(str-index($key,"y-") != null){
   @return scaleY($val);
  }
  @if(str-index($key,"x-") != null){
   @return scaleX($val);
  }
  @return scale($val);
}

@each $scaleType in (null, "y", "x"){
  $map: ops.generateMapLoop(3, get-function("scaling"), $scaleType);
  @include ops.mapToClassCallback("scale", $map, "transform", get-function("zoomClasses"));
}

Check it out @ Gaudiamus CSS