Skip to main content

Blog Post

Singularity Grid System

Intro

During my trip to Drupalcon Porltand this year I discovered a new grid system/framework called Singularity Grid System or Singularity GS for short. Since then, I have taken some time to work with this framework and I have to say it's pretty awesome. It took me some time to get my mind around this novel way of creating grids and layouts, but after I created a few, things started to click. 

What is Singularity GS?

In a nutshell, Singularity GS is a modern grid framework that allows you to create a grid system for your site layout, built with responsiveness in mind. One of the most interesting things about Singularity is that it is a Ruby gem that plugs into Sass. Once you add Singularity to your project or Drupal subtheme, you are able to define and configure your grid/layout using Singularity's set of pre-defined mixins.

Rolling a custom grid this way is different from using themes that have existing stylesheets that load when the browser viewport reaches a particular width. When you have stylesheets that are added-on at fixed breakpoints, you end up molding your content to fit those breakpoints. Instead, Singularity allows you to add breakpoints for any section/region/block as-needed in your Sass. This approach focuses on your content first. 

Singularity Highlights

  • Flexible and friendly. Able to completely customize every aspect of your grid.    
  • Create fluid, custom, easy-to-manage grids within the code (and not from the theme settings page).    
  • Completely Sass-based.
  • Uses ratio-based math. Calculates grids based on internal proportions. This allows you to use units of your choosing (%, px, ems, etc) to define your grid.    
  • You may define fixed width gutters or set gutters to expand or contract with the rest of the grid.
  • Comes bundled with the Breakpoint mixin to help you write and manage your breakpoints.
  • Allows nested grids for complex layouts. (Inception Rule: Never go more than four levels deep.)
  • When paired with the Drupal base themes Aurora or Omega 4.x, the result is a very powerful, responsive, minimalistic subtheme.

Breakpoint Mixin

Before we dive into creating a singularity grid let's talk about a handy mixin called Breakpoint. Breakpoint is included with Singularity so you don't need to do anything except install Singulairty to use it. Breakpoint is where all the responsive magic comes in. Breakpoint makes writing media queries really easy. You simply call the Breakpoint mixin "@include breakpoint([width-value])" and set the width-value to the min-width media query value that you want.  A better way to handle this is to define variables for the breakpoints you want to use so that the value will have a meaningful name like "$desktop".

For example: 

$desktop: 960px;
@include breakpoint ($desktop) {
 content: 'test';
}

Compiles to:

@media (min-width: 960px) {
 content: 'test';
}

In the example above the content style will only render when the media's min-widht value is at least 960px. You can view some additional examples on the Breakpoint mixin page.

Creating Your Grid

Let's keep things simple and look at creating a uniform, symmetrical grid. You can find information on creating different kinds of grids at the Singularity Wiki. As we're working through the examples, you may find it useful to play along at sassmeister.com. Be sure to choose "Singularity" as the extension.

To start, let's define a simple 12 column symmetric grid. A Singularity grid consists of a combination of the $grids and $gutters variables. I placed these variables in my "_variables.sass" partial.

$grid: 12 $gutters: 1/3;

This will yield us with a grid that looks similar to the 12 column 960 grid that we are all familiar with. A 960 grid consists of gutters that are 20px wide with columns that are 60px wide. If we convert these numbers into a ratio it would look like 20px:60px which equals 1:3. So 1/3 is what we plug into the $gutter variable. You could also just as easily plug in $gutter: 20px if you wanted fixed width gutters that were always 20px.

Here is an example of a more complex layout that has multiple grids defined at specified widths to allow for responsiveness. Note: Start with your mobile grid first, then use add-grid() or add-gutter(), or you can set $mobile-first: false; to switch the Responsive Grid assumptions. 

$grids: 3; // Mobile
$grids: add-grid(6 at 500px); // Tablet (Portrait)
$grids: add-grid(12 at 720px); // Tablet (Landscape)
$grids: add-grid(18 at 960px); // Desktop 

You could also add additional gutters if needed.

$gutters: add-gutter(1/4 at 960px);

Here's where the usefulness of the breakpoint mixin makes our responsive theming much easier. Simply call the mixin from within the region/block you want to apply your grid-span to, and include the size that you want to include as a min-width in a media query.

For example: 

#header {
 @include breakpoint (960px);
 @include grid-span (3, 1);
}

Compiles to:

@media (min-width: 960px) {
 #header {
 width: 15.49296%;
 float: left;
 margin-right: -100%;
 margin-left: 0%;
 clear: none;
 }
}

By nesting the grid-span mixin under the breapoint mixin you are telling Singularity to make the #header region span three (of the 18) columns starting at the first column whenever the browser width is 960px wide or greater.

Positioning Example

One of the really cool things that I like about Singularity is how easy it is to position regions/blocks from left to right, or even swap sides without messy push & pull classes. No need to adjust the order of the blocks in the markup. 

To illustrate, here's a very simple example that consists of a page that has a header, sidebar and main region. Regions have been color coded for better visibility.

Notice how the sidebar is on the left side in example 1.1.

Example 1.1

Example 1.2

Let's say you want to move the sidebar from the left side to the right. Traditionally you would have to edit the page template and print the main content area first, then the sidebar. Or in Omega 3.x you would have to navigate into the appearance settings and drill down to make this change. Then of course you would need to export the configuration to code in the theme.info file.

With Singularity you can adjust the position of the region and how many columns it spans from within your Sass file. In the code example above, the +grid-span mixin is doing all of the work. When you use the grid-span mixin you pass in two values; the first dictates how many columns this region will span, and the second tells it what number column it should start on.

Our sidebar is initially set to +grid-span(3,1). This means that this region will span three columns, starting on the first column. The main region is set to +grid-span(9,4). This means that the main region will span nine column, starting on the fourth column. If you add the total number of columns the sidebar and main regions span you get 12, which is the number of total columns in our grid.

To move the sidebar from the left to right side all we need to do is change the second value in the grid-span mixins. We can keep the first values the same since we want our regions to continue to span the same amount of columns (to keep the same width).

Example 2.1

The result is that the sidebar now begins at column 10, and therefore appears on the right side of the page, as seen below.

Example 2.2

View the code Github Gist.

Aurora Theme

As I mentioned before, Singularity works well with the Aurora base theme, they go hand in hand. However, Singularity does not require Aurora since it is Sass-based and can be included with any project. Singularity also works well with Omega 4.x, however, I have yet to explore this.

I have have been working with the Aurora theme along with Singularity. I will be following this post up with another on the Aurora theme and how it works with Singularity. Stay tuned!

Addtional Resources

Responsive Design: Mobile Menu Options

Tapping into the Drupal 7 Responsive AdaptiveTheme

Free Drupal Whitepaper | The Mobile Web and Drupal

 

 

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow