Utilities

For consistency throughout Codebase, several decoration variables have been defined. These variables have also been incorporated into a set of simple utility classes that can be used to directly add consistent styling to your HTML. You can modify these variables and classes and/or add to them in accordance with the style guide or visual identity of your project.

Hat tip: The idea for Codebase decoration utilities was inspired by BASCSS, Tachyons and Bootstrap 4’s utilities.

Notes:

1. If you know you will never use the decoration utility classes, then you can override the $include-css-decoration-utilities to false (see codebase/scss/00_default-variables/_default-variables.scss).

2. Codebase decoration utility classes are not responsive to viewport sizes.

3. CSS nesting can cause other styling (from Codebase or your own CSS) to override decoration utility classes.

   Example – this CSS rule will be overridden by the utility class on the <h4>:

    <style>
    h4 {
      border: 0;
    }
    </style>
    <h4 class="b-thick">Example: this h4 has a thick border</h4>

   Example: this h4 has a thick border

   But this CSS rule will override the utility class on the <h4>:

    <style>
    .infobox h4 {
      border: 0;
    }
    </style>
    <div class="infobox">
      <h4 class="b-thick">Gotcha: this h4 has no border. Why?</h4>
    </div>

   Gotcha: this h4 has no border. Why?

Layout Utilities

Blocks

.block – makes any element behave as a block element.

This is a span element (normally an inline element).

.inline-block – makes any element behave as an inline-block element. This is a div element (normally a block element).

Floats

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. Nullam ridens deterruisset an duo. Cum harum insolens ei, cum probo placerat praesent et.

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. Nullam ridens deterruisset an duo. Cum harum insolens ei, cum probo placerat praesent et.

Note: These outer blocks above have .clearfix.

Spacing Utilities

Codebase decoration utilities for margins and paddings have been set using a $spacing SCSS map, with values as follows:

Margins and paddings utility class prefixes:

Horizontal Centering

.mx-auto

This class applies margin-right: auto, margin-left: auto to push an item into the center. This class also sets the element to display:block !important – so, you can use it to make inline elements behave as block elements.

Block Padding

Table cells (th and td), menu-item hyperlinks (.menu-item a{}) and megamenu parent hyperlinks already have built into them the same “block padding” – padding: 0.5rem 1rem;.

This same block padding is available as the utility class .p-block:

(Buttons also appear to have this same block padding but they do not. The height of the default button comes entirely from its line-height.)

Extra Line Spacing

You may sometimes need to add extra spacing above or below an element equivalent to the spacing between paragraphs (i.e. one line height, or 1.5rem).

This can be done by top or bottoms margin or padding, using the element grid suffix -3e:

As margins:

As paddings:

Border Utilities

A few simple border styles.

• borders all b-*
• border-top bt-*
• border-right br-*
• border-bottom bb-*
• border-left bl-*

Examples:

By default, borders are light gray. Borders can be assigned other colors in the Codebase swatch using b-{color} classes. See color utilities.

Border Enhancements

For these it has been decided to drop the .b- prefix in order to avoid confuson when applied to borderless elements, buttons and form elements.

Color Utilities

UI Colors

Codebase’s default variable file contains five color swatches are that are used for the Codebase UI colors (i.e. primary, secondary, success, warning, and danger.

Codebase UI colors can be deployed by CSS classes of the same name: .primary, .secondary, .success, .warning and .danger. See default colors.

These UI colours can be used for buttons, badges and labels – or anything else that you need to give UI colors to.

Example using buttons:

<button class="btn primary">Primary</button>
<button class="btn secondary">Secondary</button>
<button class="btn success">Success</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>

UI and Theme Color Utilities

These five UI color swatches plus the theme colors (a grayscale) have also been used for the Codebase decoration utility classes:

The default ui colors are slightly lighter for dark mode.

The primary color is also used for the default hyperlink color.

Applying Color Utility Classes to Elements

Codebase also has utility classes for background, border and text color.

Backgrounds: .bg-{colorname}:

.bg-primary

Borders: .b-{colorname} (will only do someting if your element has a border):

.b-danger (and here the border has also been thickened using .b-thick)

Text .t-{colorname}:

.t-success Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

Advanced (SCSS) Users

All Codebase color utilities are here simply to get you started. You can override and improve them in your own website design as you make progress.

You need to copy (a.) the whole set of color variables and (b.) the SCSS map into your styles. Then during pre-processing, the class-builders in codebase/scss/04_decoration/_colors.scss will generate all the decoration utility classes for colored backgrounds, borders and text.

By overriding the color variables and the SCSS map in this way, you have complete freedom to:

• Add more color classes
• Remove classes for colors that you never use
• Change color class names
• Change color values

See The Codebase SCSS Library.

Text Utilities

Codebase has several simple text utility classes.

Inline Text Utility Classes

.bolder Bolder text (default 900)

.bold Bold text (default 700) (same as <b> and <strong>)

.normal Returns text to normal weight (default 400) and removes italicization. Perhaps you may find this useful in some circumstances.

.thin Thin text (default 200)

.italics Italics text (same as <i> and <em>)

Bolder • Italics
Bold • Italics
Normal • Italics
Thin • Italics

.uppercase Text in uppercase (all capitals)

.big Big text for making something stand out. (This class works for both inline and block elements – see Utilities for Big Text.)

.small Small text for small print.

Block Text Utility Classes

.left

Lorem ipsum dolor sit amet...

.center

Lorem ipsum dolor sit amet...

.right

Lorem ipsum dolor sit amet...

Utilities for Big Text

Codebase big typography has been developed for long-read articles.

There are two ways to deploy big typography in Codebase:

(1.) The .big Inline Element Class

If you want to emphasize some inline text by increasing the font size, Codebase can do this by applying .big to an inline tag (e.g. <span class="big">).

When used inline, the .big class increases its inherited font size by 125%.

(2.) The .big Container Element Class

Codebase can render big typography simply by wrapping any HTML within a block element (e.g. <div>) that has class .big. Everything within the wrapper will have big typography applied.

When used on a wrapper, the .big class increases its inheritable font size by 125% (good for paragraphs, list items, table cells etc.) and it increases heading sizes as exemplified below.

Therefore, as the default font size (1rem) in Codebase is 16px, this makes the .big default font size to be 20px. (You can change either of these in codebase/scss/01_basics/__default-variables.scss.)

You can also increase the font size of smaller elements .h1 to .h6 block text utility classes.

Form Utilities

Form Elements as Full-Width Blocks

Block width form element using the .block utility. See Layout Utilities.

Text:

Textarea:

Form Element Sizing

Sizing using the .small and .big text utility classes. See Text Utilities.

.small

(Default)

.big

Form Element Border Modifications

Border modifications using border utilities.

.b-thick

.pill

Invisibility Utilities

A range of invisibility mixins and classes have been built based on the Codebase media query breakpoint variables.

= invisible (hidden)   = visible

Notes:

1. There are no Codebase .show- classes. Therefore, if you need something to be visible only at some viewport widths and not others, then what you need to do is use the appropriate .hide-* class so that it will not be visible at viewport widths where you don’t want it to be.

2. If you need something to be visible only at a mid-range viewport width, then use two .hide-* classes: one to hide the thing at lower viewport widths and one to hide it at higher viewport widths.

E.g.:

// A div that is ONLY visible at medium viewport widths:

<div class="hide-md-down hide-lg-up"> ... </div>

For an example of where this has been done, see the viewport width indicator (fixed to the bottom-right corner) in these docs.