2

i've a simple question. I'm learning now webdesign, but i find very difficult having grids based on pixels; the matter is due to responsive elements.

I can't just insert mediaqueries, because images, for example, have to resize for every pixel, not just at the logical breakpoint. So my solution, as simple as possible, will set a width: %; for every column (I'll have 1 or 2 columns, but the images and the content have to resize for every pixel).

Then take Skeleton.. i saw it, but it seems it's the same copy of 960gs except for the mediaqueries... and it's still the same problem.

I can think that 960gs could solve problems just in a big site where you have many elements (3-4 columns) and you don't need to increase or resize their widths (for example for the max logical breakpoint at 1024, for example, u don't need another space for the columns, you just do a margin: 0 auto; for centering the whole site).

So, what do you think? I need an advice. Thank you.

EDIT:: a code sample (i said it was just 2 columns)

<header>
some social media pixtures
</header>

<nav>
logo and menu
</nav>

<aside>
pictures
</aside>

<section>
some articles
</section>

<footer>
copyright and about me
</footer>
FrancescoN
  • 2,146
  • 12
  • 34
  • 45
  • For images, you could set both a `width: 100%` and a max-width of whatever you want. Every element can be resized without much issue. – Chad Sep 25 '13 at 14:28
  • anyway i was asking when it would be useful using 960gs and skeleton and why – FrancescoN Sep 25 '13 at 14:59
  • @Chad: yes i know it... but you need also to set the column's width. And i want the images resized every time i resize the window. So why using a stylesheet with a pixel grid system if i work on responsive elements (that need % width)? That's my question. It would be the same thing using Meyer's stylesheet and writing by myself resposive rules. – FrancescoN Sep 25 '13 at 15:14

1 Answers1

2

960gs has been succeeded by Unsemantic. See: http://unsemantic.com/. The Unsemantic framework uses precentages for column widths and as percentages are relative to the container width, they are better suited to be used in reponsive grids.

Some small advice: use the grid system to specify your lay-out columns, instead of applying column widths to specific elements such as news lists, forms, images, etc. This allows the elements within the column to automatically gain their width via the column width itself.

iainvdw
  • 684
  • 5
  • 7
  • yes of course, the width would be applied to the DIV, the containers. But i still don't believe 960 and Skeleton are so popular... we are in the era of responsive design.. WHY using pixel based stylesheet??!! – FrancescoN Sep 25 '13 at 16:04
  • 1
    You are right, mostly. 960gs has fixed pixel-based widths, but the latest version of Skeleton is already suited to responsive web design. *edit* I see what you mean, you mean pixel-based grids vs fluid percentage-based grids. I believe pixel-based grids are easier as you have much more control over the width and lay-out of your page and elements. With fluid grids, you need to check you design every pixel down the way from your maximum width and check if it's still suited for that resolution. – iainvdw Sep 26 '13 at 06:43
  • I agree with you. But when you have 2 columns on a laptop screen that change into just 1 column on a smartphone, imho it's better to have 2 fluid columns, a **float** attribute and a **max-width** for every column. That's all i would need. **960gs** would force me using those grids, so i would replace **width** with **max-width** and adding a fluid **width**. It is like i didn't use 960. Anyway Unsemantic it's for me, thank you. :) – FrancescoN Sep 26 '13 at 15:32