

The Square Grid - New CSS-Grid - abp
http://thesquaregrid.com/

======
JoelSutherland
CSS grids are trivial to write. They consist of three major declaration types:

.row { width: ?px; clear: left; }

.col-1, .col-2.... { margin: ?px; float: left }

.col-1 { width: ?px; } .col-2 { width: ?px; }

Why do I bring this up? Because it is so simple to write these, it almost
never makes sense to use a framework. If I ever want a grid for a particular
project, I write it custom with a little help from excel.

This allows me to build mini-grid frameworks for whatever container width I
need. This way I don't abandon separation of content from presentation across
a whole site -- just on a particular page.

~~~
slig
Why reinvent the wheel when you can use one known framework(e.g. blueprint)
than will be instantly recognized by other designers?

~~~
points
Why reinvent <table> ?

~~~
wwortiz
You shouldn't, table is not an element that should be banned from the web it
is actually extremely useful. The problem with table is when you use it for
layout it creates some unwieldy markup that it is better to just use css.

Some designers however seem to use divs for tables and it just looks silly and
ends up being overly complicated.

------
CWIZO
I never understood what these CSS "frameworks" are supposed to do for me.
Define the width of the two columns on my page? I just don't get it. This is a
serious question, I'm not mocking/trolling, so I'd appreciate somebody
enlightens me.

edit: thanks for the answers guys. I still don't get it though, it's just a
couple of lines of CSS in this "frameworks". Oh well, I guess I just don't get
it ...

~~~
edanm
I'm a web developer, but not a designer, and not hugely proficient in CSS. I
understand the basics, but it often takes me a while to get things to look the
way I want them.

For me, grid frameworks were a revelation - they let me, for the first time,
quickly lay out the site with very little pain. Using a framework, I sketch
how I'd like the site laid out, and then it's a simple matter of writing a bit
of html and adding a few classes to get the layout I want. Working from zero
is _much_ harder for me.

------
rimantas

      When writing your code simply assign the "sg-" class to
      your box elements.
    

That's why I don't like CSS frameworks: they throw the very idea of separation
of content from presentation out of the window :(

~~~
joshuacc
Could you explain how you think adding a class violates the separation of
content and presentation?

Unless you're building a completely unstyled site, you'll be adding classes
and ids anyway, so what makes using predefined ones wrong?

~~~
philbo
I'm not the OP but I think it is because the class names being used are not
semantic in terms of the content. Instead they contain information about the
layout of the page.

This makes certain types of change messier. For instance, if I have some CSS
class called `quotation` that is used in various pages of my site, I can
change the style of those divs or whatever in one edit of a single CSS file.
However, if instead those elements all have the class name `sg-5` and I want
to change them all to be `sg-7`, I must go and edit every page that contains
instances of said element. And, speaking from personal experience, I will
probably make a mistake or miss some cases when doing so.

~~~
marcusbooster
I appreciate the sentiment, but this doesn't seem as big of a deal now. You
can have a semantically structured page, then using jQuery or more advanced
CSS selectors cherry pick elements and assign classes without touching the
html.

------
jamesteow
I like the fact that more people are trying to incorporate baselines into
their grid. This is another one I found (<http://baselinecss.com/>) but I much
prefer the one in the OP.

~~~
nsfmc
So, this is a neat idea, but the way css is designed (i.e. half-leading model)
makes generalized baseline alignments _completely horrid_ because you end up
doing all these positioning gimmicks based on the exact descender depth of the
font you're using. At that point, you're really designing for the _font_ which
sort of defeats the generality/convenience of css.

I don't think at the time it was designed there was a sense that anybody would
actually want features like actual baseline alignment (i mean, look at the
extent of UILabel's typography options for a good example of this sort of
present-day rationalization) I've nearly given up on having any semblance of
generalized baseline alignment in css like i do in, say, indesign, which
although horrid, at least got that part right.

That said, if you want a good argument against a strict baseline grid i'll
supply one and a half: derek birdsall1's notes on book design[1] and mine:

When i started working through my mfa i had completely drunk the grid kool-aid
from Samsara, Elam, Bringhurst and (natürlich) Müller-B. I was obsessed with
vertical grids and i used them much to my detriment (because i was blindly
plugging away). My shit looked _mechanical_ which is not really me at all.
Then i met another designer who said, in passing: _"who really uses grids? You
make shit look good. When you're done, you tidy it up with a grid_ if the
spirit moves you.* It'll probably already be on _some_ grid, everyone's brain
does that, and your post-rationalized grid's practically ready-made. how cool
is that?"*

Now, this sort of presumes you can _make shit look good_ which is a tall
order, but really it means following your gut and possibly using a grid to
keep it in check. If you start with a fixed grid, you limit many of your
options from the outset because you're trying to fit stuff into these little
squares.

Of course, this takes lots of practice. Practically speaking, grids take much
of the choice out of things. If you need to make something that looks cool
_fast_ , rip one out of Müller-B and plug away. It will look awesome.
Otherwise, loosen up, have some brown liquor and design away until you're
happy or trashed or both.

[1]:
[http://yalepress.yale.edu/yupbooks/book.asp?isbn=97803001034...](http://yalepress.yale.edu/yupbooks/book.asp?isbn=9780300103472)

~~~
jamesteow
I think for a general designer, using a grid is probably the best method
because... it takes a lot of skill to actually break the grid in a method that
is still readable yet a well-styled execution.

I definitely upvote the notion that using a very fixed grid limits options,
especially if one is also working with a vertically fixed grid. If I think
about the most memorable websites, they usually break the grid.

In many ways, you've actually convinced me not to use this grid.

------
sp4rki
I'm an advocate of frameworks, but only for fast prototyping. Nothing beats
designing in the browser using Haml (<http://haml-lang.com/>) and Compass/Sass
(<http://compass-style.org/>) in conjunction with Static Matic
(<http://staticmatic.rubyforge.org/>). Compass has blueprint integrated and
using mixins you can avoid having an un-semantic mess in your Haml/Html.

Truth be told though, I use less and less the blueprint features in Compass
each day. I find grids amazing for Photoshop (I generate a grid like the one
in this thread for every comp) and Keynote/Wireframing/Initial Prototyping (I
use a simple broad grid to do wireframes in Keynote), but really don't belong
on my markup!

------
rgarcia
I'm no web designer, but this looks very similar to 960.gs:
<http://960.gs/demo.html>

~~~
nerdyworm
It's very similar to 960, but this one incorporates a vertical grid.

------
SebMortelmans
I like the idea of designing with a grid in mind (I use the 960 grid for many
of my projects), but I never use the CSS framework to convert it to html. I
just don't see the point, every design is unique and handcoding is always more
perfect/cleaner, yet doesn't take much longer, if at all, to write.

------
bean__
I've been trying to look at this for a week now, it is always down. Maybe it's
blocked outside the US?

------
pxlpshr
one of the issues I have with CSS frameworks is that they typically remove
semantics from the layout.

