BlueTripCSS Framework - Blueprint meets Tripoli
NOTE: Due to the overwhelming popularity of BlueTrip, I've created a dedicated site for it at bluetrip.org. It's a work in progress, but should help clear up some of the issues that come with running BlueTrip out of this blog post.
CSS Frameworks have been a hot topic the past few months. Although they've been getting a lot of heat from semantic freaks and minimalists (for adding unnecessary code), I think they're a step forward. As I've said before, web design is about doing things quickly and beautifully. No matter how you feel about frameworks, it's undeniable that they speed up the design process. I'm a fan.
With this in mind, I searched everywhere for every snippet of every framework I could find. I've tried 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, and Boilerplate, among a few others. I even discussed the pros and cons of each of them. Finally, I decided to combine the good points of each of them to get something that I was satisfied with. Since most of it came from BlueprintCSS or Tripoli, I'm calling it BlueTrip. Why not?
Let me preface this by saying that 90% of the code in BlueTrip is not mine. I've pretty much taken the entire grid from Blueprint (with a bunch of my own changes) and the entire typography from Tripoli (with a bunch more of my changes). I don't intend for this to be on the same level as those guys...it's just what I've made for myself and I thought someone else might like to take a look. Now let's have a look.
DEMOS AND DOWNLOADS
UPDATE: Visit bluetrip.org for demos and downloads.
Things taken from BlueprintCSS:
- The grid - 24 column grid with a few of the class names changed around
- A couple plugins (fancy type, external links, and buttons)
Things taken from Tripoli
-The form elements - I like not having to add class="text" to them.
-Most of the typography - I like the greater line spacing and everything just looks a little cleaner.
-The tables - Padding is good.
-The blockquotes - Very dramatic looking.
Thing (just one!) taken from 960.gs
-Naming conventions (especially prefix and suffix rather than prepend and append)
Grid Usage
First things first, go into "screen.css" and change the reference to "yourwebsite.com" to the actual URL of your website.
Then, make sure you link to the correct stylesheets:
-
<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection">
-
<link rel="stylesheet" href="../css/print.css" type="text/css" media="print">
-
<!--[if IE]>
-
<link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection">
-
<![endif]-->
-
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection">
Then, surround all of your content with a div class="container". Or, if you'd like to view the grid in the background to assist in design, make it div class="container showgrid".
-
<div class="container showgrid">
-
<!-- CONTENT GOES HERE -->
-
</div>
Now, you can do pretty much anything you want. Just like Blueprint, set the width of a div using class="span-XX" where XX is the number of columns you want that div to occupy. If you want to add empty columns to the beginning of a column, use class="prefix-XX" instead of prepend, or if you want them on the end, use class="suffix-XX" instead of append. I kept finding myself trying to remember if append came before or after, so I changed it.
Whenever a column is the last column in a row of columns, make sure to add class="last" so that everything lines up correctly. That's pretty much it. Here's a more complete example:
-
<div class="container">
-
<div class="span-24">Header</div>
-
<div class="span-3 suffix-1">Left sidebar</div>
-
<div class="span-16">
-
<div class="span-8">Box1</div>
-
<div class="span-4">Box2</div>
-
<div class="span-4 last">Box3</div>
-
<div class="span-16 last">Main content</div>
-
</div>
-
<div class="span-4 last">Right sidebar</div>
-
<div class="span-24">Footer</div>
-
</div>
For some more usage instructions, view the source code of the grid demonstration (link above).
Typography Usage
Most of the typography will work itself out. I've added Blueprint's pretty links plugin, so external links, or special links (such as pdf's, doc's, rss feeds, etc.) will get a little icon next to them so users know what they're clicking on. Forms should also prettify themselves without any extra work from you. Tables, blockquotes, all that good stuff is also styled sensibly by default (thanks to Tripoli).
I've also kept Blueprint's status messages, so adding class="success" or class="notice" or class="error" will get you some really clean looking status messages to use. There are a few other text classes to take a look at, and you can use them all or ignore them completely if you don't think they're necessary. I liked them, so I kept them.
Adding Your Own Styles
Do not change any of the three stylesheets, because that will make upgrading to later versions a pain. I've included a "style.css" that's more or less empty so you can make your own changes to it, overriding anything that's in BlueTrip or adding things.
And that's that. I've included the license (GPL or MIT) so feel free to do whatever you want with it.
Once again, I won't flatter myself into thinking that this is a full fledged CSS framework. It's just a combination of the EXCELLENT work of others all rolled into one neat little package. If you think it's too much, then go check out Boilerplate or something a little more minimalistic. I knew what I wanted, and I thought there was a chance that perhaps somebody else was looking for the same thing. I hope you found something you liked.
Please let me know if you try it out and find bugs or have recommendations!
May 20th, 2008 at 11:11 pm
Mike you are the man!! this is awesome, thanks!
May 23rd, 2008 at 6:50 am
I just used this. Good Work.
May 23rd, 2008 at 7:38 am
Thanks guys. Let me know if you find any bugs or have any recommendations.
June 2nd, 2008 at 10:41 am
Excellent framework Mike. It worked great for my site.
June 5th, 2008 at 12:39 am
[…] BlueTripCSS Jest to modyfikacja Blueprint CSS. […]
June 5th, 2008 at 4:52 pm
Mike, your grid demo does not work as expected, should be a bug ?
Take a look at the 123453 suffix example and 24 span-1 block lines.
I will use it for sure
Thanks.
June 5th, 2008 at 6:22 pm
Nice catch Mercelo. I fixed it. Lines 301 and 302 of screen.css needed to be removed (they were the CSS declarations for .container .first and .container .last). They are deprecated. Thanks for that and for the comment.
June 28th, 2008 at 3:09 pm
Wow! nice stuff. I found first,last better than alpha, omega. Nice convention finally.
July 5th, 2008 at 9:04 pm
Dam fine work! Thank you very much.
July 18th, 2008 at 10:45 am
This looks like exactly what I’ve been looking for - thank you for sharing your work. I had planned altering Blueprint to improve the typo but now I don’t even have to do that and can dive straight into design.
Best wishes
July 21st, 2008 at 11:21 pm
The clearfix solution causes issues with background images in a div and padding of elements. it ends up adding space at the bottom of the div. After searching profusely and getting yelled at by SWMBO to come to bed I found the following:
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Might help others that have ran into a similar issue.
August 3rd, 2008 at 8:08 am
[…] BlueTrip Combines the grid system from Blueprint with the typography from Tripoli. […]
August 7th, 2008 at 1:49 am
this framework or all the stuff have u done is good , but i want to know
1. can i use blueprint grid generator with this ?
2. can i use the blueprint plugin like silkicon , silkflag with this framework?
August 13th, 2008 at 3:00 pm
The best css framework so far , it’s time for some extreme design ,thanx bro nice work.
August 19th, 2008 at 12:49 pm
@jitendra
The blueprint grid generator will not really be useful with BlueTrip unless you just want to take out the built in grid and paste in the generated code. It would work but it might take some tweaking.
All of the plugins should work correctly.
August 26th, 2008 at 11:45 pm
There are some “…:before {container:…}” in screen.css, shouldn’t that be ‘content’?
August 27th, 2008 at 12:24 am
Line 304 “.container .error, .notice, .success {…}” might be a flaw, it looks a bit like it was meant to say “.container .error, .container .notice, .container .success {…}”.
August 27th, 2008 at 7:45 am
@snlr
Right on both counts. The second one had been fixed months ago, not sure how it found it’s way back in there. Thanks for checking and improving BlueTrip.
August 27th, 2008 at 9:19 am
Apropos checking Bluetrip - great work! Just implemented it into the CMS of my choice. Instant Awesomeness.
September 4th, 2008 at 10:35 am
I found that it is an advantage to add input[type=’password’] to any input[type=’text’], so that the two look similiar when they appear together in a form.
September 9th, 2008 at 5:51 am
why does FireFox 3 always display two bullets with every li in ul?
September 9th, 2008 at 6:17 am
@jugeh
Finally had to remove the ul li:before{content: “awesomeness”;} line.It will now render with the default bullets which look alright.
Thanks for noticing.
September 9th, 2008 at 7:15 am
@Mike
Thanks for the tip.
Opera 9.5 and Safari 3.1 are also working like FF3,
so IE must be the bad boy as always
September 18th, 2008 at 7:15 am
screen.css ~28: “mono-space”
September 18th, 2008 at 8:03 am
Fixed. Thanks again snlr.
September 22nd, 2008 at 5:31 am
omg.. good work, dude
October 25th, 2008 at 2:47 pm
Let me say how much I enjoy your site. It is very useful and informative about all the technologies I am using at the moment: jquery, css, codeigniter, php, and bluetrip css. You have also helped me discover a nice light CMS engine, TextPattern, which I also like to use on smaller sites.
I have used bluetrip css on a couple of projects I am working on. It’s great.
The only thing irritating about bluetrip is that it uses too detailed a specificity on some of its tags. Sometimes, when I go to override a particular tag or id in css, I find I have to use the !important tag to do it, after trying to figure out why my styles were not working and fooling with increasing the specificity. This seems to happen the most on the mouse pseudo-classes and the button tag at the end of the screen.css file. If you were to lower the specificity in these areas it would make things a tad less frustrating. Although in looking at the screen.css file, I’m not sure how I’d go about doing that. I do not particularly want to edit the screen.css file for obvious reasons. So the designer’s solution is to just add more id’s to the xhtml file to give the style.css more specificity breathing room so to speak. It’s just that the good designer in me objects to multiple id tags all over my xhtml files.
October 25th, 2008 at 10:49 pm
@Dale,
Thanks for the kind words! I have to say I haven’t encountered any problems with overriding BlueTrip’s styles, so could you give me a specific example that I can duplicate and try and work out a solution? I completely understand your frustrations because, after all, clean markup is good markup, and any extra id’s just dirty it. So I’d be happy to work on it, just need some specifics.
October 26th, 2008 at 9:28 am
Your Web Site is really wonderful and I bookmarked it. Thank your for the hard work you must have put in to create this wonderful facility. Keep up the excellent work!
October 28th, 2008 at 4:40 pm
[…] loving it so far. UPDATE: I’ve released this fusion as a standalone framework called BlueTripCSS. Check it […]
October 29th, 2008 at 4:53 am
this is the beauty of the intertubes: improve and share!
i was in the same situation (not satisfied by one of the frameworks) and thought of doing something similar. now you we’re quicker than me
thanks for sharing, this looks awesome!
November 1st, 2008 at 3:24 am
[…] templates to see how it fares. If that works well, the next step is refactoring the template with BlueTrip, and moving a complete UNM site […]
November 1st, 2008 at 3:28 pm
Up-front, using BT seems acceptable, even enticing (with the best parts of each now at your fingertips under one roof). However, without long-term strategy for the framework and how it will grow, it would be a hard pill to swallow — adapting to something that could potentially be outdated the same day it is downloaded (there were 7 commits to Blueprint just last week alone).
What are your plans for version updates to BlueTripCSS; ie, will updates to the “things taken” from Blueprint or Tripoli, that are essential to BT, be rolled in? Also, do you plan on implementing SVN — I can’t see line-by-line fixes mentioned in the comments of this blog post going very far.
November 2nd, 2008 at 7:41 am
@Jeremy
Thanks a lot for your concern (no, seriously). First of all, in response to your comments about SVN, I (as I said in the post) originally meant for the BT to be for me, and if anyone else wanted it, then fine. I thought maybe a couple people would find it useful. I never thought it would become as popular as it is (even though it’s nowhere in the realm or Tripoli or Blueprint, it’s doing pretty well for itself, especially with the main method of communication being this post’s comments). Now that it’s being used as much as it is, I’ve begun work on a dedicated site for it, with much better documentation, communication, and revision tracking (haven’t yet decided on hosting an SVN implementation or just linking to SourceForge or Google Code, but either way, it will be included).
And in response to your concerns about Blueprint and Tripoli updates, I have no intention of updating as they update. I used them as a starting point to make BT, and now it’s become a framework independent of the other two. Think of it like Blueprint and Tripoli had a lovechild, which is BT. It can grow and change and do whatever it wants, regardless of how its parents are changing.
I hope that answers some of your questions.
November 6th, 2008 at 11:26 am
Nice stuff! Very useful. Thanks a lot! I hope you can host this project somewhere soon.
November 8th, 2008 at 5:02 am
[…] BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs Quand les frameworks CSS blueprint et Tripoli se retrouvent (tags: webdesign typography tripoli grid frameworks css) […]
November 8th, 2008 at 7:53 pm
[…] Bluetrip […]
November 9th, 2008 at 1:22 am
Just saw this … looks great and I’m definitely going to try it!
November 9th, 2008 at 2:32 am
I like how you have nice icons for the framework. But I also notice that they live in the img directory at the same level as the css dir… since such icons are referenced by the css with url(), would it be easier to move the img dir under the css dir?
That has a nice benefit of having css stuff separate from other img stuff I may have in the site.
November 9th, 2008 at 3:03 am
more .. please see http://www.mofeier.com
November 9th, 2008 at 3:03 am
[…] November 9, 2008 BlueTripCSS Framework - Blueprint meets Tripoli | Capsize DesignsCSS Frameworks have been a hot topic the past few months. Although they’ve been getting a lot […]
November 9th, 2008 at 4:00 am
[…] BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs (tags: css webdesign) […]
November 9th, 2008 at 4:23 am
nice work. gonna try and use this on my next project.
btw, you’re using attribute selectors to style form elements. r u sure it’s compatible with older browsers?
November 9th, 2008 at 7:37 am
Any recent developments on this? Blueprint has moved on a bit since April but I do prefer your approach.
November 9th, 2008 at 11:14 am
BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs…
[…]CSS Frameworks have been a hot topic the past few months. Although they've been getting a lot of heat from semantic freaks and minimalists (for adding
Saved By: vishnu | View Details | Give Thanks[…]…
November 9th, 2008 at 1:31 pm
[…] BlueTripCSS Framework - Blueprint meets Tripoli […]
November 9th, 2008 at 7:32 pm
[…] BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs (tags: design development web webdev reference tools webdesign opensource framework templates library css typography ui) […]
November 10th, 2008 at 12:00 am
[…] BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs (tags: framework design development webdesign css library opensource webdevelopment frameworks blueprint templates) […]
November 10th, 2008 at 3:27 am
nice job!
you could include iconize in the package.
this way you would support more file-types and have the code in another css file which could be updated without touching the bluetrip css file.
November 10th, 2008 at 4:49 am
Two of the icons in the download need re-sizing: external.png and visited.png - both are 48kb when they should be less than 1kb each.
November 10th, 2008 at 5:41 am
[…] of his changes). Since most of it came from BlueprintCSS or Tripoli, This CSS Framework is called BlueTrip. The end result ended up really nice. Requirements: - Demo: […]
November 10th, 2008 at 7:36 am
[…] Demostración: http://capsizedesigns.com/blog/2008/04/bluetripcss… Categorized as Aplicaciones/CSS […]
November 10th, 2008 at 7:58 am
[…] BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs CSS Frameworks, Good Idea? Bad Idea? (tags: design CSS framework typography library web webdesign webdevelopment grid django tools templates development reference webdev opensource ui dev frameworks cssframework bluetrip blueprint tripoli) […]
November 10th, 2008 at 8:41 am
[…] BlueTrip CSS é framework formado por um mix de vários outros frameworks tais como: 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, e Boilerplate. Seu criador somou as melhores técnicas utilizadas nesses Frameworks em um só. […]
November 10th, 2008 at 9:36 am
Looks quite interesting!… I tried your typography page in IE though and the buttons do not display properly… Any clue?
Thanks for sharing your work!
Mike
November 10th, 2008 at 7:05 pm
From vBharat.com » BlueTripCSS Framework - Blueprint meets Tripoli…
CSS Frameworks have been a hot topic the past few months. Although they’ve been getting a lot of heat from semantic freaks and minimalists (for adding unnecessary code), I think they’re a step forward. As I’ve said before, web design is about doing …
November 10th, 2008 at 7:57 pm
[…] I went looking for info on CSS frameworks. I found a very interesting article that led me to the BlueTripCSS Framework by Mike from Capsize […]
November 10th, 2008 at 8:16 pm
Mike, about your question “Would you be in favor of making the link images a plugin rather than included by default?”, I like the icons for downloadable content like PDF. But I think that for most sites icons for external links are not needed and, specially, different icons for visited external links. Maybe for only these two kinds of links you could make the icon optional. It’s not a big trouble to disable them, but it took me a few minutes and two tries (at first I forgot to disable the visited link icon).
Thanks a lot for this great work. Cheers!
November 10th, 2008 at 9:14 pm
Mike, great stuff. If you’re going to put the code up, Skip SVN and consider GitHub (github.com) for code hosting. It’s free for open-source packages and makes it trivial for folks to send you patches (or fork in a new direction if they want to do a wild experiment). I don’t work for them, just impressed with the code graph part of the system.
November 10th, 2008 at 9:41 pm
Any thoughts on a 960px(+) version?
November 11th, 2008 at 12:23 am
[…] la redacción de CSS para nuestras páginas, cada una de ellas tiene sus virtudes y defectos, BlueTripCSS es un framework que toma las mejores características de estos frameworks (960.gs, Blueprint, […]
November 11th, 2008 at 2:01 am
[…] BlueTripCSS Framework - Blueprint meets Tripoli | Capsize Designs (tags: webdesign framework) […]
November 11th, 2008 at 2:15 am
Since most of the world still uses IE6 …cough …loser says what… cough, I think it should be pointed out that many of your advanced techniques do not work in IE6 - such as transparent PNGs and appended file specific and offsite icons. Have you ever tried IE7.js (http://code.google.com/p/ie7-js/)? It forces IE6 to act like IE7 or even IE8 (that natively support these advanced features). May be a deadly combonation. WDYT?
November 11th, 2008 at 9:10 am
Interesting project:Minimalistic grid(960) + beautiful typography(Tripoli) + Web Printing(Hartija)
November 11th, 2008 at 11:12 am
The buttons seem to be broken in Internet Explorer 7. I tried in two machines (one with XP and other with Vista): http://img236.imageshack.us/my.php?image=brokeniq1.png
November 11th, 2008 at 3:37 pm
Hey all, thanks for your interest in BlueTrip. I’ve started work on a dedicated site for it at bluetrip.org so please go there in the future for documentation, downloads, and anything else related to BT. It’s a work in progress and it currently lacks documentation and a discussion forum, but it’s on the way!
Happy coding!
P.S. To anyone asking about compatibility with IE for the buttons, I’m in the process of moving buttons, message styles, and link images to plugins rather than included in BT by default, and then then I will focus on any compatibility issues you all are seeing.
November 12th, 2008 at 8:24 am
Its the best framework I have ever use!
Regards,
zasilenie
November 12th, 2008 at 12:01 pm
Congrats!
@Mike I think that Hartija CSS Framework deserves to be mention like part of this project.
November 12th, 2008 at 6:42 pm
[…] Bluetrip […]
November 13th, 2008 at 4:19 am
Nice framework! If I want a div to span 100% width of the page how would this be accomplished? I would like to use the grid, but say have a navigation bar below the header be 100% wide. Any ideas? Thx
November 14th, 2008 at 11:36 am
Mike, I like what you are doing. Let’s talk. sirokai [at] gmail.com
November 18th, 2008 at 10:34 pm
This is what I looking for all the time. Thanks Mike.
November 19th, 2008 at 1:18 am
[…] of his changes). Since most of it came from BlueprintCSS or Tripoli, This CSS Framework is called BlueTrip. The end result ended up really […]
November 19th, 2008 at 7:35 am
Great work.
I have a doubt.
Suppose if I have to apply a border to a span box what do I have to do ?.
November 19th, 2008 at 12:11 pm
@rsk
Is there a reason you can’t use outlines instead? That way you don’t mess with the margins.
November 25th, 2008 at 2:05 am
Thans for your reply.Outline is great idea.But it is not working in IE.we are targeting for IE6+.
So should I go for creating separate span classes like spanWithBorder-1,spanWithBorder-2 …
Please suggest,.
November 25th, 2008 at 10:03 am
I have another doubt.
Can I modify this FW to support 1024 X 768.i.e adding two spans(span-25 for 990px and span-26 for 1024px)?
Thanks.
November 25th, 2008 at 11:19 am
@all
There is now a dedicated forum at bluetrip.org/forum. Please direct any further questions there. I’m going to go ahead and close comments on this post. Thanks for your support!
December 31st, 2008 at 3:22 am
[…] sumber: http://capsizedesigns.com/blog/2008/04/bluetripcss-a-fusion-of-blueprint-and-tripoli/ […]