I forked a great development starting point for creating a Genesis Framework child theme by cdukes on gitHub. It includes the latest javascript tools for developing such as grunt.js and bower.js. All you need is nodes.js installed on your machine. I forked it here. Because I don’t have ruby, gem, nor compass SASS on my machine, I replaced the SASS engine with a node.js SASS engine. Using bower.js I added Twitter Bootstrap SASS. As with many developers, I really like using Twitter Bootstrap’s grid system to place web elements. The Bones-for-genesis-2-0 has practically no styling. Why not take this opportunity use Bootstrap.
I didn’t want to change any of the HTML markup like using WordPress’s hooks and filters to add classes. I wanted to use the produced CSS on any Genesis website. Using the Bootstrap’s SASS mixins I changed Genesis’s default site layouts: e.i. sidebar-content-sidebar, content-sidebar-sidebar, full-width-content, etc, to use Bootstrap’s grid.
Genesis markup on a page or post is always like the following. The aside (sidebars) are optional elements depending on the site layout.
This markup is in the mobile-first order, in that it is in the vertical order we would want if each element was full width. (We’ll use Bootstrap’s push and pull mixins to change the order on larger screens.. Stay tuned)
Bootstrap grid requires a containing element that has a container class so I added the necessary css to Genesis’s .site-container by doing the following:
.site-container {
@include container-fixed();
}
where the mixin, container-fixed(), is already created for you in Bootstrap SASS. I didn’t see container-fluid(), but my .site-container acts like it is fluid so I left it as that.
Next, we require a row to contain the columns. I made the .site-inner the row using the following:
.site-inner {
@include make-row;
}
The two elements in .site-inner are .content-sidebar-wrap and .sidebar-secondary so to make the .content-sidebar-wrap use 10 of the 12 columns and .sidebar-secondary to use 2 of the 12 columns, I did the following:
.content-sidebar-wrap {
@include make-md-column(10);
}
.sidebar-secondary {
@include make-md-column(2);
}
This looks nice, but what if the site layout is sidebar-content-sidebar which means the .sidebar-secondary is before the .content-sidebar-wrap. We can use Bootstrap’s push and pull like so:
.content-sidebar-wrap {
@include make-md-column(10);
//now push this element down the row to give room for the sidebar
@include make-md-column-push(2);
}
.sidebar-secondary {
@include make-md-column(2);
//now pull this element up the row to it starts where the wrap would have started.
@include make-md-column-pull(10);
}
Now this works fine but what if we want space between the columns, Bootstrap has their make-md-column-offset(x) mixin to fix that, just make sure your columns and offsets all add up to 12. By the way, you can change the grid size to any number with bootstrap sass by overwriting the $grid-columns variable if 12 does not work with your layout.
If you notice, the .content-sidebar-wrap is actually a nested row with the .content and .sidebar-primary elements so those columns must add up to 12 or whatever $grid-column is. Unfortunately, this means each column size in .content-sidebar-wrap is different from the outer .site-inner’s column size. We want these to match, right?
Luckily, SASS allows us to use variables and do a lot of calculations so why figure out all these column sizes when the computer can for you. The code I created lets you choose the $grid-columns (if you wanted to change the default of 12), enter in the number of columns you want the content to take up, and column size of any offset you want between the elements. It will then compute the sidebar size, .content-sidebar-wrap size and the column sizes for the nested .content and .sidebar-primary elements.
Here’s a screenshot of a page containing all site layouts with the .content being 6 columns, the offset being 1 column and $grid-columns being the default of 12. (Each layout is separated by a blue border)
Here’s the SASS code for using Bootstrap to layout Genesis markup (also found in this gist) Or checkout my fork of bones-for-genesis-2-0 which produced the screenshot above.
//by Jerod Hammerstein
//My layout code in 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
//
//
//
//
// 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-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);
}
