Gaudiamus

Yet another CSS-framework?
Not really: Gaudiamus is a framework builder.
Highly inspired by the utility-approach trend, we 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 )

Gaudiamus does not require a bundler. The idea is to expose all relevant variables to the user without the necessity to fight with webpack, babel postCSS and config files.

➩ Installation

Quick start

Feel free to have a look at our quick start template: gaudiamus-starter or check out the Playground

The power of SASS

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

npm install gaudiamus-css

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

Above & Beyond

See SINGLE-IMPORT for "Level 2" and ADVANCED for "Level 3".

➩ 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>

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>

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 to be escaped.

Example dashed-utility:

raise-1-black-50 (creates dark transparent drop shadow (level 1))

Example colon-utility:

hover:raise-1-white-50 (creates dark transparent drop shadow on hover (level 1))

Variable

Default value

These settings define how positioning, spacing & shading utility classes are constructed. The patterns are
spacing:
[{breakpoint}:]{property-map-key}[-{shorthand-map-key}]-{number}
height & width:
[{breakpoint}:]w-{height-width-value-key}{height-width-unit-map-key}
[{breakpoint}:]h-{height-width-value-key}{height-width-unit-map-key}
position:
[{breakpoint}:]{position-key}-{position-map-key}
[{breakpoint}:]{position-key}-{shorthand-map-key (simple values)}-{number}
cursor:
{cursor-key}-{cursor-map-key}
border:
[{state | breakpoint}:]{border-key}[-{shorthand-map-key}][-number|[{rounded-key}[-depthUnit]]|[-{color-map-key}]]
elevation:
[{state | breakpoint}:]{raise-key}-{number}


            // example assuming default values: 

            <p class="m-t-5 p-4 w-100p position-relative b-x-2 b-rounded b-primary"> 

              Margin top 1.25rem (5 * .25), padding 1rem (4 * .25), 

              100% width, positioned relative 

              with a primary colored border left & right with default border-radius. 


            </p>

➩ 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

These settings define how typographic utility classes are constructed. The patterns are
decoration:
text-decoration-{decoration-map-key}
size & weight:
font-{fontSize-map-key|weight-map-key}


            // example assuming default values: 

            <p class="font-strong font-md text-decoration-underline"> 

              Font weight of 700, 1.25 rem in size (5 * .25rem)

              underlined text 

            </p>

➩ 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 the following SASS-maps to achieve that:

Variable

Default value

These settings define how color utility classes are constructed. The pattern is
[{state}:]{color-class-map-key}-{color-map-key}[-{lighten/darken-map-key}][-{opacity-map-key}]


            // example assuming default values: 

            <p class="bg-primary-light-50 hover:bg-primary"> 

              Background will be a 25% lighter version of color primary with an alpha (opacity) value of .5.
            

              When hovered, the background changes to the pure primary color.
            

            </p>

➩ Display

Display handles simple show/hide scenarios as well as basic flexbox behavior for edge-cases. The following variables are at your disposal:

Variable

Default value

These settings define how utility classes for display are constructed. The pattern is
[{state | breakpoint}:]{$display-key}-{$display-map-key}
[{state | breakpoint}:]{$flex-key}-{$flex-map-key}

➩ Single import

Level 2 would be including gaudiamus files directly depending on your needs. In that case, used variables have to be defined before importing the file!
This requires an understanding of what variables are used where & when. Feel free to explore the following files or use this project's README as a variable guide.

scss/components/colors.scss
scss/components/display.scss
scss/components/grid.scss
scss/components/operations.scss (see "Level3")
scss/components/shading.scss
scss/components/spacing.scss
scss/components/typography.scss

If you made it thus far, then customizing further or adding your own requirements might become of interest. Please visit Advanced for further customization.

spacer

Fork me on GitHub