Blueprint

GuidesFoundationComponentsReleases
⌘K

Getting Started with Bootstrap

This Bootstrap theme serves as the JavaScript-agnostic implementation of the Blueprint design system.

Generally, you should be able to leverage Bootstrap as documented, and this theme will take care of most customizations necessary for consistency with Blueprint's overall design langauge. With that said, do take a look at the examples provided here, as there are some cases where we employ our own HTML markup and CSS classes.

Getting Started

While we plan to eventually distribute the Bootstrap theme as a RubyGem as well, it's currently available from either NPM or as a static asset hosted on our CDN.

The CDN is recommended for most use cases.

CDN

Simply copy one of the examples into the <head /> of your HTML document.

HTML


<link
rel="stylesheet"
href="https://blueprint.hover.to/assets/css/bootstrap-theme-1.0.1.css"
/>

Scoped

A version of the theme with all rules scoped as descendents under the .hover-bootstrap class.

Adding to an existing application

If you're adding the theme to an existing application where CSS classname collisions are a concern, you probably want to use the scoped version.


<link
rel="stylesheet"
href="https://blueprint.hover.to/assets/css/bootstrap-theme--scoped-1.0.1.css"
/>


<!-- Wrap elements with the `.hover-bootstrap` class to apply the theme -->
<div class="hover-bootstrap">
<button class="btn btn-primary">Blueprint Bootstrap Button</button>
</div>

Rails / Slim


= stylesheet_link_tag "https://blueprint.hover.to/assets/css/bootstrap-theme-1.0.1.css", media: "all"

NPM

  1. Install


    yarn add @hover/bootstrap-theme

  2. Import

    Sass

    @import '@hover/bootstrap-theme/scss/bootstrap-theme.scss';

    JavaScript
    Note

    You must have a bundler, such as Webpack, properly configured to consume CSS assets from JavaScript.


    import '@hover/bootstrap-theme/assets/css/bootstrap-theme.css';