I have some places where I wanted to use blueprint with various
numbers of columns ( 18 in a wizard, 8 in a dialog box, the full 24 on
the page ), so I made a small addition to blueprint I thought other
people might find useful.
.sized-container { float: none; clear: both; margin:0 auto; }
This container doesn't specify it's own width but instead should be
used with a span-x class to make a container that is x columns wide
(ex: class="sized-container span-18" ). It must be in the css after
the span-x float definition since it overrides the float setting. It
can also be used inside an outer container to make an inner container
of the same width, since it isn't floated and will take up the full
width of the parent.
Also, the following two lines were also modified:
.clearfix:after, .container:after
{content:"\0020";display:block;height:
0;clear:both;visibility:hidden;overflow:hidden;}
became
sized-container:after, .clearfix:after, .container:after
{content:"\0020";display:block;height:
0;clear:both;visibility:hidden;overflow:hidden;}
and
.clearfix, .container {display:block;}
became
.clearfix, .container, .sized-container {display:block;}
Shouldn't break any existing layouts since it just adds a class, but
it can come in very handy when you are popping up jQuery dialogs with
fewer than 24 columns, or in other cases where you need narrower
layouts.
--
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.
