Layout CSS/SASS for Genesis Framework CSS conversion to Bootstrap CSS

gistfile1.txt

//by Jerod Hammerstein
//My layout SASS to change the default WordPress Genesis Framework css to use Bootstrap css
//Requires Bootstrap SASS at https://github.com/twbs/bootstrap-sass
//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);
}