19 replies [Last post]
themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

Hi,

Inspired by 960 Grid and 1 Kb Grid, I started working on a fluid CSS grid I call The Master Grid. The two advantages my grid provides are 1) it allows fluid, nested rows, and 2) it allows fixed columns next to fluid columns.

Examples of how to use the grid is here: http://www.themasterblog.com/master-grid/
and the CSS is here: http://www.themasterblog.com/the-master-grid.css

I can't seem to make it work for IE6. I tried adding display:inline to the .column CSS rule, but that seems to break the fluid layout.

My questions to you CSS gurus on here are:
1) Do you know of any fluid CSS grids that allow nested rows? I really need this feature on the grid for a site I am working on, and would like to take a look at those grids for reference.

2) Do you know if fluid, nested rows is even possible in IE6, perhaps using an obscure CSS hack?

Thank you all in advance,

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Personally I think that

Personally I think that templating is a really bad idea where CSS layouts are concerned and reduces it to something rather banal that attract people that can't be arsed to put effort into learning something, use a template realise it's too complicated to adjust and come running to us to fix Smile

Sorry realise that is of no help at all, I could look and perhaps come up with some help a bit later if no one else has any answers.

Probably just need hasLayout somewhere; shove zoom:1; here there and everywhere to test.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

I have to disagree

Thank you for you reply, but I have to disagree that templates are a bad idea. I personally believe that CSS layout templates are to design what frameworks are to programming. Using such templates, like using a framework, simply speeds up development. Rather than having to figure out what CSS rules are necessary every time you start a new layout, you can use a built template that is tested and proven to work on all major browsers.

With that said, this is the whole reason why I ask for some feedback regarding this particular fluid grid. Regardless of how many "features" a grid provides, it's useless if it only works on selected browsers. I have tried making it work on IE6, but haven't succeeded. Maybe all I need is another pair of eyes that can identify what's missing.

I agree, however, that using somebody else's pre-built code, which will hide many details of how things work, prevents you from learning. Nevertheless, when it comes to using someone else's code there are two types of people: the ones who just use the code as-is, and the ones who study the code and learn what it does in order to improve it. In my case, this is what I'm doing by attempting to create this fluid grid.

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:Rather than having to

Quote:

Rather than having to figure out what CSS rules are necessary every time you start a new layout, you can use a built template that is tested and proven to work on all major browsers.

It's for lazy people Smile what is so difficult about having to figure out what CSS is required that's what the job and skill is about. If you template things it just takes the work out of it you simply start dumbing things down. So what's left? You then use a JS library, pre built plugins for it, backend scripts pre written by someone, and before you know it you haven't had to code a dam thing Smile but hey that's the way things are heading.

You simply can't have a pre made template to suit all layouts it's a daft notion and simply detracts from the craft.

Regardless and back to your issue I do see a lot of elements that in IE6 terms would not necessarily have hasLayout triggered so that would be a place to start.

Why are you concerned with IE6 though I notice that your own site breaks when viewed in IE6 so are you that concerned?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

As I suspected triggering

As I suspected triggering hasLayout for certain elements:

.column

.suffix_6

.column_container

certainly helps stabilise the fixed-right-column-layout-grid_files example.

In looking further into the styles prompts the other reason I don't like frameworks, these rulesets are all but incomprehensible (this is not meant offensively!) no one below expert level is ever going to be able to grasp them let alone edit if necessary, and even with experience the rulesets simply do not follow any notion of best practices but I find that common to these frameworks.

Why have you got .column described twice and .column-container described many times, what for it's simply confusing.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

Thank you Hugo

Thank you Hugo for taking the time to look at my code.

Regarding the question you posed:

Hugo wrote:

what is so difficult about having to figure out what CSS is required that's what the job and skill is about.

It's not difficult to figure the CSS every time you start a new website, it's only time consuming, especially if you have to check that the CSS you wrote is compatible on multiple browsers. I'm not sure if you have a programming background, but even if you don't, you might understand this analogy.

When programming, every time you need to do a task on your code, you don't rewrite it over and over. Instead, you encapsulate the lines of code needed for that task in a function so you can just reference it every time it's needed. Furthermore, you encapsulate a whole set of functions into libraries, and programming languages with rich libraries improve development time.

Therefore, skill, when it comes to development of a site, is not only measured by the ability to write code from scratch off the top of your head. Following good coding practices, for instance, is another, and code reuse should be followed as much as possible.

Lastly, you mention that a template to suit all layouts is not possible. This may be the case, but the reason for it is that browsers do not follow standards. Therefore, the challenge is finding those lines of code that will make a template to suit all layouts possible. And if achieved, to me that's having skill.

themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

Awesome, Hugo.

Awesome, Hugo. Thanks so much for your help.

I knew some rules were missing on a few places, I just couldn't figure out which ones.

