About Borealis Suite

Borealis is a suite of modules designed to assist in the implementation and building of semantic HTML5 and responsive projects in Drupal. The first module, Borealis Responsive Images, is an integrated solution for responsive images in Drupal. The second module, Borealis Semantic Blocks, adds a basic, more semantic block template and allows the user to choose more semantic, HTML5 block templates for each block. As more modules are needed, they will be added to this project.


A selection of helper functions that come in handy for various small bits and pieces of your site. Currently contains the following functions:

Render Array Block

Pushes a block onto a supplied render array. Function call is borealis_render_array_block($render_array, $module, $delta). The Render Array will be passed by reference, the module and delta variables are the same you would use to get a block using block_load

AJAX Settings Save

Saves the value of the triggering element to a Drupal variable. Requires the following to be set in your form:

In Your Form

$form['borealis_key'] = array(
    '#type' => 'hidden',
    '#value' => 'YOUR_KEY',

On The Form Item

$form['NAME'] = array(
  '#ajax' => array(
     'callback' => 'borealis_ajax_settings_save',

Replace 'YOUR_KEY' with the key you would like to use for each variable. This key will be appended on to the name of the form item ('NAME') you're using the callback with to build a variable name. For instance, if your key was 'borealis_ri' and your form element was $form['lazyload']…, the resulting variable name would be borealis_ri_lazyload. You can also call the function directly from another function, passing in the correct $form and $form_state in order to chain variable saving with custom AJAX callbacks.

Borealis Responsive Images

Finally, a Responsive Image solution for Drupal That Just Works™. Simply enable Borealis Responsive Images, navigate to admin/config/media/image-styles/responsive, choose which styles you want to be responsive, and you're done! Pick your image styles as normal and Borealis will handle the rest! As an added bonus, provides high resolution images!

Borealis Responsive Images uses a mobile first approach, displaying a small image initially and, as the images get larger, swapping them out for a larger image. You have two choices, either loading in the smallest image initially, or loading in a placeholder image which also brings along with it full Viewport and Scrolling lazyloading support (I highly suggest including the wrapper if using the later). The solution uses a hybrid JavaScript replacement and Fluid Image solution, and because the swap happens based on each individual image's size as opposed to screen width, preserves bandwidth by not swapping all of the images out at once (unless needed).

Borealis Responsive Images is also 100% jQuery independent, so if you're building a bare-bones site using Drupal, you're still able to use it and not need to also include jQuery! Yay! This, however, means that browser support is limited to IE8+.

For an added treat, Borealis Responsive Images works fan-flipping-tastically with ImageField Focus. Combining the two will allow you to have tight cropped images at smaller sizes and larger grand images at larger sizes while keeping your subject in focus. That's right! Automated editorial control for images at different sizes! Huzzah!

Borealis Semantic Blocks

Fulfill all your Semantic Block needs! Allows you choose the wrapping of your block utilizing new semantic templates to turn your blocks into semantic Divs, Articles, Asides, Navs, Spans, or even doing away with wrapping completely! Each block you create in the UI will have a dropdown for you to choose your block's wrapping, or, if you want to add semantics programmatically, simply add $block['semantics'] = {type}; in your hook_block_view (same place where $block['subject'] and $block['content'] go). Valid options for {type} are 'div, article', 'aside', 'nav', 'span', or 'none'.

Exporting Your Settings

Your configurations for both Borealis RI and Borealis SB are fully exportable. Borealis SB uses standard ctools exportables whereas Borealis RI, for the time being, is all stored in System variables. The easiest way to export your options are as follows:
Borealis SB: Using Features, select the Borealis Semantic Blocks component and check which items you want to export! Done and done.
Borealis RI: Using Features and Strongarm, select Strongarm component and export borealis_image_wrap, borealis_responsive_builds, borealis_ri_hidpi, borealis_ri_lazyload, borealis_ri_min_size, borealis_ri_children, and borealis_ri_parents.


The Borealis suite is maintained by Sam Richard (@snugug)

Project information