Basics

Codebase has a basic styling for various elements, applied to HTML tags directly (without CSS classes). Since v3.0 Codebase is built upon its own set of light-weight modern base styles. It no longer requires Normalize.

Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Same as for paragraphs, headings have zero top margin while the bottom margin of headings is set as equal to one line-height of the default text (paragraph) size, i.e. 1.5rem.

Headings h1 to h5 are enlarged (and their line heights adjusted) for wider viewports at and above their alt breakpoint, which is set by the variable $break-headers-alt.

Headings are set to font-weight: normal by default, so that you can use bold on particular words for emphasis.

All these same styles are also available as .h1 to .h6 block text utility classes.

Paragraphs

A simple paragraph:

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.

As with headings, paragraphs have zero top margin, but they have a bottom margin equal to the line height of the default (paragraph) text size – thereby leaving an “empty line” gap between paragraphs.

Simple Text Elements

Preformatted text

/* <pre><code> */
10 print "Hello world";
20 goto 10;
Run

Lists

Horizontal Rules

The horizontal rule tag is simply styled with a thin top border, so that it looks the same as border utilities and .table borders.

Blockquotes

In Codebase, blockquotes receive some padding right and left, to give the effect of indentation. This side padding is set based upon the viewport width (i.e. in vw), so that it is narrower on smaller viewports.

Otherwise, blockquotes have the same as paragraph styling.

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.

Tables

This is what a basic (classless) table looks like using Codebase:

No styling is applied to the table tag, except for bottom margin below the entire table (same as for paragraphs and headings). So, there is probably nothing that will interfere with other frameworks or plugins if you use them.

For more functionality and styling, see the Codebase table component.

Form Elements

Input Fields

In Codebase, form elements and buttons are all, by default, inline elements.

Text:

Email:

Tel:

Search:

Number:

Date:

Month:

Password:

Textareas

Textarea:

Selects

Single select: First option Second option Third option

Multi-select: First option Second option Third option

Radio Boxes and Checkboxes

Images and Other Embedded Media

Images

In Codebase, images are block-level elements with max-width: 100% so that large images are "responsive", shrinking to fit within containers (or viewports) narrower than the actual image width.

An image with a <figcaption>, all enclosed in <figure>:

Audio and Video

Audio controls:

Video controls:

Iframes

Iframes have their border reset to zero. No height or width is specified – that’s up to you to set for yourself according to your needs: