Gee it's sure quiet in here! Was this post somehow inappropriate? I thought I was onto a cool idea here, but maybe it's just lame? Is there a better place I should post this?
Any feedback at all would be most welcome. And BTW IMO after just a bit of playing around, using Blueprint via Sass/Compass just rocks! Adds a lot of value, and I can see it as "the way" to go at the moment for managing your own custom CSS snippet libraries as well as these "formerly monolithic" grid frameworks. On Mon, May 24, 2010 at 12:51 AM, HansBKK <[email protected]> wrote: > 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.
