logo

Gaudiamus

Yet another CSS-framework?
Not really: Gaudiamus is a framework builder.
Highly inspired by tailwind css, I wanted something non-invasive, light and foremost: based on CSS GRID rather than flexbox.
Why?
Because declaring responsive grid-behavior can finally happen where you intuitively want it: at the container level.

The result is straight forward and easy to learn. Especially if you understand the advantage of utility-based classes.
As such, Gaudiamus has no design or layout: it's a "build-your-own" solution.
( so here you have my retro implementation )

➩ Installation

Quick start

Feel free to have a look at our quick start template: gaudiamus-starter

The power of SASS

1. The recommended way of using Gaudiamus is downloading it via the npm repository:

npm install gaudiamus-css
or
yarn add gaudiamus-css

2. Next, include "gaudiamus-css/scss" into your own .sass or .scss file

/* style.scss */

// Every section of this page will introduce the corresponding variables.
// here, we introduce setting the primary color

$primaryColor: #c211e8;

// import gaudiamus after overwriting variables:

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

// and your compositions after importing gaudiamus:

.button{
  @extend b-rounded, b-1, b-accent, text-black, bg-accent, text-decoration-none, font-strong, place-x-stretch, p-1, m-1;
}

via CDN

The "quick & dirty" tryout is via CDN. However, you will want to get the node-package to get the full benefit out of Gaudiamus

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gaudiamus-css@1.1.0/css/gaudiamus.min.css">

➩ The grid system

Power to the parent

The true power of gaudiamus is the grid-system. Instead of having to define behavior on the level of the children, it allows easier control of behavior, layout and design.
By default, we use the common 12-grid, so three equal columns would be written like this:

<div class="grid-4-4-4">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>
one two three

Any combination is possible:

<div class="grid-7-5">
  <div>
    <div class="grid-6-6">
      <div>one-1</div>
      <div>one-2</div>
    </div>
  </div>
  <div>two</div>
</div>
one-1
one-2
two

Placement

You can place elements on the x and y-axis of the grid-area with ease:

<div class="grid-3-3-3-3">
  <span class="place-x-center">1</span>
  <span class="place-x-end">2</span>
  <span class="place-y-start">3</span>
  <span class="place-y-stretch">4</span>
</div>
1
2
3
4

Responsiveness

What about breakpoints? We use a markup similar to tailwind css to tackle this. However, now the grid really starts to make the difference. finally you will have an overview of your breakpoints. Start with mobile and go up:
(here is makes sense to play around with your window-size if you can)

<div class="grid-12 md:grid-6-6 lg:grid-3-3-3-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
1
2
3
4

A full row on mobile, 2 columns for medium sized screens and 4 columns for the desktop: easy and logical, isn't it?

Variables: grid

Variable

Default value

➩ Utilities

Gaudiamus works utility based. This approach is very declarative and you can intuitively read it once certain rules are understood.
For example, knowing that "m-" stands for margin and "-t" stands for "top", the class "m-t-2" can be read as "margin-top-2" (2 being the multiplier of the base-unit which defaults to .25rem but can be set to whatever you want.)

One can easily guess what ".m-b-4" stands for: margin-bottom: 1 rem

Due to the nature of CSS, all dashed-utilities can be used to directly compose (see compositions), while colon-utilities need their own rules.

Example dashed-utility: raise-1-white (creates a white drop shadow (level 1))

Example colon-utility: hover:raise-1-white (creates a white drop shadow (level 1) when element is hovered)

Many utility classes can be named via variables. For a list of default classes, see classes.

Variable

Default value

➩ Compositions

Writing utility based can become quite verbose. While it does make sense to use them while developing your designs, repetitive classes can then be avoided by fixating them into compositions:

/* composition.scss */

h1 { @extend .font-xxl, .text-primary }

.card {
  @extend .b-primary, .b-rounded, .raise-1-accent, .p-2, .m-t-3, .m-b-3;
}

/* some.html */

<h1>Headline</h1>
<section class="card">
  My content
</section>

You can even create your own classless system with that approach, which comes in very useful when using one of the popular JS frameworks using custom components:

/* composition.scss */

my-input {
  @extend .bg-transparent, .p-l-2, .p-r-2, .m-1, .text-gray, .raise-1-gray, .b-rounded;
}

my-input:focus {
  @extend .raise-1-accent;
}

/* Some.jsx */

<my-input onChange={ev => setInput(ev.target.value)} />

➩ Typography

Gaudiamus comes with very minimal attention to typography. Include whatever fonts you like and set them up to your desire.

Variables: typography

Variable

Default value

$fontSize-map

("sm":3, "md":5, "lg":7, "xl":9, "xxl":12)

For all available font & text-utilities see classes.

➩ Colors

Setting up colors is likely one of the first customizations you are going to fiddle around with. Setting up your theme starts with editing the values and/or names of colors:

Variable

Default value

Next, let's decide what utility classes to generate and how to name them. We use three SASS-maps to achieve that:

$color-class-map:("bg":"background-color","transparent":transparent);

$color-map:("primary":$primaryColor)

$state-map:("hover")

The above example would generate utility-classes of the following pattern:
[color-class-map-key]-[color-map-key]{ [color-class-map-value]: [color-map-value] }
for each registered state (pseudo-class):
e.g. [color-class-map-key]-[color-map-key]:[state-map-value]{...}

// resulting css
.bg-primary{ background-color: #258cc7};
.bg-transparent{ background-color: transparent};
.hover\:bg-transparent:hover{ background-color: transparent};
.hover\:bg-primary:hover{ background-color: #258cc7};

// in html:
<p class="bg-primary hover:bg-transparent">hide background on hover</p>

Needless to say, the default maps do a little more than that. Here are the defaults:

Variable

Default value

$color-class-map

("bg":"background-color","text":"color","b":"border-color")

$color-map

( "primary":$primaryColor, "accent":$accentColor, "success":$successColor, "warning":$warningColor, "transparent":transparent, "gray": $gray, "white": $white, "black": $black )

$state-map

("focus","hover","active")

spacer