Bluprnt

Bluprnt is the front-end UI framework for Bluebeam.com.

To get up and running, see the steps below.

Dependencies

Roboto font:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

Bluprnt’s JavaScript depends on jQuery:

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

Using Bluprnt

Latest version: 1.6.1

From a CDN

It’s available on JSDelivr:

<!-- Latest Minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bluprnt@1.6.1/dist/css/bluprnt.min.css">

<!-- Latest Minified JS -->
<script src="https://cdn.jsdelivr.net/npm/bluprnt@1.6.1/dist/js/bluprnt.min.js"></script>

You can specify a version within the URL. To see all available versions, check here: https://cdn.jsdelivr.net/npm/bluprnt/

Install with npm or yarn

You can also install Bluprnt using npm or Yarn:

$ npm install bluprnt

# or

$ yarn add bluprnt

Download Bluprnt

Or you can download the latest package.

Download ZIP

Example HTML Template

The following HTML template is a bare bones example of what you’ll need to work with Bluprnt.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Page Title</title>
    <meta name="description" content="">

    <!-- Bluprnt core CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bluprnt@1.6.1/dist/css/bluprnt.min.css">

    <!-- Your custom CSS goes here -->

  </head>
  <body>
    <section class="u-py8">
      <div class="o-grid">
        <header class="o-grid-cell">
          <h1>Hello World!</h1>
        </header>

        <div class="o-grid-cell">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing 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.
          </p>
        </div>
      </div>
    </section>

    <!-- Bluprnt core JavaScript -->
    <!-- Also note Bluprnt javascript depends on jQuery 3+ -->
    <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bluprnt@1.6.1/dist/js/bluprnt.min.js"></script>
  </body>
</html>