Variable
Default value
$primaryColor
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 )
Feel free to have a look at our quick start template: gaudiamus-starter or check out the Playground
1. The recommended way of using Gaudiamus is downloading it via the npm repository:
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;
}
The "quick & dirty" tryout is via CDN. However, you will want to get the node-package to get the full benefit out of Gaudiamus
See SINGLE-IMPORT for "Level 2" and ADVANCED for "Level 3".
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>
<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>
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>
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?
Variable
Default value
$primaryColor
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
$primaryColor
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>
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)} />
Gaudiamus comes with very minimal attention to typography. Include whatever fonts you like and set them up to your desire.
Variable
Default value
$primaryColor
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>
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
$primaryColor
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
$primaryColor
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 handles simple show/hide scenarios as well as basic flexbox behavior for edge-cases. The following variables are at your disposal:
Variable
Default value
$primaryColor
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}
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.
If you made it thus far, then customizing further or adding your own requirements might become of interest. Please visit Advanced for further customization.