bedrockcss

Foundational framework for everything frontend at taenzer digital.

The Base Unit

The spacing system is based on the $unit value. Its length is half of the line height (or the text line height is defined as two units).

Vertical distances are a multiple of the unit value.

Horizontal distances are less rigid since variable display sizes require more flexibility and they have a lesser influence on the perception of rythm. But where applicable, they are also a multiple of the unit value.

This value is dependent on the screen size and the variables $text-size-lower-bound-px, $text-size-upper-bound-px, $rem-grow-start-px and $rem-grow-end-px. Note: These values are in css px, but have to be stated unitless for technical reasons.

Fonts

Fonts can be set with the $text-font and the $head-font variables. Per default, both are set to the system font. If you only set $text-font, $head-font is set to the same value.

The leading of the text can be set with the $text-leading variable (1.5 default). It determinates the ratio of font size and line height. The same can be done for the headline font with $head-leading if the two different fonts needs optical finetuning. Its recommended to stay near the default.

Font Sizes

Font sizes are driven by the modular scale. The scale can be customized by setting the variables $type-ratio and $type-base (without unit). Furthermore there is $cascade-limit (default 12) to set the limit of the cascade. The variable $head-nodes is a list defining the sizes of the default headlines in the modular scale beginning with h1.

The headline utility classes are head- following the position in the cascade.

There are two text sizes that can be selected with the utility classes .text and text-s. These classes set the size and the font itself. Since .text is the default for nearly all elements and footnote sized text is not meant to be used often, these classes should not come that much.

Further examples:

.text-s
Lorum Ipsum
.text
Lorum Ipsum
.head-1
Lorum Ipsum
.head-2
Lorum Ipsum
.head-3
Lorum Ipsum
.head-4
Lorum Ipsum
.head-5
Lorum Ipsum
.head-6
Lorum Ipsum
.head-7
Lorum Ipsum
.head-8
Lorum Ipsum
.head-9
Lorum Ipsum
.head-10
Lorum Ipsum
.head-11
Lorum Ipsum
.head-12
Lorum Ipsum

Margins and Paddings

Margins and and paddings are set with the utility class

.[m/p][side]=size.

For example, to set the right padding to 3 units, we use the class pr=3 and to set the bottom margin to -1 unit, mb=-1.

Side can be left out completly to set all sides at once or it can be set to x or y to set the left and right side or the top and bottom sides respectively to the same value.

Further examples:

<‍div class='mt=1'>... margin top is set to 1 unit
<‍div class='px=2'>... left and right padding is set to 2 units
<‍div class='m=5'>... all margins are 5 units
<‍div class='py=3'>... bottom and top padding is set to 3 units

Try it out yourself:

Layout and flex utilities

CSS flexbox is more or less exposed as is. In combination with a few other utilities classes these are strong bulding blocks for layouting. Here is a list with all the utilites with the associated css rules.

Further examples:

.fixed position: fixed;
.sticky position: sticky;
.block position: block;
.inline-block position: inline-block;
.inline position: inline;
.flex position: flex;
.inline-flex position: inline-flex;
.row position: row;
.row-reverse position: row-reverse;
.column-reverse position: column-reverse;
.wrap position: wrap;
.no-wrap position: no-wrap;
.wrap-reverse position: wrap-reverse;
.justify-start position: justify-start;
.align-start position: align-start;
.justify-end position: justify-end;
.align-end position: align-end;
.justify-center position: justify-center;
.align-center position: align-center;
.space-between position: space-between;
.space-around position: space-around;
.space-evenly position: space-evenly;
.align-baseline position: align-baseline;
.justify-stretch position: justify-center;
.align-stretch position: align-center;
.grow=1 flex-grow: 1;
.grow=2 flex-grow: 2;
.grow=3 flex-grow: 3;
.shrink=1 flex-shrink: 1;
.shrink=2 flex-shrink: 2;
.shrink=3 flex-shrink: 3;
.ordir=1 order: 1;
.ordir=2 order: 2;
.ordir=3 order: 3;
.ordir=4 order: 4;
.ordir=5 order: 5;
.ordir=6 order: 6;
.ordir=7 order: 7;
.ordir=8 order: 8;

Flex grid

For multi column grid layouts, wrapp the columns in an element with the flex-grid class. This takes care of gutter widths, breaks and such. The gutter width is set to one unit, but can be overriden with the $grid-gap variable.

Offsets are available with the left and right modifier and for all the widths fractions.

All these classes are prefixed for the different size classes, see responsive design.

Further examples:

.w=site max-width: 37.5rem;
margin-left: auto;
margin-right: auto;
.w=viewport width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
.w=full width: 100%;
.h=full min-height: 100%;
.h=viewport min-height: 100vh;
.w=1/2 width: 50%;
.w=1/3 width: 33.33333%;
.w=1/4 width: 25%;
.w=1/6 width: 16.66667%;
.w=1/8 width: 12.5%;
.w=1/12 width: 8.33333%;
.w=2/3 width: 66.66667%;
.w=3/4 width: 75%;
.w=5/6 width: 83.33333%;
.w=11/12 width: 91.66667%;

