Blueprint Sample

Layout

With blueprint, you can organize your elements like in a grid, using the classes span (span-number, number ranging from 1 to 24)

24 Span div with 24 divs with class="span-1" inside, the last one must have the class .last

<div class="span-24">
  <div class="span-1" style="background-color:black; height:20px"></div>
  ...
  <div class="span-1 last" style="background-color:black; height:20px"></div>
</div>

You can use some useful classes on the go:

.success
.notice
.info
.error

This makes it possible for us to create complex positioning

html snippet that generates above:

<div class="span-24">
     <div class="span-5" style="height:20px"></div>
     <div class="span-2" style="background-color:black; height:20px"></div>
     <div class="span-2" style="height:20px"></div>
     <div class="span-2" style="background-color:black; height:20px"></div>
   </div>
   <div class="span-24">
     <div class="span-5" style="height:20px"></div>
     <div class="span-1" style="background-color:black; height:20px"></div>
     <div class="span-2" style="background-color:black; height:20px"></div>
     <div class="span-2" style="height:20px"></div>
     <div class="span-2" style="background-color:black; height:20px"></div>
   </div>
   <div class="span-24">
     <div class="span-4" style="height:20px"></div>
     <div class="span-2" style="background-color:black; height:20px"></div>
     <div class="span-1" style="height:20px"></div>
     <div class="span-2" style="background-color:black; height:20px"></div>
   </div>

Components

Require

To include a Blueprint dashboard:

require(['cdf/Dashboard.Blueprint'],
  function(Dashboard) {
    ...
});