Grid systems and responsive layouts

Question

every time I start to code a new responsive page I come up with this question so I thought I ask you guys about it: "is it normal to break readability when adding responsiveness to pages?"

I think you'll better understand with an example: I have 2 big columns in a 12 columns grid system so I set 2 divs with class .grid-6 and in the css .grid-6 {width:50%}. In the tablet layout the graphic designer has placed three columns so i change the width of those columns to 33% but now I have a div with class grid-6 (which suggests 50% width) and an actual column width of 33%.

So when I start working on responsiveness it all just feels like "hacks".. I though about adding different classes for tablets and phones or other devices (<div class="grid-6 tablet-grid-4 phone-grid-3">) but that just doesn't feel right.

the problem appears when you receive a graphic design that has different amount of columns for each breakpoint..I mean, you can't change the column count in the html, amirite?

Answer 1

Consider using Cascade Framework.

A grid element in Cascade framework is either

• One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).

• A div element with a 'col' class (can be used in old IE without a polyfill).

To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.

More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)

Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.

If your build includes the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.

However, this still may lead to stuff like <div class='col width-1of4 tablet-1of3 phone-1of2'> </div> in some cases. In those cases, going semantic is a better approach. More concretely, do something like <div class='col custom_class'> </div> or <section class='custom_class'> </section> and then set the width for each breakpoint yourself in your custom CSS.

Answer 2

Try the Dead Simple Grid. Rather than hard-coding the grid layout classes like

<div class="grid-6 tablet-grid-4 phone-grid-3"></div>

you assign an abstract classes like

<div class="col left"></div>
<div class="col right"></div>

and then assign the width to these classes for the different screen sizes

.left, .right    { width: 100%;   }

@media only screen and (min-width: 54em) {
  .left, .right    { width: 50%;   }
}

This example targets small screens by default (e.g. smartphones) having left and right fill the entire width of their container (which can be another column since nesting is supported!) and displaying the two elements underneath each other. When the screen is large enough though, the two columns will be displayed next to each other.

Dead Simple Grid is very simple (the entire css code is 250 bytes!) but surprisingly powerful.

Answer 3

Flexbox is your solution, but it's not time yet.

If you don't care that much about semantics, it's a perfect solution you describe using tablet-grid-4. Grids in definition using sizing in their class names aren't semantic. You can also name it like desktop-main desktop-aside tablet-main tablet-aside and so on. But I always fall short my self in practice. What do you name three even cols in tablet. It's not main, it's not aside. They are cols each of one third :) It's very hard not to speak of layout in html when the whole containers are their for layout.

Regards

Answer 4

The number of columns should stay consistent across all browser sizes; only their width and padding should change. It is however common to reset all columns to 100% width when in mobile, but otherwise they should only shrink, not be dropped entirely. I'd suggest going back to the designer or rejigging your grid to have a multiple that all responses adhere to.

Answer 5

First of all it is better to name a class after its function rather than its physical appearance... for example navigationContainer is a better name than leftContainer, as navigationContainer can exist anywhere on the page.

As far as adapting for different layouts, screen sizes and orientations etc. you will want to make use of the media attribute (or the @media declaration) which will allow you to apply class definitions only to devices and screens meeting certain criteria. Herein lies the benefit of naming classes after function. If you name a class after it's function (like mainContentGrid, then you can redefine the class as many times as you like in all your different media stylesheets. Because in principle only one sheet will be applied depending on the viewing context, your styles will always be appropriate for the viewing context. This eliminates the multiple class problem that you have and cleans up your code.

If you want a more precise opinion, please post some code and I'd be happy to give you my thoughts.

Answer 6

I'm a little lost but I believe your talking about mobile browsers correct? If so @media is your solution.

html,body{
    min-height:100%;
}
.grid-6 {
    width:33%;
    min-height:100%;
    margin:0px;
    display:inline-block;
}

The above will create a column grid similar to the one you have explained. I think? lol Converting these to one column for mobile browsers is easy. Think of @media as a condition. Basically I've written 'if device width <= 480px' which is relative to an iPhone 4gs and below screen.

@media only screen and (device-width:480px){
    .grid-6{
        width:100%;
        display:block;
    }
}

All other styles that are not declared within the @media condition are inherited from the class' above. hope this helped