Semantic Grid Structure

[idesignstuff]

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

[David_Leitch]

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).

[idesignstuff]

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

[David_Leitch]

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.

[idesignstuff]

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

[idesignstuff]

Your text to link here…

[Author]

Posts