Simple Components in Codebase

Codebase has several simple component examples, that are mostly assembled from utility classes.

(I’m calling a Codebase component “simple” if it doesn’t require JavaScript for functionality.)

All Codebase components have been designed and built using a “utility first” approach. This means that first, utility classes (and sometimes, flex layout classes) have been used to scaffold the component. For many components, nothing else is required. Only when a little more is required does Codebase add in some bespoke component CSS.

There are two occasions when Codebase uses bespoke component CSS classes:

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

Simple Codebase components:

• Menus
• Heros
• Tables
• Buttons
• Badges
• Labels
• Media objects
• Cards