Grow your CSS skills. Land your dream job.

Semantic Grid Structure

  • # February 11, 2013 at 12:41 am

    Hello all,
    After watching “Don’t Overthink It Grids” I have decided to try and make it as semantic as possible. Wanted to see what you guys think, if i’m on the right track, or if i’m doing it wrong. Of course I wouldn’t necessarily have a header and footer in every section, but this is just for fun.

    Here is a code pen: http://cdpn.io/Goxtr

    One issue I am having is that the nav bar is supposed to be a column at 25% width with the other module at 75% but it kicks it to a new line..I have tried messing with the display properties but haven’t managed to fix that.

    Thanks for any help

    # February 11, 2013 at 3:33 am

    The way I keep my grids semantic is to use semantic classes, then use the @extend function of Sass to make those classes act like the columns and grids that I want.

    For instance, in the example [here](http://codepen.io/David_Leitch/pen/Fndpf “http://codepen.io/David_Leitch/pen/Fndpf”), I’ve used all semantic mark up, but then used @extend in the CSS to have the two columns. Notice also that I have the columns acting differently based on browser width, as you probably want the columns to widen to the default of 100% when on mobile devices.

    As for why yours is going onto a new line, I don’t think you’ve copied all of Chris’ code across and you’ve also incorrectly used .grid in the first part. The grid class should fully encapsulate the whole row (ie both the nav and the content you want in line).

    # February 11, 2013 at 4:30 am

    I haven’t learned any Sass yet, was trying to get my CSS coding down before I moved onto it. It sounds really useful, like using jquery for javascript. Is the $pad a Sass command? Also not sure how the @extend works in this example, sorry for my newbieness

    # February 11, 2013 at 5:49 am

    No, that’s all good, I was a little tired when I wrote that so I should have taken into consideration how new you were to CSS and held back on the Sass. $pad (a variable) and @extend are both features of Sass :)

    I’ve fixed up your [example](http://codepen.io/David_Leitch/pen/aGgiD “http://codepen.io/David_Leitch/pen/aGgiD”) and figured out what was missing. Basically, there was a class missing ( [class*="col-"]:last-child ), which was making the last column in each grid too wide.

    Also, you changed one of the selectors from

    [class*="col-"]

    to

    aside, section[class*="col-"]

    Your selector means ‘select ALL asides (with any class), as well as sections with a class containing “col-” ‘, whereas you really just want to select any element with a class containing ‘col-‘.

    Also, the class ‘grid’ needs to be applied for each new row, which was also messing a couple of things up.

    Note: Sorry that I removed a lot of the additional styling you had. I just wanted to make the code cleaner so you could see what needed to happen :) I’m still pretty tired, so sorry if this comes out as gobbledygook.

    # February 11, 2013 at 2:47 pm

    Awesome, I appreciate your responses and solutions! Thank you very much, and I added a horizontal nav bar too. I’m trying to build a framework that I can use on all future websites as a building block. Thanks again :)

    If you were interested here is the codepen: http://cdpn.io/sGelc

    # November 22, 2013 at 10:33 am

    Your text to link here…

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".