Confused on how to use the 1140 grid

[cgacfox]

I am working on a new project for a client and want to try responsive web design. I am researching the 1140 grid by Andy Taylor but am completely confused as to how to use it. I have the prototype built in FW but don't know where to go from there. The HTML and CSS has me baffled. I have seen other grids and like this one better because of the math. I know many gurus here don't like grids but I want to learn how to use one or figure out on my own how to make this current site responsive. The total width of the site is 1140px so that is my starting point. From there I can't figure out all the rest and I can't find a useful tutorial on how to use it. Help? Suggestions?

centennialnoisemockupl.fw.jpg

[ralph.m]

Yes, it can be harder to learn how a grid works than to learn CSS. Because you are thinking in terms of px widths, you are probably in the wrong head space to start with ... because the real idea of a responsive design is that it doesn't have a fixed width but can scale to different browser sizes. It would be good to consider first what you want the site to look like at various widths ... such as half the width of that image you posted. What will the elements do? Where will they sit? This may prompt you to rethink the layout, as that design looks more suited to a fixed width design, to be honest.

An alternative is to have a fixed width design, and then at some point (say on a small screen like that of a smart phone) determine a different layout via media queries. A few decisions like this need to be made first—whether you use a grid or code this yourself. Personally, I wouldn't touch a grid—not because I'm being snooty, but because I truly think it's a lot messier and harder to do than to code from scratch.

[cgacfox]

Thanks, Ralph. I see what you are saying. This layout would be better as a fixed width design. I can remove some of the elements for smaller screens, like the backgrounds for the 3 columns and the large main background. This is also going into WP as soon as I get it all coded in HTML and CSS. That will be another challenge as I am not used to designing for WP. I will go ahead and code this up for laptop/PC and come back here if I need help along the way.

[ralph.m]

Cool, no worries. Looking at it again, it may not be hard to make that layout responsive. If the three middle columns are floated, on a small screen you could just remove the floats. Likewise with the footer elements. I'm not sure what the WebTrak section at the top is for, but that may be a little harder to deal with if it's a big image or video.

[cgacfox]

WebTrak is supposed to be embedded but at this time I am not sure I can do it. It is an app for local airports. This site is for the counsel set up for noise control. The client wanted to use the embedded app and if it doesn't work then I would use an image slider. That can be removed for smaller screens as well although I think that image sliders can be resized for smaller screens.

So then I will go back to using percentages instead of px. I have read through Responsive Web Design but that is based on a 960 grid. Mine will be wider for the full sized site.

[ralph.m]

The client wanted to use the embedded app and if it doesn't work then I would use an image slider.

Hm, both of those could be tricky, depending on their nature ... but it may be fine. A full-width slider will often show up fine in a smart phone, but it will just be a lot smaller (to fit into the viewport).

It could be worth considering making that section much narrower and having something beside it (like text) that can easily drop below on a smaller screen.

[cgacfox]

I don't think the client will go for that. I will check on it. Just to make sure that this old brain is getting this right, my page wrapper will be 100% and then I need to figure percentages for all the components with the wrapper, correct?

[ralph.m]

my page wrapper will be 100% and then I need to figure percentages for all the components with the wrapper, correct?

You could do that. But probably a nicer option is to set a width something like 95% BUT also set a max-width (say in px or em—such as 60em—and perhaps min-width). That way, the site doesn't become too wide. It's not much fun reading lines of text that start to get really long ... such as on this site if you expand your browser on a really wide screen.

[cgacfox]

Ok that makes sense. I also forgot how to do the inner backgrounds. I have main content wrapper and then the left content wrapper, middle content wrapper and right content wrapper. I have sliced the backgrounds and need them to be able to expand as more text is added. I am really losing my mind. I read a lot but need to create more sites just for fun in between projects to stay on top of things.

[ralph.m]

I have sliced the backgrounds and need them to be able to expand as more text is added.

Hm, yeah, that's where you need to choose a background design that can repeat endlessly.

[cgacfox]

Well for the content container I sliced it into 3 pieces, top, middle, and bottom. That way it can expand. I think I have an old design that does the same thing. I just need to find it to see how I coded this in the past.

[ralph.m]

I never really slice anything for the web. If you are talking about the big map background, there's no need to slice it. You can place it as a background on the <body> element.

[cgacfox]

Its the main content area that has the 3 columns. There is a background image for containing the whole area and then background images for the 3 columns. I do have the background map image already set in the body element or actuall the main wrapper element. Should I switch it to body? It is 1140px wide.

[ralph.m]

It should be OK in the wrapper itself. But what are the images you are slicing? If it's the white lines, I'd suggest you just use a border with border-radius, which si supported in all modern browsers. (Old browsers would just get square corners, but meh ...)

[cgacfox]

Then I will do that for the inner 3 columns but what about the outer background for the main content container? That is an image that is transparent with rounded corners and needs to expand as more text is added.

[ralph.m]

Again, I'd do the same for that. Give it a thin white border, CSS3 rounded corners, and an rgba background color that makes it semi-transparent. An alternative would be to put a semi-transparent repeating image if you need it to work in older browsers (though I'm happy to leave them with what they can handle).

[cgacfox]

Will these CSS3 elements expand with the addition of more text? Remember this is for WP and as the client creates more posts, the background will have to expand. I was also playing with the percentages last night and it wasn't looking too good. I may have to rethink this...not the design, the client wants that design, but the fixed vs fluid. I can create CSS @media calls for screens at different sizes then get rid of certain graphic elements at each screen size. So for instance this starting one could be for screen sizes 1140 and up. Then I could shrink the background a bit and cover the tried and true 960 up to 1140, and so on. Might be more work but that saves me having to convince the client that after SEVERAL prototypes, this one still isn't going to work for going mobile. I think using pxs will still work with this setup. I will have to experiment.

