Search code examples
csssassbourbonneat

SASS (SCSS, Bourbon, Neat) Grid isn't working

I am trying to use the underscore base theme for wordpress with SASS, Bourbon and NEAT to create a nice flexible grid.

HTML:

<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <header id="masthead" class="site-header" role="banner">
    </header><!-- #masthead -->

    <div id="content" class="site-content">
    </div><!-- #content -->

    <footer id="colophon" class="site-footer" role="contentinfo">
    </footer><!-- #colophon -->
</div>

SASS/Bourbon/Neat

#page {
    @include outer-container;

    #masthead   { @include span-columns(3); }
    #content    { @include span-columns(9); }
    @include omega();
    #colophon   { @include span-columns(12); }  
}

Created CSS:

#page {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  margin-right: 0;
}
#page::after {
  clear: both;
  content: "";
  display: table;
}
#page #masthead {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 23.23176%;
}
#page #masthead:last-child {
  margin-right: 0;
}
#page #content {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 74.41059%;
}
#page #content:last-child {
  margin-right: 0;
}
#page #colophon {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
}
#page #colophon:last-child {
  margin-right: 0;
}

Currently all the items (page, masthead, content) take up 100% width and stack on top of each other.

enter image description here

I would like to think I used it the right way, but I am sure I must have gone wrong as even the example of the neat page, outside of everything does not display correctly.

Any ideas?

This works, when you remove the skip link in the sassify, but it doesn't work in my local setup. Thanks katie, I will go on and investigate. 

#page {
    @include outer-container;
    #masthead   { @include span-columns(2); }
    #content    { @include span-columns(9); }
    @include omega();
    #colophon   { @include span-columns(12); }  
}
Solution

  • To end a "row" in Bourbon Neat, you have to include omega() in the last thing in that row; rather than in the outer container as in your code. Example:

    #content { @include span-columns(9); @include omega(); }

    You'll also need to handle your skip-link element - if it's not part of the grid system, it messes up the layout of the other elements. In the example below, I've hidden it with display: none;.

    Here an updated full example: http://sassmeister.com/gist/5ea39585a8a362ce71c8