Get boba!
boba Version 1.7.2

Customize

Learn more about how to customize boba and build your own version from the source.

Adding Fonts

Truly make boba your own by adding a custom font.

System UI Fonts (Default)

By default, boba is configured to use the user's platform-specific system UI fonts. These fonts are modern, minimal, and have the added bonus of being zero latency as every user will already have them installed. If you're looking for the most optimal performance, this is the way to go!

Custom Fonts

While boba's default fonts are great, adding a custom font can help make your website stand out and give your brand a unique identity. Luckily with boba, adding your own fonts is simple.

1. Select a Font

Find a font that you like. We chose Fira Sans and Muli from Google Fonts.

2. Import the Fonts

Include the fonts in the head section of your page, just like how you would import boba.

                        <head>
    <!-- Other Head Content -->
    <!-- (Title, Description, etc.) -->

    <!-- Import Boba --> 
    <link rel="stylesheet" href="https://unpkg.com/boba@1/dist/boba.min.css">
    
    <!-- Import your Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,600|Muli:300,400,700">
</head>

3. Create a Custom Stylesheet

Create a custom CSS file and include it into your page below your freshly imported fonts.

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

<!-- Import your Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,600|Muli:300,400,700">

<!-- Import your Custom Stylesheet -->
<link rel="stylesheet" href="custom.css">
...

4. Override boba's Default Fonts

Inside of your custom CSS file, override boba's default font-family settings.

In our case, we want to replace boba's default font with Muli as well as make our headings use Fira Sans. Just to be safe, we will also include system UI fonts as fallback in case our custom fonts fail to load. Learn more.

                        body {
    font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;    
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Droid Sans", "Helvetica Neue", sans-serif;
}

Build Your Own

For our more advanced users looking for a little more control.

Overview

Boba was built with modularity in mind. This means that each one of boba's components, be it an element or a utility, can be excluded from the build process without breaking boba as a whole. A master configuration file can be found at src/scss/all.scss. Use this file to include or exclude various components from the final build.

Editing SCSS

Boba's css is generated from Sass files located in src/scss. Edit and compile these files to your liking to create a your very own version of boba.

Compiling SCSS to CSS

Boba uses gulp to compile SCSS into CSS. In order to use gulp, you will need to install npm, a package manager used to manage gulp and its dependencies.

To build boba:
  1. Clone the official boba repository to your computer.
  2. Navigate to the root directory of boba.
  3. Run npm install to install gulp and its dependencies.
  4. Once complete, run gulp clean && gulp build --prod to compile and minify your modified version of boba.
  5. Look in the dist folder for boba.min.css. This is your customized version of boba!