About the incomprehensibility of the rules, you are absolutely correct. The reason that happens, though, is because I combined some selectors to reduce file size. I think that when making decisions regarding code, there is always a trade-off. The trade-off here being reduced readability versus file size. If I had kept each CSS selector separately, perhaps even added comments on what certain rules accomplish, beginners would be able to understand the code. Readability would be increased, but also file size. Anyway, this discussion is best suited for another topic.

I will, however, revise my CSS and take your comments into consideration. Perhaps I can find a suitable balance so that my code is both comprehensible and lightweight.

Thanks again!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ok we will transgress from

Ok we will transgress from the original topic somewhat nowbut it's interesting enough to warrant it?

Yes I have more than a passing understanding of what I would prefer to term scripting languages as I don't hold with referring to web languages such as PHP, ColdFusion, javaScript as programming languages, they're interpreted languages but that is a digression too far.

It is true that 'Programming' does involve a lot of patterns, frameworks, whether we are talking about MVC OOP etc and that there is good reason for writing re-usable code DRY, and indeed I do that where my merge abilities allow, but always have these concerns foremost in my mind. Where frontend coding is concerned I do not find that these same notions are directly transferable; I have found though that programmers not that familiar with site creation and frontend coding can tend to feel lost and have the need to bring this structure to something that they don't fully grasp and think it's what it lacks. CSS is in many ways not a simple concept and it is in many ways very conceptual, it's rules are few and it's deceptively simple to use at a basic level but that, i think, throws people used to frameworks and strict methodology.

I will concede though that it's interesting to try and impose this type of structure and it gets me thinking which I always like Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Important Note!

Almost forgot to mention this, when looking at that example layout, I noticed it had A BOM mark at the start of the file, You might want to quickly check how your files are being saved as this can cause issues for IE6 and standards mode rendering.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DivaVocals
Offline
Regular
Last seen: 11 years 52 weeks ago
Timezone: GMT-8
Joined: 2008-01-20
Posts: 12
Points: 2

Need clarification...

Interesting.. I've been reading your work, and do have 1 question..

What's the difference bewtween what you are trying to do with the Master Grid and the sample tableless layouts available on the CSSPlay site:
.
http://www.cssplay.co.uk/layouts/three-column-layouts.html
.

CSSPlay Site wrote:

Above are the three column layouts most asked for over the past few years. Whilst there is nothing new in these, they do offer simplicity of stylesheets and no use of images to make it look as though the columns are full height. All columns will be equal heights no matter how much content is in each column.
.
The all have full height columns that will stay in shape when the browser window is resized and have been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome.

.
It almost appears that these are both very similar.. Hoping you can clarify how these differ..
.
.
.

themasterblogger wrote:

Hi,

Inspired by 960 Grid and 1 Kb Grid, I started working on a fluid CSS grid I call The Master Grid. The two advantages my grid provides are 1) it allows fluid, nested rows, and 2) it allows fixed columns next to fluid columns.

Examples of how to use the grid is here: http://www.themasterblog.com/master-grid/
and the CSS is here: http://www.themasterblog.com/the-master-grid.css

I can't seem to make it work for IE6. I tried adding display:inline to the .column CSS rule, but that seems to break the fluid layout.

My questions to you CSS gurus on here are:
1) Do you know of any fluid CSS grids that allow nested rows? I really need this feature on the grid for a site I am working on, and would like to take a look at those grids for reference.

2) Do you know if fluid, nested rows is even possible in IE6, perhaps using an obscure CSS hack?

Thank you all in advance,

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

personally I thought it

personally I thought it rather similar to [url="http://www.alistapart.com/articles/fluidgrids"]this[/url].

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DivaVocals
Offline
Regular
Last seen: 11 years 52 weeks ago
Timezone: GMT-8
Joined: 2008-01-20
Posts: 12
Points: 2

Hugo wrote:personally I

Hugo wrote:

personally I thought it rather similar to [url="http://www.alistapart.com/articles/fluidgrids"]this[/url].

I gathered that from the OPs original post (and I read up on his/her supporting inspirations).. I'm just trying to understand the differences between the OPs Master Grid and what I found on the CSSPlay site (or any other of these framework sites)..

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The differences depend on

The differences depend on your own perspective. OPs master grid is like an adjustable wrench. CSSPlay like a set of spanners.

CSS is closer to graphic design than any other part of the web page / web application. Each graphic design needs to be different to stand out from all the others. Elements of that design might be common, say a font set or a colour scheme, but the overall design needs to be different. In many ways that makes CSS ill-suited to a one size fits all type of solution. Or, as Hugo emphasizes, you end up with a group of websites that look samey - who can't spot a wordpress site a mile off?

DivaVocals
Offline
Regular
Last seen: 11 years 52 weeks ago
Timezone: GMT-8
Joined: 2008-01-20
Posts: 12
Points: 2

