26 replies [Last post]
zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

I am updating an old theme for a cms and was wondering what peoples thoughts are on the best grid system to use. Because its a cms with lots of 3rd party packages (like all cms) there is no nice way to resize everything from my understanding. I am not in any way new to css but have coded everything custom up until now and its my first trip into grids. I have read a lot of documentation this week but would like to know what others think works best. Right now I am leaning towards an 1140 res hybrid with boilerplate so 3rd party apps relying on pixel widths dont look to out of place but I am not sure if this is the right choice.

I also had a second question as the cms I am doing this for already uses a container to run its dashboard and it requires a separation of styles in the form of a site wrapper. So I will have to use something like

Can I use a custom container seeing as the cms is already calling container for its dashboard or can I rename it completely ? Again I am new to grids and am very lost at the moment.

Any help would be much appreciated

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

I forget to hit code

I forget to hit code

</head>
 
<body>
    <div id="sitewrap" class="wrapper">
	<container-custom>
            <grid> 

or am I looking at this the wrong way ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It may be that I suffer from

It may be that I suffer from old man syndrome, but the last question you should be asking is which grid. The various grid systems have been touted for several years now, and all are birthed from the fevered brains of graphic designers steeped in the print tradition. The web is not print, and the idea of a, albeit virtual, paste-up board (which is all these amount to) is ludicrous.

By the time you've truly planned the site and what content belongs in the pages, and after you've decided on navigation and and relative importance of the pages' elements, then you can ask which grid. Only by then the layout will have been decided by the requirements and the question will be moot.

Perhaps there is a well designed "system" out there somewhere; I have yet to see it. All I've seen were examples of excessively complicated sizing rules with ridiculous naming conventions, and no apparent understanding of the cascade in Cascading Style Sheets, that made debugging and maintenance a royal PITA. Then you look at the actual layout and realize it would be trivial to code if you just did it from scratch from the start.

I don't imagine this is what you want to hear, but I can't honestly recommend any grid system. Like I said, old man syndrome.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

Actually when dealing with a

It seems to me that when dealing with a theme or template or skin that is in a cms's marketplace it should be the first question. I have been doing custom up until now and before the marketplaces were easy to navigate by slapping everything in 960 which took very little effort or grid understanding and is the norm for 95 percent of marketplace templates. Now at this point with any cms there is a multitude of 3rd party plugins, packages, and extensions all with their own respective authors naming conventions and they cannot be easily adapted to resize and all you can do is give general guidelines to the editable area that the package, block, or extension is destined for.

By utilizing a grid you are able to convey the framework much easier to the end user and by using a grid that isnt 960 you can cater to consumers demanding displays for larger monitors as well as giving a solid adaptive framework that they can further extend upon without having to learn my personal way of doing things which may or may not live up to their needs. My personal method was to grid out the most common editable areas, main left sidebar right, main right sidebar left, cta left, cta center, etc etc, really going to miss it Sad

There is also the crowds of consumers demanding certain grids like bootstrap that some of us also like to cater too.

All in all I need insight into the specific situation of using a site wrapper, custom container, and the run-arounds needed to make this work for the grid as well as someone that has had to go through all of this to upgrade their products for the new marketplace conditions and demands.

I do understand what your saying and where your coming from and agree. I really wish I didn't have to go grid at all but the times are a changing.

I also see em elastic grids resizing based on type display and using a max em setting as the only really consistent method of building cross device and of course this utilizes type as the focal point.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Blowing off steam

I understand your concerns, and it's too bad that the main cms systems got off to what I think was a poor start. By trying to be all things for all needs, and conflating db queries, programming logic, front end coding and styles*, they dug themselves into a hole that has reached critical mass and is not fixable.

If you just must, choose a grid based at 960 units. Why? because 960 has so many factors, e.g. 2, 3, 4, (5), 6, 8, etc., which allow for easier scaling and partitioning ratios.

Rant over,

gary

* My dig at class and id tokens chosen for the style/s/ they hook instead of for what those elements are. There goes separation of structure and style; you might as well inline the styles.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Take a look at

Take a look at http://foundation.zurb.com/ as one of the frameworks some reckon to be a cut above the really ghastly ones.

Personally I really don't get frameworks or the real reasoning behind them other than to do an aspect of the job many new developers simply can't handle and don't want to put the time in to learn, I just don't get this notion expressed of providing anything to the end user or for modules / plugins that need to inject content and I work mainly with WP.

