Clean Sample

With a clean dashboard, no css framework, to organize your elements in the layout, will be loaded. This way you can use your own css frameworks
or custom css without the interference of our frameworks, i.e. Blueprint or Bootstrap, to build the layout exactly the way you want.

Note: Css will still be loaded, but only for specific plugins and components that need it to work properly.

Layout

Multiple Columns Layout With Custom Css

/*CSS*/
.header, .footer, .filter, .info {
  border: solid 1px gray;
}
.header, .footer {
  background-color: #4682B4;
  color: white;
  padding: 10px;
}
.header {
  text-align: center;
  font-size: 16pt;
}
.footer {
  clear: left;
  text-align: right;
  font-size: 12pt;
}
.filter, .info {
  height: 100px;
  padding: 5px;
  margin: 5px 2px;
}
.filter {
  float: left;
  background-color: #5F9EA0;
  color: white;
  width: 10%;
}
.info {
  float: right;
  background-color: #E0FFFF;
  width: 85%;
}

/*HTML*/
<div>
  <div class="header">Custom Css Layout</div>
  <div class="filter">Filter</div>
  <div class="info"></div>
  <div class="footer">Footer</div>
</div>

Custom Css Layout
Filter

This layout was built without any framework.

Require

To include a Clean Dashboard:

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