Chris..S wrote:who can't

Chris..S wrote:

who can't spot a wordpress site a mile off?

Perhaps, but the same could be said for a lot of these open source (or similar commercial) solutions.. (OS Commerce, Zen Cart, Cube Cart, Z-Cart, Joomla, Mambo, etc..) This is what happens when end users of these solutions are DIYers who look at these solutions as a means to an end.. Apply template, add graphics, present to the world.. IMO many DIYers assume that because these solutions are free and downloadable that they are a turnkey solution.. As a result, very few DIYers use these solutions as as a PLACE TO START versus as a final solution.. As long as folks churn out these free and unimaginative variations of the solutions base templates, and as long as companies like Template Monster exist, DIYers will continue to churn out sites that look like variations of the base templates..
.

Chris..S wrote:

The differences depend on your own perspective. OPs master grid is like an adjustable wrench. CSSPlay like a set of spanners.

CSS is closer to graphic design than any other part of the web page / web application. Each graphic design needs to be different to stand out from all the others. Elements of that design might be common, say a font set or a colour scheme, but the overall design needs to be different. In many ways that makes CSS ill-suited to a one size fits all type of solution. Or, as Hugo emphasizes, you end up with a group of websites that look samey - who can't spot a wordpress site a mile off?

Tool analogies huh??? Something a car girl can understand.. :thumbsup:

.
.

With regards to the highlighted part above.. I guess that depends on if you are looking for a "template" which only requires that you simply change a few things here and there (like logos, colors and such..) to "make it your own". or if you are looking for a basic framework as a foundation to build something original upon..

I saw both Master Grid and offerings on CSSPlay as being like other frameworks I've seen around the net.. I look at these things as something to help inspire and build upon, not simply a "insert your name here" kind of thing (AKA the "one size fits all solution")..

I guess what I was after was to see see if there was something new being introduced in the Master Grid that isn't available in other frameworks.. (including the ones that inspired the Master Grid..) Hence my question..
.

Anyway.. Carry on.. I've bookmarked the OPs page..

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well regardless of whether

Well regardless of whether one makes the distinction between 'Templates' & 'Frameworks' they are in truth of the same stable, the same core concept; do a degree of work so the end user doesn't have to.

Why does one need a Framework? Frameworks are as old as the hills in reality. Layouts such as the 'The One True Layout', 'P.I.E Piefecta' and countless others were read by the majority of us and probably helped enormously with our understanding of the craft, but speaking personally I have never used one as a starting point. What they did help with was an understanding things such as the approaches one may take to say source ordering and a layout at P.I.E was iirc the first to really demonstrate the notion of source ordering page elements and in this respect were great to read and understand, but it never crossed my mind that one would use that example lock stock.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DivaVocals
Offline
Regular
Last seen: 11 years 52 weeks ago
Timezone: GMT-8
Joined: 2008-01-20
Posts: 12
Points: 2

Different strokes is all I have to say..

For me, it's simple.. If someone wants to use or create a framework/template, and others want to use it so be it.. Perhaps you are not a fan of frameworks or templates.. But clearly not everyone shares this opinion, and honestly, that should be okay.. Right??? Smile
.
I think we're saying basically the same thing here, but I acknowledge that we clearly disagree on HOW these framework/templates should be used..
.
Different strokes is all I have to say on that.. I personally don't take positions on these kinds of things because at the end of the day I am really not concerned with HOW something gets done (write the CSS VS use a framework/template as a starting point), or even how OTHER people approach solving a problem.. I am only interested in the end result, and that it is properly executed..

    ~ I don't see ANYTHING wrong with making use of frameworks/templates to help one formulate a solution to a problem. -- Perhaps you assumed I meant by this using them "lock stock", but I didn't. However that said, I guess I'm also just not a big believer in reinventing the wheel.. What you see as being lazy is what some of us look at as being resourceful.. If using frameworks/templates as a foundation/starting point/guide is the same as using them "lock stock" then we will have to agree to disagree.. :rolleyes:
    .
    ~ I also don't see anything wrong with anyone who creates a website and uses a frameworks/templates "lock stock" to design it -- while it may not be my cup of tea to work this way, I can't concern myself with how others use these things -- I see a LOT of DIYers who use these frameworks/templates this way, and I get why they do it.. Most of these DIYers don't think they need a professional webdesigners.. they've got a template.. so they think they can do it themselves.. and god bless 'em.. it's the internet -- I can't expect everyone to "get it".. Like I said different strokes..
Hugo wrote:

Well regardless of whether one makes the distinction between 'Templates' & 'Frameworks' they are in truth of the same stable, the same core concept; do a degree of work so the end user doesn't have to.

