I'm working hard at getting some good BlueTrip documentation together. If you have anything you'd like to contribute, feel free to post it here or anywhere else that I can get to it.
You'd be tickled to know that I've been slowly working BlueTrip into our school's website; for example, our school's emergency website: http://urgent.mchenry.edu/index.html and I've used it on a few forms too. If I get my way, I'll be able to redesign the school site using BlueTrip.
Anyway, one thing I'd add is the opposite of colborder (I call mine contentborder, but whatever) so that the border runs down the left side of the content block, and not just the right. Hence, if the content expands, the border follows the content. Maybe there's an easier way to do this, but it's helped me out a bit. BTW, thnx for this!
Here's a little something I cobbled together for a co-worker to introduce her to BlueTrip. My apologies for the buggered code - apparently this forum doesn't like < >
How to use BlueTrip CSS Framework
Each page needs these four style sheets declared in the head of the document:
link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" - this is the main style sheet that contains the reset, font, and layout classes.
link rel="stylesheet" href="css/print.css" type="text/css" media="print" - a nice print stylesheet
!--[if IE] link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" ![endif]-- - a style sheet to tame IE rendering bugs, tested all the way back to IE5!
link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" - this is for site- specific styles, where you would declare your ID’s, etc.
For a three column layout, the basic layout structure is this:
body div class=”container” - the class “container” establishes a centered, 24 column grid with a width of 950px. div class=”span-24 last” - the "last" class tells Bluetrip not to leave any margin on the last content block. /div !--/header-- div class=”span-8” - every content block within must add up to 24, e.g., "span-8", "span-8" and "span-8 last" = 24 /div !--/column one-- div class=”span-8” /div !--/column two-- div class=”span-8 last” - note the "last" class /div !--/column three-- div class=”span-24 last” /div !--/footer-- /div> !--/container-- /body
You could also split the container class into different parts if you wanted.
CSS Miscellany
The Grid
BlueTrip uses uses a 24 column grid system, set in increments of 30px with 10px of right margin, so the base column is 40px. (Add .showgrid to the container class to get a nice background png to help see where things line up.) The baseline is set at 1.6 out of the box.
BlueTrip uses classes (e.g. "span-12") for positioning and relegates semantics to IDs, so for example, div id="header" class="span-24 last" , we would specify #header in our site-specific styles.css.
.span-X is used to designate how many columns a content block should, um, span.
If you want to add a border to a content block, simply add it to the class
Or, just give me links to existing docs somewhere else.
Hi Mike!
You'd be tickled to know that I've been slowly working BlueTrip into our school's website; for example, our school's emergency website: http://urgent.mchenry.edu/index.html and I've used it on a few forms too. If I get my way, I'll be able to redesign the school site using BlueTrip.
Anyway, one thing I'd add is the opposite of colborder (I call mine contentborder, but whatever) so that the border runs down the left side of the content block, and not just the right. Hence, if the content expands, the border follows the content. Maybe there's an easier way to do this, but it's helped me out a bit. BTW, thnx for this!
Here's a little something I cobbled together for a co-worker to introduce her to BlueTrip. My apologies for the buggered code - apparently this forum doesn't like < >
How to use BlueTrip CSS Framework
Each page needs these four style sheets declared in the head of the document:
link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"- this is the main style sheet that contains the reset, font, and layout classes.link rel="stylesheet" href="css/print.css" type="text/css" media="print"- a nice print stylesheet!--[if IE]link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"![endif]--- a style sheet to tame IE rendering bugs, tested all the way back to IE5!link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"- this is for site- specific styles, where you would declare your ID’s, etc.For a three column layout, the basic layout structure is this:
bodydiv class=”container”- the class “container” establishes a centered, 24 column grid with a width of 950px.div class=”span-24 last”- the "last" class tells Bluetrip not to leave any margin on the last content block./div !--/header--div class=”span-8”- every content block within must add up to 24, e.g., "span-8", "span-8" and "span-8 last" = 24/div !--/column one--div class=”span-8”/div !--/column two--div class=”span-8 last”- note the "last" class/div !--/column three--div class=”span-24 last”/div !--/footer--/div> !--/container--/bodyYou could also split the container class into different parts if you wanted.
CSS Miscellany
The Grid
BlueTrip uses uses a 24 column grid system, set in increments of 30px with 10px of right margin, so the base column is 40px. (Add .showgrid to the container class to get a nice background png to help see where things line up.) The baseline is set at 1.6 out of the box.
BlueTrip uses classes (e.g. "span-12") for positioning and relegates semantics to IDs, so for example,
div id="header" class="span-24 last", we would specify #header in our site-specific styles.css.If you want to add a border to a content block, simply add it to the class
Moving Stuff Around (Padding and Margin)