A lightweight, modular, CSS-only design framework.
boba was born out of frustration with other CSS design frameworks.
- Lightweight at just ~10KB gzipped
- Modular; easily add or remove components or classes
- Semantic class names to speed up development
- Responsive, flexbox-based grid system
- Vibrant, fresh color palette
- No JavaScript
Of course it is!
Be it a smaller project or production-scale website, boba has all of the utilities and components that you need to get started quickly and efficiently. In fact, our entire website, including our documentation, is built entirely using boba's built-in classes.
boba can be installed manually, requested via CDN, or installed via NPM / yarn.
Check out our installation guide for more information.
Boba uses autoprefixer to automatically generate browser-specific prefixes needed to support the latest two versions of each browser.
| Browser | Supported Version |
|---|---|
| Internet Explorer | 10+ |
| Edge | Last 2 |
| Mozilla Firefox | Last 2 |
| Google Chrome | Last 2 |
| Safari | Last 2 |
| Opera | Last 2 |
Although most of boba is compatible with Internet Explorer 10+, some HTML5 / CSS3 features may not be fully supported.
You can compile your custom version of boba. Check out our documentation for more information.
git clone
cd boba
npm install
gulp clean && gulp build --prodgulp// Default task is watchgulp watch// Runs a watch task to automatically rebuild files when changes are madegulp clean// Deletes the dist foldergulp build// Builds the dist foldergulp sass// Compiles SASSgulp nunjucks// Renders Nunjucks to HTML (docs only; requires the--docsflag)gulp scripts// Compiles JavaScript files into one bundle (docs only; requires the--docsflag)gulp showcase// Generates the showcase preview images (docs only; requires the--docsflag)
--prod// Strips comments, removes sourcemaps, minifies files, builds all variations of CSS; this overrides all of the other parameters--docs// Includes the documentation CSS / nunjuck processes in the build--highlight// Applies syntax highlighting to code blocks in the documentation--rebuildShowcase// Regenerates the showcase screenshots--updateType// Accepts 'major', 'minor', and 'patch' as values; used to specify the documentation version target corresponding to an npm version increment--nomin// Stops minification of files; useful for debugging--buildall// Builds all versions of the framework