I've been struggling for some time now to come up with a technique
that caters to site visitors with low-res screens (or narrow browser
windows) on the one hand, as well as the growing numbers of those with
wide screens on the other, many of which who may well be browsing in a
maximized window, either by choice (as I do) or because they don't
know any better.
I love the idea of fluid/liquid/hybrid layouts, but they've got well-
known design issues and seem to be quite a bit more difficult to
implement, especially in a grid context. As a side note, links to
examples of cross-browser bullet-proof grid designs would be welcome!
I recently came across Jeff Croft's statement (in BlueprintCSS 101)
"Don’t think [you] can only have one container" and that set a (for
me) whole new train of thought chugging along. The basic idea is to
have a set of independent, relatively narrow containers rather than
one overall page-width-setting Container. The first of these "small C"
containers would consist of the most essential content you want
everyone to see "top of the fold" even on a 640px wide screen,
including most likely your navigation links. This would be followed by
other independent blocks, floated so that as many as possible would be
to the right of the first main one in a wide browser viewport, but
drop down below it as needed to accommodate narrower widths.
So I put a test page together, and would appreciate feedback. Note it
uses Blueprint's CSS unmodified, other than the scratch styling in the
<head> here.
As I'm no guru, I'd be very surprised if this is a new idea, so please
post links to similar designs to assist my learning (and that of
googlers to follow). If on the other hand, you think it's novel (and
useful) enough to be worth developing and documenting, let me know.
I'm calling it "Tumbling Dice" for now, as I was listening to the
Stone's re-released Exile stuff while I was putting the test page
together and it seemed to fit.
============================
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Testing based on Blueprint
</title>
<!-- Below is for prototyping convenience only, move keepers to
custom stylesheet -->
<style type="text/css">
/*<![CDATA[*/
div#outest {min-width: 640px;margin:20px 0 0;}
h1 {margin-left: 10px !important;}
.container1, .container2 {float: left;margin:0 0 0 10px;outline:
1px dotted blue;}
.container1 {width:630px;}
.container2 {width:310px;}
.container1, .container2 {height:500px;}
/*]]>*/
</style>
<link rel="stylesheet" href="styles/blueprint/screen.css"
type="text/css" media=
"screen, projection" />
<link rel="stylesheet" href="styles/blueprint/print.css"
type="text/css" media=
"print" /><!--[if lt IE 8]>
<link rel="stylesheet" href="styles/blueprint/ie.css" type="text/
css" media="screen, projection" />
<![endif]-->
</head>
<body>
<div id="outest" class="clearfix">
<h1>
Test layout: "Tumbling Dice"?
</h1>
<div class="container1">
<h2>
Container1 - Main content
</h2>
<div class="span-8">
<h3>
A
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
A
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
B
</h3>
</div>
</div>
<div class="container1">
<h2>
Container1
</h2>
<div class="span-16">
<h3>
B
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
C
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
D
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
E
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
F
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
G
</h3>
</div>
</div>
<div class="container2">
<h2>
Container2
</h2>
<div class="span-8">
<h3>
H
</h3>
</div>
</div>
</div>
</body>
</html>
</code>
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
