What’s to Like About Codebase?
- Easy to start. Codebase can be dropped into your project as-is. No installation. No config file.
- Easy to learn. These docs will give you a good idea of what Codebase can do, and how easy it is to use. There are a lot of similarities between Bootstrap and Tailwind – so, if you are familiar with them, you’ll feel at home here.
<button class="btn btn-primary">A button</button>- Element grid. Classless HTML elements and utility classes are built on a “soft” 0.5rem element grid (8px default), for consistent positioning thoroughout.
- Responsive layouts. Codebase is loaded with flexbox and grid layout options, and utilities for responsive typography, making it look good and work well on everything from small phones to large screens.
Main content
Sidebar
<div class="grid-3-cols grid-gap">
<div class="col-1-thru-2">Main content</div>
<div>Sidebar</div>
</div>- Utility first. Components in Codebase are primarily, and sometimes totally, styled from compounds of utility classes (utility classes just do one thing well).
<div class="flex flex-column b-thin rounded bs-1">
<a href="">
<img src="" alt="">
</a>
<div class="flex-item-grow-1 p-2">
<h4 class="mb-2">Card Title</h4>
<p class="mb-2">
Explanation text...
</p>
<a href="" class="btn btn-primary">Button</a>
</div>
</div>- Works with AlpineJS. Codebase comes with its own JavaScript called Activator, for activating dropdowns, tabs, modals, etc. But if you want to develop more powerful components, you can swap out Activator for AlpineJS. These docs will show you how to set up several Codebase components using Alpine.
Dropdown content
<div x-data="{ open: false }" class="mb-3">
<button
class="btn btn-primary"
@click="open = !open"
:aria-expanded="open ? 'true' : 'false'"
>AlpineJS powered dropdown <!-- icon chevron down -->
</button>
<div
class="absolute bs b-thin rounded-sm p-block bg-color-background"
x-show="open"
@click.away="open = false"
>Dropdown content</div>
</div>- Highly customizable. The Codebase stylesheet has been built from a complex set of Sass (SCSS) files, preprocessed and minified. Sass users can override a huge number of default variables, or change them directly, to their own design requirements.
- Browser compatible. Codebase works on current and recent versions of all popular browsers and operating systems.
(Codebase is intended for modern browsers. It doesn’t officially support IE11 (2013) – but if you need to do that, see Codebase and Internet Explorer 11.)
-
Light and dark themes. The Codebase stylesheet
codebase.csshas only a light theme (default). Also included iscodebase-l-d.css, that has light and dark theme CSS classes baked in. These classes require a JavaScript theme switcher for toggling.theme-darkor.theme-lightin the<body>tag. - Great for downstream designers. Codebase is so small, there’s no need for “tree-shaking” to purge unused CSS. And, since the whole Codebase CSS remains present in the deployed stylesheet, later designers can use all the utilities in styling their content, even creating complex landing pages, etc. directly in a CMS editor.
| Name | CSS file size (minified) | JS file size (minified) |
|---|---|---|
| Codebase 4.0.11 | 38 KB 64 KB if you want your visitors able to choose between dark and light themes. |
3 KB (Codebase Activator script) Alternatively, use Alpine JS, (22 kb minified; 7 kb gzipped) |
| Bootstrap 5.0.0 beta 1 | 153 kb | 81 kb |
| Foundation for Sites 6.3.3 | 168 kb | 514 kb + 298 kb third party vendor requirements |
| Bulma 0.9.1 | 204 kb | None |
| UI Kit 3.6.13 | 271 kb | 134 kb |
| Materialize 1.0.0 | 142 kb | 181 kb |
| Tachyons 4.12.0 | 74 kb | None |
| Tailwind 2.x | Massive, but not intended for deployment in its entirety. (You use the parts you need, and purge the CSS that you didn’t use in your build process.) | None (AlpineJS is a popular pairing with Tailwind) |
Ready for the next big small thing?