Get boba!
boba Version 1.7.2

Installation

Your hassle-free handbook to bootstrapping boba.

Methods

Four simple ways to get boba installed and production ready.

Tip

Learn more about the various versions of boba here!

Manual Installation

Download the most recently compiled and minified version of boba of your choosing from GitHub and include it in your project.

                        <!-- You only need one of these! -->
<link rel="stylesheet" href="boba-extended.min.css">
<link rel="stylesheet" href="boba.min.css">
<link rel="stylesheet" href="boba-lite.min.css">

Using a CDN (Recommended)

Boba is hosted by both unpkg and jsDelivr for your convenience! Pick the version of boba that best suits your needs and include it in your project.

                        <!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/boba@1/dist/boba-extended.min.css">
<link rel="stylesheet" href="https://unpkg.com/boba@1/dist/boba.min.css">
<link rel="stylesheet" href="https://unpkg.com/boba@1/dist/boba-lite.min.css">

<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boba@1/dist/boba-extended.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boba@1/dist/boba.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boba@1/dist/boba-lite.min.css">

Via NPM

                        npm install boba --save

Via Yarn

                        yarn add boba

Quick Start

A simple template to help you get started with boba.


Example Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat containeridatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat containeridatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat containeridatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Build with Boba!</title>
    <link rel="stylesheet" href="https://unpkg.com/boba@1/dist/boba-extended.min.css">
</head>
<body>
    <nav class="navbar">
        <a href="#" class="navbar-brand">boba</a>
        <input class="navbar-menu-target" type="checkbox" id="quick-start" />
        <label class="navbar-menu-toggle" for="quick-start"><span class="navbar-icon"></span></label>
        <ul class="navbar-menu-items menu-items-right">
            <li>
                <a href="#"><span>Category</span></a>
            </li>
            <li>
                <a href="#"><span>Category</span></a>
            </li>
            <li>
                <a href="#"><span>Category</span></a>
            </li>
        </ul>
    </nav>
    <div class="banner medium">
        <div class="banner-body">
            <div class="container">
                <h1 class="header">Hello World</h1>
                <h3 class="subheader thin">boba is the best!</h3>
            </div>
        </div>
    </div>
    <br />
    <br />
    <div class="container">
        <div class="row">
            <div class="col xs-12 md-4">
                <div class="card">
                    <div class="card-header borderless">
                        <div class="card-header-title">
                            Example Card
                        </div>
                    </div>
                    <div class="card-content">
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat containeridatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col xs-12 md-4">
                <div class="card">
                    <div class="card-header borderless">
                        <div class="card-header-title">
                            Example Card
                        </div>
                    </div>
                    <div class="card-content">
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat containeridatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col xs-12 md-4">
                <div class="card">
                    <div class="card-header borderless">
                        <div class="card-header-title">
                            Example Card
                        </div>
                    </div>
                    <div class="card-content">
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat containeridatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>