Why does one need a Framework? Frameworks are as old as the hills in reality. Layouts such as the 'The One True Layout', 'P.I.E Piefecta' and countless others were read by the majority of us and probably helped enormously with our understanding of the craft, but speaking personally I have never used one as a starting point. What they did help with was an understanding things such as the approaches one may take to say source ordering and a layout at P.I.E was iirc the first to really demonstrate the notion of source ordering page elements and in this respect were great to read and understand, but it never crossed my mind that one would use that example lock stock.

themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

DivaVocals wrote: It almost

DivaVocals wrote:

It almost appears that these are both very similar.. Hoping you can clarify how these differ..

To answer your question, DivaVocals, I don't think my grid is similar to the link you provided. That link you provided reminds me more of Yahoo's YUI Grid: http://developer.yahoo.com/yui/grids/builder/

Yahoo's YUI Grid, as with the link you provided, is the type of grid you have to visit the site to generate the new layout. To me, this is somewhat cumbersome.

The reason I like 960 Grid and 1KbGrid, which is what inspired me to write my own, is that you basically learn the CSS class names the grid uses and the markup structure they require to practically create any layout as you are writing the HTML. To me this gives you a lot of power in design. Additionally, in my experience, I always design websites in Photoshop and proceed to slice the design to turn it into HTML. Therefore, the advantage of using a grid, in my opinion, is that as I write the HTML, adding a predefined set of class names to my HTML div tags will create the layout I require without the extra work of ensuring that a certain div floats properly in all browsers. To me using a grid is a matter of being efficient, not lazy.

I understand my idea isn't all that original, there are grids and templates out there by the dozens. Lately, however, I've had the need to create websites with a fluid layout. It seems this is becoming popular since wide screen monitors are being used in greater numbers. With the CSS grids I know about, none were able to create fluid, nested rows. This is what I feel makes my grid unique, and that fact that it's, like Chris..S mentioned, like an adjustable wrench.

Therefore, when I was able to create a grid that allowed for practically any layout, including fixed-width columns next to fluid columns, I was very happy. I'm glad some of you share my interest in grids, even if some of you feel that grids aren't all that useful.

I hope this answers your question as to how my grid is different.

Thanks!

DivaVocals
Offline
Regular
Last seen: 11 years 52 weeks ago
Timezone: GMT-8
Joined: 2008-01-20
Posts: 12
Points: 2

BTW when I said similar I

BTW when I said similar I meant that I was trying to get a sense for WHY your grid was different.. There's a LOT of them out there as you pointed out.. So I appreciate the response.. I agree with you that your work "is a matter of being efficient, not lazy"..

I have bookmarked your site.. Carry on.. Smile

themasterblogger wrote:
DivaVocals wrote:

It almost appears that these are both very similar.. Hoping you can clarify how these differ..

To answer your question, DivaVocals, I don't think my grid is similar to the link you provided. That link you provided reminds me more of Yahoo's YUI Grid: http://developer.yahoo.com/yui/grids/builder/

Yahoo's YUI Grid, as with the link you provided, is the type of grid you have to visit the site to generate the new layout. To me, this is somewhat cumbersome.

The reason I like 960 Grid and 1KbGrid, which is what inspired me to write my own, is that you basically learn the CSS class names the grid uses and the markup structure they require to practically create any layout as you are writing the HTML. To me this gives you a lot of power in design. Additionally, in my experience, I always design websites in Photoshop and proceed to slice the design to turn it into HTML. Therefore, the advantage of using a grid, in my opinion, is that as I write the HTML, adding a predefined set of class names to my HTML div tags will create the layout I require without the extra work of ensuring that a certain div floats properly in all browsers. To me using a grid is a matter of being efficient, not lazy.

I understand my idea isn't all that original, there are grids and templates out there by the dozens. Lately, however, I've had the need to create websites with a fluid layout. It seems this is becoming popular since wide screen monitors are being used in greater numbers. With the CSS grids I know about, none were able to create fluid, nested rows. This is what I feel makes my grid unique, and that fact that it's, like Chris..S mentioned, like an adjustable wrench.

Therefore, when I was able to create a grid that allowed for practically any layout, including fixed-width columns next to fluid columns, I was very happy. I'm glad some of you share my interest in grids, even if some of you feel that grids aren't all that useful.

I hope this answers your question as to how my grid is different.

Thanks!

themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

Thanks

Thanks DivaVocals! I will be release a new version of the grid very soon. I will be sure to post here to let you know when that happens.

Thanks again!

themasterblogger
Offline
newbie
California
Last seen: 12 years 14 weeks ago
California
Joined: 2009-08-11
Posts: 7
Points: 0

New Master Grid Released

For anyone who is interested, I've released a new version of The Master Grid. Thanks to Hugo, it now works flawlessly in IE6. I've also made the CSS more comprehensible and reduced the file size to under 1KB!

http://www.themasterblog.com/the-best-css-grid-for-fluid-layouts/