[ralph.m]

Will these CSS3 elements expand with the addition of more text?

Yes indeed.

I'm not sure you need to change the background images at all, though. At a certain width, you can just change those side-by-side elements to float: none, so that they sit on top of each other. The background image can stay just like it is.

[cgacfox]

Nice! That sounds like the way to go. Could you give me a snippet of code so that I know what I am doing to get the backgrounds correct? You don't have to worry about color, I deal with that. Also where would these elements be in the HTML code? I have left_content, middle_content, and right_content. I may rename those to left_sidebar, main_content, and right_sidebar.

[ralph.m]

Sure, but I'm not entirely sure which backgrounds you mean. I only really see one large background image ... the map that sits behind the content, with a control tower image at the top. That's entirely independent from the three center boxes.

So the first thing I'd do is probably set up the <body> element. Place that bg image on the background:

body {background: url(bgimage.jpg) no-repeat 50% 0;}

Then I'd set up a wrapper, set to your preferred width, and center it:

.wrapper {width: 1140px; margin: 0 auto;}

Then place the main heading inside that (an <h1>, if you like), the a <ul> for the menu, with the menu items set to float: left;

Then the WebTrak element (a div?), and the main content div. (You can add in rounded corners later).

Set the main content div to overflow: hidden, and add in the three inner divs, each set to float: left; and with an appropriate width. Perhaps set some padding on the main content div (e.g. padding: 50px 20px 40px, and then give each div the desired width, and give the middle div a left and right margin to create the space between the divs. You can also give each inner div a white, 1px border. Remember that this border adds to the overall width, so subtract that from the widths of the inner divs. If you've given the container 20px padding left and right, that means you have 1100px width left to play with. Remove another 6px from that for the borders. So your three inner divs have to share 1094px between them, with some space in between them, too (40px on each side of the middle div?)

That's a basic way to set this up, but it is all fixed width at this stage. You could do all these widths in % instead, but you have to be careful when the borders come into play. They are better off being placed on extra divs inside the three floated divs. With % widths, though, you may get some rounding errors, as each browser will translate % to pixels differently, and if you're not careful, one of the floated boxes will end up dropping.

Sorry, that's all a bit garbled. See if you can make anything of it all, and perhaps show us your results. We can fine tune this as you go.

[cgacfox]

Thanks Ralph. There is a background image where the three columns are. On the left is a couple of blue boxes that say image and then some text. The center column is for recent posts in WP, and the right column is for the search feature, links and a calendar and any other widgets the client wants. The background is a brownish color and is transparent. I then put the white border on each column and there is a white border around the entire content area. Please look at the image again. You can blow it up to real size. I don't want to sound disrespectful but if you are colorblind, you might not be able to see the color differences in the prototype. It is exactly like where the WebTrak image is, except instead of being a blue color it is a brown color. So with that in mind how would I do the code for that? On a side note, I saw a video on FW CS6 today and see that I can take my graphics and FW creates CSS code for it. That sounds fantastic to me. It would save a ton of slicing to work that way.

[ralph.m]

There is a background image where the three columns are. On the left is a couple of blue boxes that say image and then some text.

Ah, but you don't want them as part of a background image. The only background image in the middle section should the the map in the background. The blue images should just go straight into your html, inside the left column. (Otherwise, alignment with text etc. would be a total nightmare.)

Regarding the transparent brown color, that's quite easy (I referred to that earlier, in post #16). My preferred method would be to set a brown background color on the container using rgba color values, which allows you to set a transparency level. That works nicely on all modern browsers. Users of older browsers would see solid brown, though—so if that's not acceptable, you could use a semi-transparent brown image as a background repeat instead.

The rgba solution would look something like this:

background: rgba(67,52,45,0.2);

That's a brown color with 80% transparency. To set that up, find the solid brown color you want, type that value into Photoshop (e.g. #43342d) and it will give you the rgb values ... in this case 67, 52, 45. Then just add in a decimal number to suit, like 0.2, 0.25, 0,3 or whatever.

[cgacfox]

Yes I know that the images will not be part of the background. Here is a section of the site and what I need it to do. I hope this helps express what I want to achieve. If the brown background can be created with CSS and can expand great. If the inner white borders can be created with CSS and expand, also great. If not, then I will have to slice them.

main content.png

[ralph.m]

Yep, all that's easy to do with CSS. No sliced images needed. I'll try to knock up an example tonight if someone else doesn't beat me to it.

[ralph.m]

Here's a basic example. There are probably better ways to to it, such as not floating the middle column and giving it big left and right margins, but here's a start, anyhow:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
.wrap {width: 95%; max-width: 60em; margin: 50px auto 0;}
.content {background: rgba(133,97,61,0.3); -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; overflow: hidden; padding: 2%;}
.left, .mid {float: left;}
.left, .right {width: 25%;}
.right {float: right;}
.mid {width: 40%; padding: 0 5%;}
.inner {padding: 10px; border: 2px solid white; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px;}
</style>
	
</head>
<body>

<div class="wrap">
	<div class="content">
		<div class="left">
			<div class="inner">
				<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>

				<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
			</div>
		</div>
		<div class="mid">
			<div class="inner">
				<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>

				<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>

				<p>O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris.</p> 
			</div>
		</div>
		<div class="right">
			<div class="inner">
				<p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>

				<p>Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? </p>
			</div>
		</div>
	</div>
</div>

</body>
</html>