UPDATE: I've moved my whole blog to a new domain. That's why the comments section is closed here. The new URL for this post is http://www.leonardofischer.com/how-to-legally-steal-the-look-and-feel-of-twitter/. If you have any question, post it there.
Sometimes you don't have the resources to invest on the design of your new site. "We're on the prototyping stage". "I don't have money to pay a designer". If you're a programmer (like me) and know the basics of HTML and CSS, you still can easily add some cool effects to your site. This post is just a tip on how can you get some of the effects you see on Twitter.
But please, don't do this to every site you work on. I like to see different designs on different sites. If all sites start to copy each other's design, the web will became boring. Invest on the design of your site as soon as possible ツ
The Bootstrap Project
No, you don't need to hack Twitter to copy the CSS declarations. Twitter itself keeps an open source project called Bootstrap, with some of the layouts used in the Twitter site: buttons, tabs, grids and most effects you see there. It is very simple to use in a simple website. Just put the following code on the HEAD section of your HTML, and half of the work is done:
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
The Grid System
Something that was new for me until a few weeks ago is that there are some very common dimensions used in very different sites. The usually called the "grid system" is just a convention to use a big column 960 pixel wide, divided in 16 columns of 40 pixels, with 20 pixels of space between them. You combine how many columns you want to distribute your page content and it probably will have a good look. Bootstrap has one implementation of the grid system. If you want to use only the grid system I recommend you to use the 960 Grid, as it is smaller than the whole Bootstrap.
Pretty Input
Another cool thing on Bootstrap is the gloom effect on input fields. Let's see it:
There is also a fork of the project on GitHub, adding a few more options to personalize the input fields. You may want to give a look.
Improving Usability
Bootstrap also gives some JavaScript codes that can help you add some common behaviors in web pages these days. It is based on JQuery plugins, so if you already know JQuery, you will have no trouble with it.
Well, this is just a cool project that I've found, and I thought it was veeeery interesting. I believe you too. I could develop some demo, but the Bootstrap page itself is very complete and self-explanatory, so I just took some images to illustrate what Bootstrap is capable of. But if you know other projects such as this one, please leave a comment.
UPDATE 1: recently, I discovered a similar project called Fbootstrapp, which can be used to develop Facebook apps with the Facebook look-and-feel.
UPDATE 2: I've moved my whole blog to a new domain. That's why the comments section is closed here. The new URL for this post is http://www.leonardofischer.com/how-to-legally-steal-the-look-and-feel-of-twitter/. If you have any question, post it there.
Really cool, thanks for sharing!
ReplyDelete