Skip to main content

Getting Started with Codebase 6

Introduction

In 28 KB (minified), the Codebase 6 stylesheet gives you all this and more:

  • A modern CSS reset
  • Minimalist styled classless typography and form elements
  • Reliable accessibility features for assistive technology users
  • A lightweight system of utility classes for controlling dimensions, positioning, spacing, borders, text, and images
  • @media query responsive layout utilities using CSS grid and flexbox
  • Responsive typography and spacing using clamp() ramps
  • A compact color lightness system based on oklch() for text, borders, and backgrounds
  • Theming control using CSS variables

Modern CSS technologies

Codebase supports only up-to-date, Baseline widely available (since 2023) in Safari, Firefox, Chrome, Chromium, Edge, etc. web browsers. Such as:

Codebase’s design philosophy

The design philosophy behind the Codebase CSS project is as follows:

  • Aim at being a good place to start for a web design project.
  • Do most things most people want out of the box.
  • With Codebase 6 being so small, there’s less you need to overwrite in order to style it your own way (and most things in Codebase can be restyled by CSS variables). There’s no need for a purge process to remove a heavy payload of unused styles.
  • No CSS preprocessing.

Built using PostCSS

Codebase is built using PostCSS and some plugins:

  • postcss-import — so that Codebase could be built from separate CSS files
  • cssnano — to remove comments and minify the output codebase-6.min.css

Note: neither postcss-preset-env nor autoprefixer have been used in Codebase. Preprocessors such as Sass, Less, Stylus etc. are not required.

A modern CSS reset

The Codebase reset is a combination of Josh W Comeau’s custom CSS reset, Andy Bell’s (more) modern CSS reset”, and Vale (Declan Chidlow)’s Opinionated CSS Reset.

From that basis, Codebase then takes care of the basics by setting some minimalist, easy-to-read typography, and styles for buttons and forms.

Codebase’s built-in accessibility features

Codebase has two “must have” accessibility features built-in.

(1.) Focus states

Codebase uses the browser’s built-in focus ring styles, slightly improved by a thickening the ring and moving it out a little to improve legibility of link text. In most modern browsers the focus ring is clearly visible in a range of contexts, and in both light and dark themes. However, some accessability rings are nearly invisible over a dark bakground; therefore a white drop-shadow has been added. Ans a z-index raise has been added to prevent the focus ring tucking under a neighbouring item, e.g. in input/button groups.

See also colors and accessibility.

Examples:

Example e-newsletter subscribe

Keyboard-tab through these links and buttons to see the focus rings:

Link

Link

Link

Link

(2.) The visually-hidden (screen-reader only) class

The visually-hidden (alias sr-only class can be used to provide additional content for screen-readers, for improved accessibility. For example, it is best practice to have “skip link” above the top navigation bar on your website, but have it (visually) hidden for ably sighted users.

<a href="#main-content"
  tabindex="1"
  class="block p-2 visually-hidden"
>
  Skip to page content
</a>

<!-- Logo and site navigation menu here -->

<div id="main-content">
  ...
</div>

Docs