Grid Layouts

In addition to responsive (mobile-friendly) column and row layouts available out-of-the-box with Sitefinity, the Brighter World Sitefinity template for Faculty of Health Sciences is built with a variety of styled grid layout options available to drag into a page to add visual intrigue and variety to your layouts.

See below for the general column layouts as well as the styled grid demonstrations.

All column layouts collapse for mobile or tablet device viewing at 1000px viewport width. This is roughly the width of a medium sized tablet in portrait view.



Standard Column Options

Sitefinity intuitively implements a web-standard grid system called Bootstrap. The basics of this can be explained by breaking any (desktop view) webpage into 12 columns.

There have been borders added surrounding these columns to make the layout a little clearer, but normally border lines will not be visible. Empty lines have been added in empty columns to further demonstrate the layouts -- normally, empty columns without these demo borders will just appear as white space.



This means any combination of twelve slices can be used to break up a row of columns on a webpage.

This row has 4 equal-width columns.





This row as 2 equal-width columns.

In order to intuitively organize these grids in the backend (where the page Editor can simply drag and drop) the columns are labelled by assigning numbers.

Notice how the vertical line of this second column lines up nicely with the row above which is also separated into an even number of columns?

For example, the first row above with 4 equal columns is "3-3-3-3". 4 columns with 3-unit width. This adds up to our total width of 12.

This row is separated as "8-4". These columns can be separated out in any combination as long as the final sum is 12.





Some grid options will get more use than others, however! Technically, one could separate a page into 12 1-unit columns, or 6 2-unit columns...but this wouldn't work out very well on most webpages.

Still, dividing by 12 creates an easy opportunity for a variety of common layouts such as "1-10-1" (which adds some empty space around a single central content column), "6-6", and "4-4-4", etc.

Any column grid can be nested inside another. A page can be set up in two columns, while the lefthand side column is separated further into three rows of differing column widths. The vast majority of page built with this template are set up with a content row of "1-10-1", where the "10" inside is further compartmentalized depending on the needs of the page.





Styled Grid Options

The styled grid components are set up in precisely the same way as standard grids, but with additional design elements included.  Any content areas within grid layouts are completely up to the page Editor...insert a plain content block, a content list element, news widget, cards, or anything else the page necessitates.  This is true of standard and styled grid layouts.

For simplicity, plain text examples have been used in demonstrations below so as not to distract from the layout itself.

No further demo borders have been added to elements, all of the styled grid components below appear as they are.

In addition, new styled grid layouts will be developed as drag-and-drop components as the Brighter World Sitefinity template for Faculty of Health Sciences is constantly improved and upgraded.

Sidebar Layouts: Left Sidebar



Sidebar Layouts: Right Sidebar



Focal Section Grids: separated by empty line breaks

These upcoming grid components can be used stacked together in any combination or individually.  For clarity, these elements will be demonstrated as separated by empty white space.



These grid elements, unlike the standard columns, should be used sparingly across any given webpage. Their purpose is to create visual emphasis around some of the most important content.



Regular column grids can be included inside any of the content areas on a styled grid.

Stacking styled grids inside of the columns of styled grids, however, is not advisable!

The first column in this row is broken further into two columns using "4-8". This one is a regular full-width content block.



Lorem ipsum

Do not nest styled grids inside styled grids:

This is what it might look like to nest design grids inside of design grids...it's messy!





Lorem ipsum



Lorem ipsum

Lorem ipsum



Lorem ipsum

Lorem ipsum

Lorem ipsum



Lorem ipsum

Lorem ipsum



Lorem ipsum

Lorem ipsum

Lorem ipsum



Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum



Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum



Stacked Grid Elements

This is a small example of how seamlessly the individual components can be stacked together to create a unique arrangement for the page content.  These should be combined in only 2 or 3 grids at maximum, otherwise the small focal section will take over the whole page!

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum



Stacked Grid Elements: Optional Emphasis

Any of these grid components can have the optional CSS classes "top-line" and/or "bottom-line" applied to them for this emphasizing effect seen below.

Only top and bottom elements in a stack of 3, or else singular styled grid items should include these top and bottom lines. Using the classes on middle grids in a stack will look messy.

This grid item has had the optional classes applied to the element.



Accessibility for Ontarians With Disabilities Act (AODA)

 

The Faculty of Health Sciences is committed to providing a website that is accessible to the widest possible audience. If there is an accessibility issue with this website, please contact us at fhsweb@mcmaster.ca.