2

Is there a responsive grid system in Magento's new 1.9 RWD theme?

If this new theme is not using a grid system how is the theme responsive?

I've looked through the CSS & SCSS & I can't find one?

  • 1
    Please define "grid system" and share how and where you've looked specifically. Can you share some background how your skills are with grid systems in general so your question has some context? – hakre Jul 16 '14 at 16:54
  • I'm assuming the grid system referred is 960.gs and you may want to read the related post by the RWD theme author himself: magento.stackexchange.com/a/21079/69 – B00MER Jul 16 '14 at 17:40
5

No, there is not a responsive grid system in the new CE 1.9/EE 1.14 RWD theme unfortunately. Grid systems create a number of reusable classes often named using numbers for the amount of columns available, for example in a 12 column grid a grid system will often use something like .col1, .col2, .... .col12 each corresponding to a fixed (px) or fluid (%) width. It then adds media queries to tell those numbered columns when to become full width of the screen a.k.a when to "stack" vertically.

The RWD theme instead takes what I would call an "as needed" approach meaning when an element needs to change its width based on screen size it is listed out individually in the CSS.

For example in styles.css:

@media only screen and (max-width: 770px) {
  .col2-set .buttons-set .button,
  .col2-set .buttons-set .button2 {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

While there is debate about using a grid system for the entire layout of a Magento site if you are building a new responsive theme based on RWD you most likely will benefit from a grid system if your design will use a number of CMS pages.

You can use any grid system out there but I would recommend going with the smallest and simplest solution possible. One option is: http://www.responsivegridsystem.com/calculator/

Choose the number of columns you want (12 is most likely the popular choice) and your margin. The calculator will produce the CSS you need for a small light weight grid system. This one uses 480px as its only break point but you can easily customize this in the CSS and add additional break points as your design requires.

You can choose to place this in your own CSS file (and then load it only on the pages you require it on) or add it to an existing CSS file depending on your organizational preferences.

  • I agree grid systems add loads of useful classes for working with on both custom templates & cms pages. It's a pity it was left out of the Magento rwd them. The grid system tool is very useful – Holly Sep 10 '14 at 9:12
  • 1
    A minor update: the Responsive Grid System uses a class called 'section' that is also used in Magento 1.9's stylesheet so you will want to rename the Responsive Grid System's identifier from '.section' to something else for example '.rgs-section' and use that in any of the grid system HTML you write – Jason Tipton Sep 18 '14 at 17:28
  • 1
    @CreedBratton This post got me thinking more and more about building Magento with a responsive grid system. Its taken a few months but here is a Magento theme built with Gumby Framework. github.com/jasontipton/Magento-Gumby – Jason Tipton Feb 3 '15 at 4:53
  • nice work. I hope to use this in my next project :) – Holly Feb 3 '15 at 14:20
1

The Magento RWD theme is not built on an existing framework such as Bootstrap/Foundation or responsive grid system such as Unsemantic/Golden Grid System.

The main place where grids are used in the Magento RWD theme is the product listing page. You can see the Sass for this in skin/frontend/rwd/default/scss/module/_product-list.scss.

If you want to implement a custom grid system in your theme, you can either write the basic Sass/CSS required to do this. A quick Google search will turn up a number of simple responsive grid structures. Alternatively, you can use a responsive grid system, although this is often overkill for most applications.

  • Thanks @eric. I've added a custom grid system myself which is very light weight but am wondering if this is the best approach as the theme does not use it itself? I see that the theme uses mixins, are these used to make <div>s responsive in a similar way to a grid system or is javascript used more for this? – Holly Jul 17 '14 at 7:50
0

Based on several opinions within the industry, including my own, grid systems within Magento isn't always a good idea. There was a great talk from the MD of Meanbee at Magento Live UK this year on responsive design and he touched on grid systems.

  • 1
    Thanks @Luke can you expand, why isn't a grid system suitable for Magento? How does does the rwd theme make html elements responsive if not through a grid system? – Holly Jul 17 '14 at 7:21
  • 1
    @Creed Bratton the Magento RWD theme uses EnquireJS to check the display width, using a media query check via JS. And then it adds classes or hides specific elements based on the width. Even appending and prepending elements around based on the display width. It also uses hard coded media queries in the CSS, but is minimal. The file is in /skin/frontend/rwd/default/js/app.js – Jonathan Marzullo May 26 '15 at 19:27
0

There are a few SASS grid systems out there with settings, mixins etc to add to your Magento 1.9 theme based on the rwd theme such as gridle: http://gridle.org/ or you can opt like I do to create your own simple grid system from your own partials.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.