Try it out yourself:

Borders

The style of the border can be controlled with the $border-radius and $border-width variables.

Further examples:

<div class='b'>... borders on all sides
<div class='bx'>... left and right borders
<div class='by'>... top and bottom borders
<div class='bt'>... top border
<div class='bb'>... bottom border
<div class='bl'>... left border
<div class='br'>... right border

Radius

Big radii to create circles or pill like shapes can be created with `r-circle`. Of course, die modified classes `rl-circle`, `rr-circle`, `rt-circle` and `rb-circle` to restrict the radius to the left, right, top or bottom are also avaiable.

Corners can be rounded with the following classes

Further examples:

<div class='r'>... rounded on all sides
<div class='rl'>... rounded on the left side
<div class='rr'>... rounded on the right side
<div class='rt'>... rounded on the top side
<div class='rb'>... rounded on the bottom side

Try it out yourself:

Arrows

Elements can be decorated with arrows on the right side like so:

Try it out yourself:

Tables

To apply the bedrock table styling, just wrap the table in a figure with the class table.

Try it out yourself:

Advanced

If the display is to small for the table, it's set to scroll. tds with numeric data (and the th of the column) should get the class numeric. This enables tabular numbers and appropriate alignment.

Its consired good style to align numbers on the decimal point. Since there is no build in solution for that in the css spec, bedrock provides a few helper classes. To use them, the positions after the dot have be wrapped in a span with the class dec-pos-align or dec-pos-align-wide.

Try it out yourself:

Placeholder

This is just a small utility that fills up html elements with word-like shapes. This enables quick tests how different content flows. Also, it is more distinct from actual content than the typical lorum ipsum placeholders and less likely to be overlooked in the final product.

Further examples:

<span class='head-l placeholder' wordcount='5'></span>
<span class='placeholder' wordcount='20'></span>

Interactive Elements

Accordion

The Accordion element is based on the html details element. Multiple details must be wrapped in a container with class accordion.

Further examples:

Click here b

Responsive Design

Bedrocks tools for responsive design are build upon the mobile first principle. Per default, there are four device classes, sm(phones), md(tablets, phones in landscape), lg(laptop, small desktops), xl(normal desktop, external screens).

Mobile first means that we start with the mobile styling and add more rules as the screen size grows. To do that there are modified versions of a lot of utility classes (mostly everything that has to do with layout and size).


For example, a element with the classes mt=1 lg:mt=2 xl:mt=3 has one unit margin on all phones and tablets, margin two on screens classed as lg and margin three on screens classed xl.

In general, everything that has to do with layout and spacing is prefixed.

Forms

Try it out yourself:

Select

One important note for selects: The class arrow-down has to be set explictly. In return, this decorator class can be used everywhere (for example in drop down buttons) and is compatible with all colors schemes, contextual variations and animations.

Try it out yourself:

Check- and Radiobuttons

Checkboxes and radiobuttons must be wrapped in a label and must contain an empty sibling element for technical reasons.

Its important to not use a radio input with the toggle styling, since the behaviour would be surprising for the user.

Addional styling can be added to the embedded span

Try it out yourself:

Contextual variations

To create contextual variations, the color utility classes and the elevated class can be prefixed with hover: or focus:

Try it out yourself:

Aspect Ratio

To apply aspect ratio to an element. The element must be wrapped in a container with the class ar=1/1 ar=16/9 ar=4/3

Also a mixin called ar($width, $height) is available to create custom ratios.

Try it out yourself:

Visibility

To hide or show an element, the visibility utility classes visible and hidden can be used. They can also be prefixed with the responsive prefixes

Try it out yourself:

Icons

We make use of inline SVGs for icons. Every SVG iconset can be integrated.

Icon Sizes

We defined Utility Classes for icon sizes analog to the headline sizes. .icon, .icon-l, .icon-xl, .icon-2xl, .icon-3xl, .icon-4xl. Those classes can be prefixed with our responsive prefixes

Background images

If you want to use a big background image, for example for a hero banner, you can use the bg-img class. You can set the image url with the data-url attribute.

The image is loaded after the page itself and will ease in. The idea is that non functional parts of the - site like a hero image - shouldn't impact the inital page load. So make sure that the background color of that element is set so that the page looks good even if the image never loads, which might happen to users on very bad connections.

Try it out yourself:

Focal Point

Per default, the image is centered. If there is a focal point in the image that is not the center, it can be specified with the data-focal attribute like so:

Try it out yourself:

Tabs

Try it out yourself:

print.css

When you put in your html header, you get a print friendly restyling. Headers and footers are automaticly hidden, the page width class is a full site and all colors are set to black and white (can be modifed with the $print-color variable). The page margins are set with the $print-margin variable.

All layout and aspect ratio classes get an addional prefix print: to add print specific styling and you can hide and show elements with the print-only and screen-only utility classes.

Also, external links will show their target in parenthesis after the link text.