Columnal: a fluid CSS grid, that scales from widescreen laptops down to phones

http://www.columnal.com/

by benatkin • 15 years ago

108 26 15 years ago

yayadarsh• 15 years ago

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• 15 years ago

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

mmariani• 15 years ago

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• 15 years ago

No code with stuff like

  class="col_1"

will ever be "clean" to me.

moe• 15 years ago

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?

benatkin2• 15 years ago

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!

danso• 15 years ago

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

benatkin2• 15 years ago

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.

purephase• 15 years ago

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.

johanbrook2• 15 years ago

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• 15 years ago

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

johanbrook2• 15 years ago

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.

chetan512• 15 years ago

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

chetan512• 15 years ago

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

mistrQ2• 15 years ago

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?

bullsbarry• 15 years ago

At the end of the day, CSS frameworks like this generally aren't as useful for web developers as they are for developers like me who don't do web development full time an just want something that takes the pain away. The reason you don't see a need for it is because you're not the target audience for most of these frameworks.

aberkowitz• 15 years ago

Grid Frameworks are for the frontend developer who wants to spend as little time as possible dealing with alignment of content.

barkingcat• 15 years ago

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.

mistrQ2• 15 years ago

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.

highace• 15 years ago

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.

Joakal• 15 years ago

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...

threepointone• 15 years ago

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• 15 years ago

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

etcet• 15 years ago

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

resposivefail• 15 years ago

Simply doesnt work on android/SGS.

swatthatfly• 15 years ago

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.

Columnal: a fluid CSS grid, that scales from widescreen laptops down to phones

Related Stories