A lightweight, modular, CSS-only design framework.
What is boba?
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
Is boba for you?
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.
|Mozilla Firefox||Last 2|
|Google Chrome||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 --prod
gulp// Default task is watch
gulp watch// Runs a watch task to automatically rebuild files when changes are made
gulp clean// Deletes the dist folder
gulp build// Builds the dist folder
gulp sass// Compiles SASS
gulp nunjucks// Renders Nunjucks to HTML (docs only; requires the
gulp showcase// Generates the showcase preview images (docs only; requires the
--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