Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Layout CSS/SASS for Genesis Framework CSS conversion to Bootstrap CSS
//by Jerod Hammerstein
//My layout SASS to change the default WordPress Genesis Framework css to use Bootstrap css
//Requires Bootstrap SASS at
//Updated: 20150409 - added offsets and padding
// padding on the left and right of the full page
$page_padding: 10px;
// Calculating the column sizes for content-sidebar-wrap, sidebars, and content
// Genesis markup is always the following with the aside (sidebars) elements optional
// <div class="site-inner">
// <div class="content-sidebar-wrap">
// <main class="content" />>
// <aside class="sidebar-primary" />
// </div>
// <aside class="sidebar-secondary" />
// </div>
// This markup is in the mobile-first order, in that it is in the order we would
// want if each element was full width. We use Bootstraps push and pull mixins to change
// the order on larger screens.
// number of columns in a grid. Default is 12.
// 1/12 of the screen is sometimes too big an offset. To decrease, increase the $grid-columns.
// or set col_offset to a fraction of 1..This might cause some alignment issues with other
// elements using the bootstrap md-col-x markup.
$grid-columns: 12;
// .content element is actually nested in the content-sidebar-wrap. The $col_content_of_screen
// is the actual number of columns you want the .content element to be as if it wasn't
// nested.
// Note: this size is for layouts with two sidebars. Content width will larger if only one sidebar
$col_content_of_screen : 6;
$col_offset: 1; //zero => columns are flush to each other.
//assuming primary and sidebar are equal
$col_sidebar_secondary: ($grid-columns - $col_content_of_screen - (2 * $col_offset)) / 2;
// add width of sidebar to wrap
$col_content_sidebar_wrap : $col_content_of_screen + $col_sidebar_secondary + $col_offset;
//since content_sidebar_wrap is a nested row, we must compute it's size based on inside content_sidebar_wrap
$col_content : $col_content_of_screen * $grid-columns / $col_content_sidebar_wrap;
// determine offset col inside content sidebar wrap
$col_offset_content_sidebar_wrap : $col_offset * $grid-columns / $col_content_sidebar_wrap;
//The col size for the primary sidebar inside the wrap would then be
$col_sidebar_primary: $grid-columns - $col_content - $col_offset_content_sidebar_wrap;
//for layouts with only primary sidebar
$col_sidebar_primary_single_sidebar : $col_sidebar_secondary;
$col_content_single_sidebar : $grid-columns - $col_sidebar_secondary - $col_offset;
// Uncomment and add your own values to override above calculations:
// row in div site-inner. Sum should equal to $grid-columns
//$col_sidebar_secondary: 2;
//$col_content_sidebar_wrap: 9;
//$col_offset: 1;
// row in div content_sidebar_wrap. Sum should equal to $grid-columns
//$col_content: 8;
//$col_sidebar_primary: 2.66667;
//$col_offset_content_sidebar_wrap: 1.3333;
// row in div content_sidebar_wrap in sidebar-content or content-sidebar layouts
// Sum of below plus $col_offset should equal to $grid-columns
//$col_sidebar_primary_single_sidebar: 2;
//$col_content_single_sidebar: 9
.site-container {
@include container-fixed();
padding-left: ($grid-gutter-width / 2) + $page-padding;
padding-right: ($grid-gutter-width / 2) + $page-padding;
.page .site-inner, .single-page-section {
@include make-row;
/* .content-sidebar-wrap{
border: 2px solid #006400;
.sidebar {
border: 2px dotted #d4081a;
.content {
border: 2px dotted #B10DC9;
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap {
@include make-md-column($col_content_sidebar_wrap);
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,{
@include make-md-column($col_content);
.content-sidebar .content,
.sidebar-content .content{
@include make-md-column($col_content_single_sidebar);
.content-sidebar-sidebar .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary,
.sidebar-content-sidebar .sidebar-primary {
@include make-md-column($col_sidebar-primary );
.content-sidebar .sidebar-primary,
.sidebar-content .sidebar-primary {
@include make-md-column($col_sidebar_primary_single_sidebar);
.sidebar-secondary {
@include make-md-column($col_sidebar-secondary);
.full-width-content .content {
@include make-md-column($grid-columns);
@if $col_offset != 0 {
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap {
@include make-md-column-offset($col_offset);
.sidebar-content-sidebar .sidebar-primary,
.content-sidebar-sidebar .sidebar-primary {
@include make-md-column-offset($col_offset_content_sidebar_wrap);
.content-sidebar .sidebar-primary {
@include make-md-column-offset($col_offset);
.content-sidebar-sidebar .sidebar-secondary {
@include make-md-column-offset($col_offset);
.sidebar-sidebar-content .content {
@include make-md-column-offset($col_offset_content_sidebar_wrap);
.sidebar-content .content {
@include make-md-column-offset($col_offset);
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.content-sidebar-sidebar .content-sidebar-wrap,{
//@include make-row; - markup needs another div for this to work right
@extend %clearfix;
// remove the extra gutter space that make-row would have done but with margins
padding-left: 0;
padding-right: 0;
//secondary sidebar is to the left of content-sidebar-wrap (markup for secondary sidebar is after content-sidebar-wrap)
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap,{
@include make-md-column-push($col_sidebar_secondary);
//primary sidebar is to the left of content (markup for primary sidebar is after content)
.sidebar-sidebar-content .content {
@include make-md-column-push($col_sidebar_primary);
.sidebar-content .content {
@include make-md-column-push($col_sidebar_primary_single_sidebar);
.sidebar-sidebar-content .sidebar-primary {
@include make-md-column-pull($col_content + $col_offset_content_sidebar_wrap);
.sidebar-content .sidebar-primary{
@include make-md-column-pull($col_content_single_sidebar + $col_offset);
.sidebar-content-sidebar .sidebar-secondary,
.sidebar-sidebar-content .sidebar-secondary {
@include make-md-column-pull($col_content_sidebar_wrap + $col_offset);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment