Introduction - Codebase

You can start working immediately with Codebase in a simple HTML setup.

The sourcemap is also available in the src/dist/ folder.

dist/
 ├─ codebase.css
 └─ codebase.css.map

Simple HTML setup

Download the CSS (alternatively, get the entire dist/) and place it in your project.
Create your first HTML page – e.g. copying the starter example below.
Link to codebase.css and alpine.js in the HTML <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Codebase</title>
    <link rel="stylesheet" href="/path/to/your/codebase.css">
    <script src="/path/to/your/alpine.js" defer></script>
  </head>
  <body>
    
    <h1>Hello world</h1>

  </body>
</html>

Make the paths to your codebase.css and alpine.js follow your project’s directory structure to link to your files.

The stylesheet

codebase.css is production-ready, meaning that you can just drop it into your project and use it as-is.

Basics

Codebase has a good base of styles even before you add CSS classes. Take a walk through the classless basics and you will see what I mean.

Utilities

Almost everything else is done in Codebase using utility classes. Utility classes do one thing well, such as control a background color or set a padding. You will find an extensive range of utilities for layout, decoration, and typography.

Components

All Codebase components have been designed and built using a “utility first” approach. This means that first, utility classes have been used to scaffold the component. For many components, nothing else is required.

There are two occasions when Codebase adds some bespoke component CSS classes:

Where it makes more sense to apply a CSS cascade that affects nested HTML elements.
For complex Codebase components that require some added features (e.g. for CSS transitions) for visualising their change of state.

Simple components

Here are some simple components that you can build using Codebase (I’m calling a component “simple” if it requires only CSS and no JavaScript for functionality):

Components using AlpineJS

Codebase pairs well with AlpineJS. The Codebase components examples in these doce have been re-factored to use Alpine v3.

The following are several examples of Codebase components that can be powered by Alpine:

Note: Codebase (and this documentation) does not include AlpineJS. You will need to source the latest version for yourself, or link to it from a CDN (e.g. JSDELIVR).

The SCSS library

Codebase is a highly versatile SCSS library, preprocessed and minified to CSS.

The SCSS library is clean, modern and minimalist, and highly versatile because of all the utility classes it contains. It can do most things that most people want, “out of the box”.

Available in the repository are all the Codebase SCSS files.

Notes:

Since v.5.2, Codebase has been refactored to use CSS variables, whereas these were all Sass variables previously. Also, all the !default flags have been removed from these variables, as they can now be overridden in the CSS without requiring Sass to do so.
Since v.5.2, the Sass preprocessor has been updated to Dart-Sass.
Since v.5.2, PostCSS and its associated dependencies have not been used in this project, as ithey are not needed for adding vendor prefixes (browsers older than ~2018, including Internet Explorer, aren’t supported). In the few places where vendor prefixes are still required (in the body tag, and in the glassmorphic overlays), I have added them manually. The main reason why PostCSS has been removed is because I didn’t want it converting the CSS variables static CSS (for old browser support). Also, with PostCSS removed, I can’t use cssnano (a dependency) for minification; therefore I am simply using --style compact on the Sass package.

You can incrementally add your web project’s distinctive design features after including Codebase in your HTML <head> (or including it whichever way you need to do it in your design platform). And you can customize Codebase itself.

Sass Maps in Codebase

For example, here is the Sass map of the nine shades that can be applied to one of the seven default theme colors in Codebase:

$shade: (
  "100": white 90%,
  "200": white 72%,
  "300": white 54%,
  "400": white 36%,
  "500": white 18%,
  "600": black 0%,
  "700": black 18%,
  "800": black 36%,
  "900": black 54%
);

The Codebase color utility class generator uses this Sass map. These shades are applied by a color-mix() function using the OKLAB color space (since Codebase v.5.3.0). See Color utilities.

System font stacks

Codebase contains three simple font-family system font stacks, plus a few more that are aliased from these three. These aliases can make Codebase SCSS adaptable to the needs of your project.

Codebase’s --font-base follows the popular trend for sans-serif in web design. It is applied to the HTML <body> tag by default.

User interface (UI) elements such as buttons and form inputs have the user interface --font-ui applied. This defaults to --font-base, so they look the same. But from this default setup you can diverge – you can have different font stacks for base and UI.

Then, the HTML <code> example tag and a couple of others have a monospace font stack, --font-mono. And there’s a default serif font stack --font-serif available, but no classless HTML elements have it applied (default). The serif font stank is there as a starter, for you to use if you want a serif alternative for long test articles, blog posts etc.

More information on Codebase font stacks, and how they are used, can be found at typographic utilities: font stacks.

Browser support

Codebase works on all the common modern web browsers such as Chrome, Safari, Edge, Firefox, Opera, and others.

Codebase is not compatible with older browsers such as Internet Explorer 11 and Opera Mini.

Note: also, Alpine v.3x does not support IE11.