The BioShip Grid System is built primarily upon the Skeleton Boilerplate grid system. It also incorporates some aspects of other grid systems such as 960GS and Blueprint.

Main Layout Grid

The main BioShip theme display template is based upon columns with em based unit widths. This means the grid scales flexibly and well according to browser zoom and base font size. The main #wrap container contains the header, footer, sidebars and content area. All of the main grid display is worked out automatically based on your theme settings. It is worth remembering that sidebar, subsidebar and content column widths of any page should add to the total grid columns set in your theme settings (the default is sixteen.)

Content Grid

Within the page #content area, there is an optional content grid available that uses % based widths. The number of grid columns can be set in theme settings for the container class (default twentyfour.) Alternatively you can set an explicit number of grid columns using a specific container class of:
container_12, container_16, container_20, or container_24

Device Width Breakpoints

Both the Main Layout Grid and Content Grid reponsively resize according to device screen width. The default device breakpoints are 320px, 480px, 640px, 768px, 960px, 1140px and 1200px. You can change the number and value of these breakpoints via the theme options screen. (Note that any breakpoint larger than the maximum layout width set will be ignored.)

Content Grid Syntax

Rather than using shortcodes, content columns can be generated using simple <div> element classes.
<div class="container"><div class="eight columns">COLUMN A</div>
<div class="eight columns">COLUMN B</div></div>

COLUMN A
COLUMN B

Using outside margins for columns is problematic because it is unknown how many columns may be in a row. To resolve this problem, inner divs are used in each column to give inner padding instead of outside margins. Simply add a second div inside the column div with a class of inner to achieve the spacing effect. The grid stylesheet automatically applies the padding to the inner div to give the column spacing. eg.

<div class="container"><div class="eight columns"><div class="inner">COLUMN A</div></div>
<div class="eight columns"><div class="inner">COLUMN B</div></div></div>

COLUMN A
COLUMN B

You can see the combination of resizable responsive grid with inner padding in the following example grid.(some colours and borders styles are added here for clearer emphasis only.)


1
11

2
10

3
9

4
8

5
7

6
6

7
5

8
4

9
3

10
2

11
1


Content Grid Class Reference

Extra classes are available for column shifts and offsets, to help you position the grid columns. Outer margins of different column sizes are applied to achieve these column shifts and offsets. The below reference table shows you which of the numbered class names have what effect.

BioShip
Framework
Skeleton
Boilerplate
960 Grid SystemBlueprintFoundation
Grid Columns12/16/20/241612 or 162412
Units%pxpxpx%
Container.container.container.container_12
.container_16
.container.row
Grid Column.{xxx}.columns
or .spanX
.{xxx}.columns
or .spanX
.grid_X.span-X.small-X.column
.medium-X.column
.large-X.column
Offset Left.offsetX or
.offsetleftX
(margin-left)
.offsetX
(padding-left)
.prefix_X
(padding-left)
.prepend-X
(padding-left)
.small-offset-X
.medium-offset-X
.large-offset-X
(margin-left)
Offset Right.offsetrightX
(margin-right)
n/a.suffix_X
(padding-right
.append-X
(padding-right)
n/a
Pull.shiftleftX
(-margin-left)
n/a.pull_X
(-left)
.pull-X
(-margin-left)
.pull-X,.small-pull-X
.medium-pull-X,.large-pull-X
(right)
Push.shiftrightX
(-margin-right)
n/a.push_X
(left)
.push-X
(margins)
.push-X,.small-push-X
.medium-push-X,.large-push-X
(left)
Content Grid Compatibility Classes

If you prefer, you can use the grid class syntax for 960GS or Blueprint classes by enabling either of those options in theme settings so the rules are added to the grid stylesheet also. For Foundation grid, simply enable the Foundation resources separately in theme settings tab for Foundation (Skeleton layer), and use that grid syntax as you normally would.

← Previous: Sidebar Layout GuideBack to Documentation Index

Leave a Reply

Your email address will not be published. Required fields are marked *


*