search

markahesketh / Prestashop-Theme-Boilerplate

A boilerplate 'blank slate' theme for Prestashop
97 stars 28 forks source link

Remove and replace current grid system #4

Open markahesketh opened 12 years ago

markahesketh commented 12 years ago

The current grid system relies on many classes such as 'grid_4' and 'omega'.

Replace these system and classes with something more semantic and flexible.

alexsegura commented 12 years ago

Those are the CSS selector of 960 Grid System

Flexible for sure, with naming conventions for sure, but do you think CSS selectors really need to be semantic ?

markahesketh commented 12 years ago

Hi Alex,

Semantic classes make it very easy to tell why they're there, either a reference for CSS or a hook for JS etc.

My intention is to remove 960gs completely, replacing it with a LESS/SASS solution similar to http://semantic.gs/.

My opinion on 960gs and similar is that they're great for designing and prototyping, but when it comes to the actual production markup its just too messy to have so many classes.

Evanion commented 12 years ago

I would like to recommend frameless for a good responsive grid: http://framelessgrid.com/ Both SASS (I prefer sass) and LESS versions are available.

markahesketh commented 12 years ago

I think whichever grid system/pre-processor is used there should definitely be both SASS and LESS versions included, like many projects do.

I like the look of Frameless, any grid that doesn't require hundreds of ugly col_x classes is welcome in my opinion.

My only 'issue' would be that Frameless isn't fluid I think? Never used it myself, do you use it regularly? How does it work with things like resizing images?

Evanion commented 12 years ago

well, I prefer fixed-width and instead work with media queries, the once I included covers most, and is used by YOOtheme.com for their Warp framework (I added 1 extra rule). As for images, you only need a css class that targets images in #content/#center_column with max-width 10% and height auto. That will make the images always follow the current size of the container the images is in.

The css can be placed in a auto-size markup class if you don't want all images to be responsive. That way the user have to add the class to all images he wants responsive.

Frameless is the best gridsystem that I have found so far. Fluid width grids tend to add more complexity, and unpredictability to a design.

I have worked with many gridsystems in the past, 960.gs, blueprint, skeleton...

I'm all for optimizing a design for more visitors, but somewhere you just have to put a line. Some users might come in with a minimal screen running windows xp, and IE 7... but then let them deal with it. The template is aimed at webshops, and webshops are used by avereage joes that have a medium ammount of cash to spend, they tend to have an average setup, with moderately modern software.

One of our customers runs a webshop selling haircare products, mostly female visitors, not really tech savy people, and this is the google analytics from his site (included mobile devices):

  1. 320x480 17.23%
  2. 1280x800 16.62%
  3. 1366x768 16.29%
  4. 1920x1080 5.72%
  5. 1440x900 5.42%
  6. 1680x1050 5.16%
  7. 1280x1024 5.10%
  8. 768x1024 4.33%
  9. 1024x768 3.15%
  10. 1600x900 2.19%

A rule of thumb is that, anything bellow 5% can be ignored. As long as we design for mobiles and tablets in portrait and landscape mode as well as 1-3 desktop groups... it will satisfy 97%+ of the visitors.

Evanion commented 12 years ago

Frameless is em based and not px. so thats a +. Em isn't that hard to work with once you learn that 1em = 16px.

markahesketh commented 12 years ago

Awesome, thanks for the info.

The reason I like fluid grids is that I don't always have the browser width full screened. This means if I have the browser 70% of my screen's width the design adapts to it right down to the pixel, rather than 4 or 5 set widths.

I think SASS/LESS take a lot of the complexity out of fluid grids, as the mixins will take care of all the heavy maths to calculate percentages. WIth Semantic GS for instance, you tell it you want a 4 column width (.grid(4) I think would be the LESS style), and it'll work out the percentage based on its parent.

I haven't added an media queries to the less-styles branch just yet, i've more been focusing on overriding the modules which turned out to be a bigger job than I expected!

I'll definitely take a look at Frameless though. Have you looked at Golden Grid? That looks like its by the same guy but fluid?

Evanion commented 12 years ago

I've been on the site, reading about it... never actually tried to build anything in it. @work I'm on a 27" iMac, and usually have the browser on 50% of the screen, and coda on the other side, that's about the same width as a 13" laptop. @home i'm on a 20" screen, with the browser about 80% of the screen.

As long as I design 1000px+ width as laptop/desktop and anything below that as tablets and mobiles, i find that people are generally fine with it.