Getting Started

Bulma + Nunjucks + Gulp (on Github)

This BCO-DMO website template uses the lightweight, open source CSS framework Bulma for mobile-tested, accessible UI base components, combined with Nunjucks for JS templating.

Color

Typography

Also reference Bulma's Title and Subtitle headings elements for more variations.

Font Family: 'Lato' (Google Font)

Title Header 1

Title Header 2

Title Header 3 (default size)

Title Header 4

Title Header 5

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5 (default size)

Primary Title Header 1

Body text size, 15px

Text link

Typography / Alignment Helpers

.has-text-centered Makes the text centered

.has-text-justified Makes the text justified

.has-text-left Makes the text aligned to the left

.has-text-right Makes the text aligned to the right

.is-capitalized Transforms the first character of each word to uppercase

.is-lowercase Transforms all characters to lowercase

.is-uppercase Transforms all characters to uppercase

.is-italic Transforms all characters to italic

Margin/Padding Helper Classes

These classes can be used to override or accompany built in styling where needed to properly space out an element or components. For example, this paragraph tag of text has .margin-bot-3 to give some subtle, consistent spacing beneath it.

Logo & Icons

In addition to the website look and feel, the BCO-DMO Logo is also getting a refresh. See below for how to best use it.

Download Logo Assets

Icons

Icons used throughout the BCO-DMO site are font-based icons via FontAwesome (v 4.7). Below are a few to show how to use them, but check out the FontAwesome Docs for more details and the entire library of icons.

Layout

For complete documentation, reference the Bulma Layout Docs.

Container

The .container element is used to create a consistent wrapper around content

Grid

If you need to horizontally divide content within a .container or any other section, you'll want to do so using columns. They will grow/shrink in size the more you add, and they are responsive and will collapse at specific breakpoints.

In addition to standard .column class, you can add specific widths based on a 12 column grid, or use a combination of the two like below.

const fileInput = document.querySelector('#file-js-example input[type=file]');

fileInput.onchange = () => {
  if (fileInput.files.length > 0) {
    const fileName = document.querySelector('#file-js-example .file-name');
    fileName.textContent = fileInput.files[0].name;
    document.getElementById('submit-btn').disabled = false;
  }
}

Cards

Default Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

BCO-DMO

@bcodmo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @nsf. #hashtag
11:15 AM - 3 Jan 2020

<div class="columns"> <div class="column is-one-third"> <!-- Default Card Component --> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> <h3 class="title">Default Card Title</h3> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. </div> </div> </div> </div> <div class="column"> <!-- Twitter Card Variation --> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-left"> <figure class="image is-48x48"> <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image"> </figure> </div> <div class="media-content"> <p class="title is-4">BCO-DMO</p> <p class="subtitle is-6">@bcodmo</p> </div> </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@nsf</a>. <a href="#">#hashtag</a> <br> <time datetime="2016-1-1">11:15 AM - 3 Jan 2020</time> </div> </div> </div> </div> </div>

Search Results Card

Restricted

DATASET Fluorescence spectra for 3 strains of Synechococcus while increasing temperatures to detect the photosystem components disassociation temperature

David A. Hutchins

Dimensions: Collaborative Research: Genetic, functional and phylogenetic diversity determines marine...

Temperature Something C02

<div class="card result-card"> <div class="card-status"><span class="tag is-danger is-light"><i class="fa fa-lock"></i> Restricted</span></div> <div class="card-content"> <div class="content"> <label class="pre-title">DATASET</label> <a class="title">Fluorescence spectra for 3 strains of Synechococcus while increasing temperatures to detect the photosystem components disassociation temperature</a> <p><a>David A. Hutchins </a></p> </div> <div class="columns card-details"> <div class="column"><a href="#">Dimensions: Collaborative Research: Genetic, functional and phylogenetic diversity determines marine...</a></div> <div class="column has-text-right"><span class="tag"><a>Temperature</a></span> <span class="tag"><a>Something</a></span> <span class="tag"><a>C02</a></span></div> </div> </div> </div>

Footer

©2020 Biological and Chemical Oceanography Data Management Office.
Funded by the U.S. National Science Foundation