Improvements since Codebase 4

Codebase has grown up a lot since 2020. So much has changed since version 4, that this has become a separate project. (Meanwhile Codebase 4 and Codebase 3 are still available as archives.)

Besides hundreds of tiny tweeks, there are several important things added and removed:

Additions and improvements

There have been hundreds of improvements since Codebase version 4. The following are the most important:

Dart Sass

The Sass preprocessor has been updated to Dart Sass, and the SCSS files have been refactored accordingly.

AlpineJS version 3

The Codebase AlpineJS components have been updated to Alpine 3.

Another media query widths tier

Another tier xs has been added to media query width controlled CSS classes, to enable greater design control for the wide range of phones and small tablets.

Utilities with media query variants

Several utility classes now have a large range media width variants, so that you can adjust them for different viewports (device sizes):

• Blocks – block and inline-block
• Max-width overrides
• Positions - relative, absolute, fixed, sticky, top, right, bottom and left
• Floats – right and left
• Spacing – margins and paddings
• Gap-* in flexbox and grid
• Borders

Real CSS grid system

The real CSS Grid grid system has been totally reinvented.

Aspect ratios

Aspect ratio wrapper utility classes have been added.

Size and media query abbreviations

Some of the size abbreviations (xs, sm, md, and lg) do a double duty, and this could cause confusion. But Codebase now separates these out as either prefixes or suffixes, the same way as is done in Tailwind:

• Colon separated prefix (xs:, sm:, md: lg:) – this means the CSS class takes effect at media query width. Block display (e.g. flexbox), widths, invisibility (hidden), positions, spacing (margins, paddings) and other elements all have media query width variants.
• Hyphen separated suffix (-xxs, -xs, -sm, -md, -lg, -xl, -xxl) – this means a size variation. Containers can have any of these pre-set widths. Buttons can be small, medium (default), or large. And so on.

Color system

Improvements to colors:

• Codebase’s UI colors for success, warning, danger, and info have been darkened so that they conform to the WCAG 2.1 Level AA accessibility guidelines for text: the UI colors now each have a color contrast ratio of at least 4.5:1. There are also defaults for primary, secondary, and tertiary accent colors. All of these can be overridden in the default variables file to make them as required in your design.
• For demonstration purposes, Codebase contains seven named colors that have been aliased and generated from the UI and accent colors: these are simply named green, amber, red, blue, purple, teal, and gray. These have been used for the utility classes for shades of each color -100 to -900 for background, border, and text – and for hover states of each.
• Color names and shades have been made easier to understand in Codebase, because “dark mode” is no longer built into Codebase. So, you will not here use Codebase 4’s contextual suffixes for the grayscale (“-background”, “-fineline”, “-text”, etc.). But you will use e.g. -gray-100 to -gray-900 plus -white and -black.
• Hover states of color utilities are also available, with the hover: prefix.
• Added semi-transparent glass layers for use e.g. on modal backdrops, and hero image overlays.

Accessibility

Codebase CSS has several improved accessibility features, such as focus :focus rings on buttons, and :focus-visible rings on links.

In addition, AlpineJS dropdown component examples have been refactored for accessibility, and they include ARIA labels, roles, and states.

For more information see Accessibility features in Codebase 5

Things that have been removed

There are several small things removed from Codebase CSS, that are not listed here. The following are the most important:

• “Dark mode” styling is not included in Codebase. (Dark mode may come back again as a side project in future.)
• The flexbox percentile “pseudo grid” system has been removed from Codebase. You can use the real CSS Grid grid system instead.
• Support for Internet Explorer 11 has been dropped.
• The Codebase 4 activator.js has been retired, and all CSS pertaining to it has been removed. (Use AlpineJS instead.)

Internet Explorer 11 is not supported

IE11 came out in 2013, and Microsoft stopped supporting IE11 in August 2021 as a standalone browser. Microsoft stopped supporting IE11 in May 2022.

Several things have been included in Codebase CSS that have no backward-compatibility to older browsers such as IE11:

• The real CSS Grid based grid system
• The gap CSS property for flexbox and grid
• Aspect-ratio wrappers
• Some styles have size constraints using clamp()

Note: also, Alpine 3 does not support Interet Explorer 11.

Gulp is no longer required

The Gulp taskrunner is no longer required.

• Since activator.js has been removed, Babel and Uglify are no longer required.
• Since support for IE11 has been dropped, Autoprefixer is no longer required for the CSS.
• Since only the minified codebase.css (and sourcemap) remain, there is no longer a need to provide a Zipped folder.
• So, only NPM modules for preprocessing codebase.css are required. Sass and Eleventy (for the docs) are run directly the script npm run dev (see package.json).