I looked at Zurb Foundation because of the insane and dumb pressure being brought to bear by inexperienced developers who endlessly tout the use of these frameworks as being absolutely essential and in doing so leave those of us who actually can code frigging layouts looking as though we are behind the times or NOT doing things correctly, the main stylesheet(Drunk comprise lots of stuff like:

.block-grid.nine-up > li { width: 11.11111%; padding: 0 8px 8px; }

.pull-seven { right: 58.33333%; }

.block-grid.two-up { margin: 0 -15px; margin: 0 -8px; }

and there's much worse.

I simply look at it and am lost as to how I'm meant to work with this or actually write markup, and I do know what I'm doing!

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

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

I figured out best approach

Thanks for your help with this and I have a feeling you saw what I was working against. I ended up going 1140 and set up some heavy comments that will allow someone to change grids out or remove and go custom at the drop of a hat. As much as I dislike grids and now that I can say I completely understand them (reading for last 24 hours) I don't like them and would only find it useful when pushing out very large sites where constant changes are called for in the long term of the sites lifespan, and I cant think of one site that set of terms would apply to.

With that being said the marketplace is pushing towards grids and forcing everyone along for the ride so I caved to the pressure. I went 1140 as it takes a lot of the burden of deciding to support extensions that are set for pixels over percent and with some fitvids and some not normally applied media queries I can minimize any sizing issues with 3rd party.

Again I agree with you that grids should be avoided, especially now that I really took the time to learn them ground up and down, but I caved Sad

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Oh, the shame, the shame!

Quote:

Again I agree with you that grids should be avoided but I caved Sad

Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Twitter developed an

Twitter developed an interesting concept, called twitter, it then went and developed a thing called 'Twitter Bootstrap' Why! wtf did they think the point was, why why why did they think this was remotely needed who did they think they were helping and the same goes for all the others who appear desperate to find some way of keeping their names to the fore.

In all things skill related there must come a point where the price of entry is an impediment to all but those who really want to learn it's this way that one finds the best and brightest to move things forward, attempting to make things 'easy' for all is not big nor clever, and this has nothing to do with TBL ideal that the web is for all, it doesn't preclude anyone from the web but attempts to re-enforce Standards.

It will come to pass that web development does indeed die in the sense that it needs those that laboured to gain and uphold skills, it's already happening at an alarming rate spearheaded by a range of CMS apps, all of which daily attempt to provide copy paste code in the form of plugins / modules / themes / frameworks that require zero development skills soon the only people that will be of value in that world are 'Web Designers' creating the graphics for the stunning themes - I have no problem with stuff looking great but do if it's at the expense of Standards and core coding Sad

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

So zenn what framework did

So zenn what framework did you eventually settle on for interests sake?

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

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

Foundation3 had some nice elements

Foundation 3 seemed nice and would be the grid I would use if it was for a client and I had to use a grid. I learned a ton in the last day and really see grids as confining and unusable, but I ended up going 1140 because of the state of the industry. The sizing issues I was talking about apply to extensions and addons like joe shmoes picture slider that has width by pixel settings and sets its own funky styles and how that will work in a responsive grid. At first i was thinking I would go all em based and set a max em against so if the end user has an accessibility pixel setting it will only stretch to a certain spacing within the container. That leads to questions of how to ensure em rules are applied to all possible content and unfortunately there is no way to do this without additional media queries and js so whats the point in using an em driven grid in the first place, which I know firmly plants my foot in my mouth considering my point about em yesterday, however if it was for a client where I controlled all added content em would be the way to go with some js on top.

Then I went to media query only driven so it wouldn't matter what grid and then use different grids for different breakpoints to make it more manageable a bit like dreamweavers approach to responsive. This came with its own set of burdens and bloated css and just felt wrong. I went through a load of trial and error and also went through all the aspects of how many columns and why and the potential hazards and pitfalls of each system, I went through 12 in total. I also looked at the math on getting perfect gutters and column spacing to avoid rounding issues but because of all the different devices there is no median point and no matter what you will end up with rounding. In the end I went 1140 because of the demand for wider screen support and the demand for use of grids in general and it offered the most minimal issues sizing wise because its so relatively close to 960 with gracious gutters.

Also my issue with the cms dash already having its own grid setup was no issue at all just my inexperience with grids. I just placed container divs along my markup, header, body, footer (as the cms separates all this into three distinct loads which was added to a bit of confusion) and then applied my rows as needed, no alternate naming needed but I added it anyway just to cover my bases.

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

It all sounds like so much to

It all sounds like so much to think about, I wonder how we've ever managed to create anything like usable sites to date Smile

I was always under the impression that browsers were simply incapable of doing really sophisticated math calculations and that it wasn't what they were intended to do so rounding of computed values was always going to be an issue one just learnt to deal with - essentially by not getting fixated on pixel perfect bloody gutters and stuff of the ilk.

Somehow I've managed to create fluid responsive layouts that adapt at various breakpoints without undue hassle or needing the help of grids, but clearly I'm missing something and my layout efforts must in fact be cack Sad

Interesting thread though Zenn.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Re: em and rem

Concerning box sizes in em units, css3 introduces the rem (root em). See §5. Distance Units: the ‘<length>’ type.

That will help with having a consistent base size.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

And concerning sliders, there

And concerning sliders, there are a few responsive sliders available now. It is something that drives me round the bend when trying to factor fluid layouts and have responsive image sizing yet add a slider and things blow apart, was working on a WP slider plugin I forked to improve, last stage of that was to make it fully responsive, however for client's on WP I now tell them to purchase 'Slider Pro' as it's latest version is all things to all men and fully responsive if wished.

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

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

It is too much to think about

If it wasn't for my complete and total hatred for all clients Ive ever dealt with except maybe 4 of them I wouldn't even bother with mp entries. I personally hate that the emphasis is on making everything as easy as possible and its getting to the point where any joe shmoe with an internet connection can build something thats presentable (not functional as an actual online business tool though) and pretend they are a web developer or designer.

On the plus side these do it by template "developers" (lol) make the rest of us look like gold and a majority of my clients tell me horror stories about their last "dev" failing at being able to change anything about the templates they use, some even not being able to change stuff as simple as colors.

With that being said and my thoughts about grids being the stupidest web tool that you don't need in any way shape or form and the drive that's there to institute grids I can only see it getting better. The market doesn't understand what its getting into by asking for something they probably have no idea how to use, or why its being used and it will create a brand new market, the same ones cant change something as simple as colors paying out hand over fist for simple layout changes.

If things keep going this way it will only be a matter of time before people that actually know what they are doing are thought of as wizards that have crazy internet magic powers, in fact I have a feeling that 95 percent of people that see a pop up modal instantly assume its magic.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

New market for Real Coders™

I kept beans on the table and beer in the box for a long time by knowing IE's silliness and selling that knowledge to soi-disant web designers. Maybe I should come out of retirement and bone up on WP's and the various grids' silliness. I see a whole new source of income on the horizon. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Got to start a new build for

Got to start a new build for a project shortly, was thinking as I'm now really confused and don't know how to make all these columns with golden things or gutters 0.1825364000000.1200000% wide I would scan some graph paper and overlay that on the site then I could clearly show the client I had used a faux grid system, I'll then just position absolute everything to cover the grid lines, that would work wouldn't it Puzzled

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

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

Grids Broken Down

Someone should provide real documentation for grids but all I found was people delivering nothing. The internet is literally devoid of any real info on method and execution. With that being said I am going to do my best to explain from ground up what I learned through trial and error and looking at the structure of all the different grids. This will literally be ground up so anyone reading can pick up where they need to and you can probably scroll down to the specs and bits about fluid gridwork.

(sadly i ran out of time to cover fluidity in any depth,, for now)

*first examples given are derived from 1140 markup. Please view the markup and css, markup at the bootom of this page http://cssgrid.net/

*css on github here https://github.com/andytlr/cssgrid/blob/version2/css/1140.css

Forget about golden triangles

This has nothing to do with grid implementation and is all about design and the power quotient 1/3 and how its more appeasing psychologically, forget this and keep it out of your mind as design means nothing when your slapping in something that is identical to a chessboard and we are at implementation phase anyway.

See the grid as nothing but something that adds width to an element and aligns it left or right

That's all it is, if I have 12 columns and I place a div across one column it will take one columns properties. So if the width of one column is 20px the div will inherit 20 px width. Being that it is first in the column it will align left. Now if I add a second div and place it across 2 columns it will inherit its pixels (2 columns worth)of width and again align left but with a margin separating it from the first div. This margin between the 2 is the gutter and takes the gutter width. So we have a 1 column div of 20 px, then a 5 px margin inherited from our gutter and then a 2 column div with 40 pixels. See image

So from here we can see that all the grid is doing is adding our widths to divs and the gutter is giving us a margin between. This is not all a grid does but this is basically it. Now on 1140 and a lot of other grids our columns have a padding right (see css again) so we add the class of "last" denoting that it will be the last div and thereby remove the right margin or padding. See Image

In this example of main and sidebar you can see the design laws of 1/3 applied and again this is something that doesnt need to be talked about when going over grid implementation as its design structure. I also find it a stupid rule and one that can interfere with content placement. I mean what when I use 2 columns to display something im doing it wrong ? Nope im not and why does everyone that talks about grids feel that they need to discuss it rather than show implementation ? Oh right because they are repeating what they read in someone elses blog thats repeating the same *beep* from another guy's blog that doesn't get it. I almost forgot this is the internet.

*cms specific , some cms I have worked with in the past 24 hrs will ignore the last class when using multiple divs next to each other and you must give a third class so you can call this class in your styles and float it right. On all grids there should be secondary css values to ensure proper div alignments in all devices with every div on the left of grid floating left and all divs on the right floating right but I could write a mini book on this particular behavior and how to get around it and will save that for next time or just come out with a truly fluid and proper .1 correcting framework for all devices which is my intent.

*example <article class="twelvecol last full"> you can see I have added a full class to my div which I will use in my css to give it any extra needed properties like my "cover the bases" float left and as you can see even a 12 column spanning the entire site requires the last class. As you can also see the div type doesn't matter and this one is wrapped as an article. (articles being the preferred div for content).

Now that we understand whats inside

To have the columns work you of course need the container and grid so that markup goes before all else. Simply place

 <div id="container-header">
				      <div class="row">
				          <div id="logo" class="fourcol">

This code does not want to line up proper but you know how it goes

Before your divs. As you can see I have given the container a custom of header to ensure no interference with any other containers that may be present (cms systems). Because of its simplicity this is easier to grasp after columns and margins.

But what about my header and footer I want these to span fully across the site and not be confined

This is the same as its always been and you simply place your divs or containers outside of the grid. This can really only be explained by code examples, so...

	    <div id="header_wrapper" class="wrapper">    <-- This is wrapping our header -->
		    <div id="header_top">   <--div outside our grid given us a trim on top of header 
		    </div>                        so we can add something like text or seamless texture
		    <div id="header_mid">   <--div that we wrap the grid in-->
                        <div id="container-header">  <-- container for grid-->
	                    <div class="row">   <-- row to give the grid its structure -->
    	                        <div id="logo" class="fourcol"> <-- and our columns start -->
                                </div>                      <-- end this column -->
                                <div id="nav" class="eightcol last">  <--another column--> 
                                </div>                      <-- end this column-->
			    </div>        <--end row-->
		        </div>        <--end container-->
		    </div>           <-- end div we wrapped grid in-->
                <div id="header_bot">    <-- start new div outside of grid so its full width-->
                </div>                   <--end the div-->
            </div                        <--end the header wrapper
            <div id="body_wrapper" class="wrapper">   <--start the body wrapper -->
		<div id="container-body">     <-- body container -->
	            <div class="row">         <-- grid structure -->
                        <div id="main" class="eightcol"> <-- main area -->
                        </div>                      <-- close main -->
                        <div id="rsidebar" class="fourcol last">  <--right sidebar--> 
                        </div>   <--close -->  
                        <div id="full" class="twelvecol last">  <-- div spanning whole grid space-->
                        </div>
                    </div>  <--end row-->
                </div> <--end container-->
            </div> <--end body wrap -->
            <div id="footer_wrapper" class"wrapper"> <-- starting the footer -->

Now our wrappers and divs outside the grid can stretch fully across the width of the site as they are not grid contained. Its kind of like grid, no grid, grid, no grid. Our wrappers are being used to clear and I applied one to header, body, footer and then in my css did this

 .wrapper {
    clear: both;
    overflow: hidden;
}

This will clear our grid without using clear divs and the rest of that garbage and keeps us tidy.

Now every grid will be a little different and the implementation varies a bit, the concept method and principles stay the same. In 1140 our container is given a max width of 1200 and a min width of 755 so the container adapts to screensize and elements along the container will also adapt (unless its cms 3rd party and doesn't play nice with others) Insert breakpoints and apply stuff to mobiles like resizing the logo down to 300 px max so it fits and mobile navigation etc.

Columns will drop below others for smaller devices so the right sidebar displayed in the image from above will drop below the main. This is denoted by html structure so the first div of main will have sidebar below it because of its order in the html. If you put div-4col last(sidebar) then div 8col(main) the 4col last (sidebar)will show first in mobile while the main drop below because the 4col last came first in our html. Meanwhile on a big screen the sidebar stays as the right sidebar because of the last class. If I had more time I would explain this in a less confusing way but for now maybe read it a few times over to get it.

I will be doing a complete follow up on this its implementation in various cms systems and showcase a proper built .1 self correcting grid Im working on sometime after xmas and ill drop a summary of it in this thread at some point.

I also realize there is more to cover but I have a very busy day ahead and need to get cracking so if theres any questions Ill do my best to answer,

So after taking all this in you can see all a grid is doing for us is setting a max width to our body and giving our boxes a width and a margin between and its doing it in the most confusing, confining and ultimately most unnecessary manner, I mean really a class to remove margin ? lol. Thanks grids I couldn't do any of this before and like to complicate things as much as possible for no reason. Tongue

*as a side note i am finding it useful for add-on development but thats an entirely different matter.

*also I am sure some of you will visit the site the images originated from and yes that is a theme in development. The syles are all over the place as they are part of "35 color options to control your site colors" which are easy picked on color wheels in the cms's dashboard and I just finished testing them so ital purple and yellow and green. Like I said we make it to easy for joe shmoe. Even the images used in design are transparent and can be color changed using background color ffs.

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

Golden Triangles! was more

Golden Triangles! was more concerned with Golden obloids.

Seriously though a really great and in depth explanation, on behalf of the forum and thread thanks for putting the time in to explain in that much detail, we can direct people to the thread who express an interest in how grids are meant to work.

As much as I do actually grasp the point and functional use of grids, the example does just prove why they are to be reviled, if I were a print designer or an architect building renaissance Greek temples then I would apply those various shiny things, Golden Section, Golden Mean, Golden Spiral, Golden Ratio, but I just a hack frontend coder so shall build my usual fluid layout with breakpoints for re-factoring elements to suit various devise screen sizes.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

What a hoot

If and when you do complete your "tutorial", it might make a good addition to our how-to section. Even if you don't add anything it's still a good intro to grids, and the snarky commentary is appropriate to the subject.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Yep we can and should move

Yep we can and should move it lock stock and snarky commentary to the 'How To' section (we'll moderate some of Gary's snarkier comments though)

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Snarky? Moi?

I was thinking more of copying zenn's comment #17 with, perhaps, an introductory paragraph.

We should ask zenn if he's game.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Ok but it needs a forward,

Ok but it needs a forward, explaining that what follows is by no way to be considered support for a spurious and wholly unnecessary complication to layouts etc, but is an explanation of the thinking and processes behind the grid concept - possibly with links to a few of the ?"better" offerings.

Perhaps the thread should also dwell briefly on frameworks also as the better grids are generally part of a larger general framework.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

In agreeance

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

zenn
zenn's picture
Offline
newbie
Last seen: 8 years 49 weeks ago
Timezone: GMT-8
Joined: 2012-12-15
Posts: 8
Points: 9

Revamp

I'm going to come back tomorrow and rework it with a better approach covering a lot more info with full visual aides for all code snippets and when and how to apply it all. It was more of a rough draft and I wasn't able to give it the attention and thoroughness it deserves as well as skipped over a lot of useful info. I also plan to add the contemporary layout methods and show differences between the two schools of thought and clearly show why the tried tested and proven methods are still superior and why the grid is confining to both designers and devs alike.

If you think that its how to worthy thats awesome but I definitely have to improve upon whats there and make it easier to take in and will try to explain its uses for the programmer and how using a grid in the site layout actually complicates add-on development not helps it. It will be fairly lengthy and hopefully I can do it right.

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

More than worthy as it

More than worthy as it stands, haven't tried moving post comments recently but think we could probably move the post comment( s ) to 'How To' and let you continue editing there and close it to replies when finished.

My only request is we make the point, even labour the point that the use of these grids is highly debatable, lest it seem as though it's a further vindication of their use.

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

csscr
csscr's picture
Offline
Enthusiast
Last seen: 3 years 19 weeks ago
Timezone: GMT+7
Joined: 2003-03-12
Posts: 126
Points: 55

Hi zenn, Nice write up. I

Hi zenn,
Nice write up.
I have given you access to write How To topics. If you would like to improve on the post you can start a new topic there, otherwise we can copy the topic over.
Let me know if you have any permission issues.