Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Square Grid - New CSS-Grid

thesquaregrid.com

Post reply on HN
Print view View original

21–30 of 33 posts

Re: The Square Grid - New CSS-Grid

#21

Post by philbo »

joshuacc wrote: post #17
rimantas wrote: post #7

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 :(

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?

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.

Re: The Square Grid - New CSS-Grid

#23

Post by vladocar »

CWIZO wrote: post #8

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

CSS Frameworks are especially useful when you have multi layout page. With few lines of CSS code you can have some complex layout. Other thing is reusability write once use it many times. Here is what you can do with one line of CSS http://www.vcarrer.com/2009/06/1-line-css-grid-framework.htm...

Re: The Square Grid - New CSS-Grid

#24

Post by 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!

Re: The Square Grid - New CSS-Grid

#25

Post by gurraman »

CWIZO wrote: post #8

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

The frameworks are great for mocking sites up: instead of modifying CSS for every layout you test the framework gives you a few classes with sane defaults that you can easily switch between to align and re-align your columns.

My typical workflow is to include a stylesheet that defines a basic grid and use that when working on the design. Towards deployment I write the grid to my main stylesheet using the elements' proper class-names and ids.

Re: The Square Grid - New CSS-Grid

#26

Post by catshirt »

slig wrote: post #18
JoelSutherland wrote: post #15

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…

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

Firstly, the likelihood alone that any given CSS designer who follows up on your project actually understands the framework is not high. These frameworks make a very small subset of CSS people write. Certainly not a large enough subset for you to make that assumption by any means.

Secondly, this is a poor analogy because we're talking about 3 CSS classes- by no means a "wheel". I am curious as to what circumstances you would really save any measurable time using a CSS framework.

Re: The Square Grid - New CSS-Grid

#27

Post by points »

slig wrote: post #18
JoelSutherland wrote: post #15

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…

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

Why reinvent ?

Re: The Square Grid - New CSS-Grid

#28

Post by JJMalina »

JoelSutherland wrote: post #15

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…

CSS frameworks are especially useful when you're using Sass & Compass (compass-style.org) because you can completely bypass having to add all these ugly and tedious class names to your HTML. Instead you can make a few mixins out of the framework's code and stick them right into your css. Your HTML & CSS will be semantically cleaner and easier to maintain if you want to make changes in the future.

Re: The Square Grid - New CSS-Grid

#29

Post by jamesteow »

nsfmc wrote: post #20
jamesteow wrote: post #2

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.

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…

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.

Re: The Square Grid - New CSS-Grid

#30

Post by marcusbooster »

philbo wrote: post #21
joshuacc wrote: post #17

Earlier quoted context omitted.

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?

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…

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.
Post reply on HN