0

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); }  
}
wxT3APyGfkYJVK
  • 27
  • 8
  • 2
    What's wrong with your results? http://sassmeister.com/gist/5ea39585a8a362ce71c8 What are you expecting to see that you're not seeing? – KatieK Dec 16 '14 at 19:54
  • Added the information to the question, all the items take up 100% width and stack on each other. – wxT3APyGfkYJVK Dec 16 '14 at 19:59
  • 1
    Look at the Sassmeister link I made using your code - `#page` and `#content` aren't 100% wide, and "Skip to content" is next to the masthead. What are you **expecting to see**? – KatieK Dec 16 '14 at 20:03
  • I feel really silly: I expected measthead to be a column aligned to the left, content to the right hand side of it and the colophon to be below both of them. – wxT3APyGfkYJVK Dec 16 '14 at 20:09

1 Answers1

2

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

KatieK
  • 13,586
  • 17
  • 76
  • 90
  • Funny enough my local vagrant dev-env didn't update after my computer went into hibernation. After a restart the modified code by KatieK works like a charm - thanks! – wxT3APyGfkYJVK Dec 16 '14 at 23:42