Last active
August 29, 2015 14:18
-
-
Save jer0dh/9809e983edb4617300e8 to your computer and use it in GitHub Desktop.
Layout CSS/SASS for Genesis Framework CSS conversion to Bootstrap CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment