

Columnal: a fluid CSS grid, that scales from widescreen laptops down to phones - benatkin
http://www.columnal.com/

======
mistrQ
I'm really trying to understand whether grids are relevant to me as a web dev.
I've been looking for good boilerplate code for a long time now and haven't
been able to extract any from my own work as all the sites I've worked on
differ quite significantly.

Why would anyone want presentational classes in their html? The whole point of
the semantic/presentational separation of html/css is so that I don't need to
touch the html when I want to make a presentational change. This is a
backwards step.

Does anyone know of a responsive css framework that doesn't require me to mess
with my html?

~~~
barkingcat
Of course grids are relevant to you as a web dev - they are basic graphic
design principles. Whether you should use any of the grid "frameworks", is
another matter all together.

Once you learn how grids work (ie in the layout of graphics and text elements)
- you can make your own grids and not bother with the frameworks or template
code, etc.

~~~
mistrQ
I meant to say "grid frameworks".

Of course grids are highly relevant to design. My problem is with the grid
frameworks that are bulky with preset classes that expect me to use in my
html.

I don't think it's relevant in my html whether a div is 2 columns or 8, that's
presentational. Why can't someone make a framework that has clean standard
html and a css file with lots of boilerplate grid code that I can use to apply
to certain divs in my html?

When I want to make a change to the appearance of my page then I go into the
CSS file, not mess around applying classes to my div's in my HTML file. That
was kind of the point of CSS in the first place.

------
chetan51
Just curious, what's the currently most popular responsive CSS framework that
scales down to phones like this one?

~~~
chetan51
To answer my own question, it's looking like 1440 (<http://cssgrid.net/>).

------
moe
Oh great, a responsive CSS framework...

Could elaborate on why you created yet another one instead of going with MQ,
Less, AnonAnon, Cabin, Gravity, 1140grid, Sass/Susy, Inuit or Skeleton?

~~~
benatkin
First, I didn't write this, I just found it and submitted it because I thought
it was cool.

I didn't have time to check all of them to see how this differs, but I
compared it to 1140grid and found that Columnar uses numerals instead of
spelled-out numbers (i. e. 8 instead of eight) in class names and that it has
more IE6 hacks. That's enough difference IMO to write a new one, and I'm sure
I could find more material differences in a more thorough examination.

Also the market isn't saturated for fluid CSS frameworks (not even close) so
if someone makes a nice website for one and can get more people to use it, I
think it's a good contribution to the web!

------
highace
I don't get why they all invent different naming conventions. We all grew up
on 960gs, _container_12_ and _grid_1_. It worked well so just extend it. I
don't want to have to switch to _col_1 end_ , _column_one_ or _fivecol_ for
something so fundamentally simple.

------
mmariani
The code looks clean, it's easy to use, and most importantly it really works.

And it works really well on my MacBook Pro 17" with Safari in full screen down
to my iPhone.

Looks like I'm gonna try it on my next blog.

~~~
rimantas
No code with stuff like

    
    
      class="col_1"
    

will ever be "clean" to me.

------
johanbrook
Hooray, another responsive CSS grid framework. Not being negative, but most of
them are very similar, and I often prefer rolling my own depending on the
site's content and needs.

It's however very interesting to study these frameworks' underlying code to
see how they solve things.

~~~
mark_story
Why roll your own everytime? Doing the same thing over and over, seems like a
problem these type of frameworks solve.

~~~
johanbrook
Since it often gives me the great level of control I want. As I stated, CSS
frameworks often works the same way, and I've yet to find one that is good
enough to convince me to spend time using it. "Hell is other people's HTML and
CSS", you know.

------
yayadarsh
Sounds very interesting, and I like the site. Excited to try it out in the
upcoming week and test the "responsive design" aspect on my tablet and mobile
phone.

------
Inversechi
This most certainly looks interesting. Currently been experimenting with
Adapt.js and this looks like a much better solution for my needs.

------
purephase
Thanks for posting this. I'm still using 960, but the ability to scale down to
phones sounds nice. I'll have to check this out.

------
Joakal
Does responsive design still suck on phones I hear [0]? eg downloading
desktop-aimed images even though it's set to display:none.

[0] [http://www.cloudfour.com/css-media-query-for-mobile-is-
fools...](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/)

~~~
threepointone
That'll be the case if you put all your css into one file. Here's a suggestion
- \- Separate your css into layout and style files. \- Further separate your
style into ones targeted for - different targets - dektop, mobile, IE-specific
(so you can use MHTML if you want, etc) \- Use a script to compile these
together into packages. \- Use a line of javascript to load the specific
target based css.

Sure it sounds like some extra work, but if you're looking to optimize what
gets loaded, it might be worth it.

HTH.

------
kooshball
how come the text doesnt resize as i zoom in and out?

~~~
etcet
because body { -webkit-text-size-adjust: none; }, now the question is, why
apply this rule?

------
danso
Of the fluid frameworks, I've only used 1140grid. My quick reading of columnal
suggests that it has a similar concept (".col_1" instead of "onecol") but has
the extra functionality of prefix and suffix styles from 960
<http://www.columnal.com/#markupcode>

~~~
benatkin
I've looked into lessframework.com and played with it, but stopped short of
building something with it. I really like how columnar simplifies it, by
having two layouts. One is the 12-column layout that scales up and down within
a desktop screen range where the difference is just small enough that it's
acceptable. The other is single-column mobile layout. Less Framework, on the
other hand, can show different layouts based on whether it's a wide screen, a
tablet, or a phone. I didn't really know where to begin. Looking back, I think
that was the main reason I didn't decide to use Less Framework.

------
resposivefail
Simply doesnt work on android/SGS.

~~~
swatthatfly
I tried it on 3 different Android phones, with various resolutions, and it
worked nicely. Did not use a Samsung, but HTC and LG phones seem to display it
fine.

