We’ve been working with Bootstrap since it first came out. Soon our new webapp (Richmetrics.com) will be released and it’s all based on Bootstrap. Heavily modified but still, the building blocks is in there. It’s been a pleasure to work with Bootstrap! Thanks for the insight.
Great article, Bootstrap really takes things to the next level. I am interested to hear a little more about how you decided to include Less in the project. For myself, working with Sass allows an immense degree of flexibility that CSS just doesn’t provide for large frameworks. Bootstrap is pioneering these new styling systems and I am fascinated to see where this takes us. Like the leap to content management systems from HTML, will this be a leap to style management systems?
Great stuff and thanks for writing and making Bootstrap open source!
Mark, you’ve done a great job with Bootstrap. I absolutely love it. IT’s rejuvenated my development experience – I really am no designer, but Bootstrap has helped me to knock out some simple UIs for various projects and ideas – it really has been a joy to use.
Thank you! And thanks for your support with Built With Bootstrap. It’s been amazing to see what hundreds of other developers and designers have been able to do with this brilliant toolkit.
erogers, if you take a look at the 2.0 branch on the Bootstrap Github repo you’ll see a bunch of responsive goodness. So it is coming, just not released quite yet.
In the ALA Topics description for this article it says “Proper document markup. Separating structure from presentation and behavior.” I fail to see how any grid system separates structure from presentation. Markup such as class=“span6” or class=“col_6” are clearly presentational classnames.
There are many of these types of tools out there by other good folks trying to do exactly what you are trying to achieve. Simple prototyping with responsive grid layouts is enviable goal, how does your project differ from others (such as Foundation – http://foundation.zurb.com/docs/)?
We wasted soo much time designing our new site. Bootstrap means we can focus on functionality without having to worry about what it looks like. Our designer is happy. Our tech team love it. Its a great project. Thanks for sharing with the world. I will post link when we go live.
I was tasked to build or find a toolset that would create consistency within our app (www.3point5.com, www.promotive.com) that could span across different theming and it didn’t take long to find bootstrap paired with LESSCSS was the perfect solution for us.
As we grow and more designers that don’t always get into the code as often but that do new feature mocks for the app I’ve found that having a PSD/Fireworks file for them to pull components from that match the bootstrap framework is useful. I took it upon myself to create one, with the help of @gradykelly’s firework template I converted it over to PSD and have started to refine it and provide it as a resource for our designers.
// Twitter Bootstrap PSD Template
If anyone here wishes that there was a PSD of the Twitter Bootstrap 2.0 toolset I’ve started one. Hopefully designers will find it useful. I’ll be improving it and trying to keep up with the geniuses over at twitter.
Copy & paste the code below to embed this comment.
Alann
Bootstrap does a great job packaging everything an all in one toolkit. The only problem I have run into with using Bootstrap is that it is very CSS heavy. I found that on one website, I was actually using a third of the CSS that Bootstrap has by default.
The kit itself, I think, would be great for individuals with less front end development experience as I feel more restricted when I have so many options to choose with JS without Bootstrap. Then again, there may be a project where I will be handing everything off to less knowledgeable customers who would not be able to make future changes easily without Bootstrap.
Today most servers and browsers deal ascii content gzipped—css is repetitive and so compresses extremely well, therefore with most sites there hardly shouldn’t be a noticeable delay. I’m not sure about a possible delay due to more work for the browser’s rendering engine, though. If there is one, Google might detect and penalise it.
I have been digging into Bootstrap lately. I just posted my experience with using LESS and Bootstrap together to achieve semantic markup – http://blog.appliedis.com/2013/02/04/bootstrap-with-less/
It links to a working example and also the github repo of the source code for the example.
I think it’s great for prototyping your app. Before you’ll open photoshop you need to interact with interface, make some test with other people, so you can decide: is it good enough?
21 Reader Comments
Back to the Articleakebrattberg
We’ve been working with Bootstrap since it first came out. Soon our new webapp (Richmetrics.com) will be released and it’s all based on Bootstrap. Heavily modified but still, the building blocks is in there. It’s been a pleasure to work with Bootstrap! Thanks for the insight.
erogers
It looks great on the desktop! But sadly it’s not mobile/responsive/adaptive, etc.
Scott Kellum
Great article, Bootstrap really takes things to the next level. I am interested to hear a little more about how you decided to include Less in the project. For myself, working with Sass allows an immense degree of flexibility that CSS just doesn’t provide for large frameworks. Bootstrap is pioneering these new styling systems and I am fascinated to see where this takes us. Like the leap to content management systems from HTML, will this be a leap to style management systems?
Great stuff and thanks for writing and making Bootstrap open source!
simonhamp
Mark, you’ve done a great job with Bootstrap. I absolutely love it. IT’s rejuvenated my development experience – I really am no designer, but Bootstrap has helped me to knock out some simple UIs for various projects and ideas – it really has been a joy to use.
Thank you! And thanks for your support with Built With Bootstrap. It’s been amazing to see what hundreds of other developers and designers have been able to do with this brilliant toolkit.
@eduardovilar
Mark I want to thank for putting all this together. Bootstrap helps us cut costs and speed product launch.
Jeff Adams
erogers, if you take a look at the 2.0 branch on the Bootstrap Github repo you’ll see a bunch of responsive goodness. So it is coming, just not released quite yet.
anandanjaria
Thanks a ton for Twitter Bootstrap… I am now eagerly waiting for v 2.0… Is there any expected date of release?
shawndones
In the ALA Topics description for this article it says “Proper document markup. Separating structure from presentation and behavior.” I fail to see how any grid system separates structure from presentation. Markup such as class=“span6” or class=“col_6” are clearly presentational classnames.
clintonpaquin
There are many of these types of tools out there by other good folks trying to do exactly what you are trying to achieve. Simple prototyping with responsive grid layouts is enviable goal, how does your project differ from others (such as Foundation – http://foundation.zurb.com/docs/)?
Mykola
A great tool, just a quibble:
> As one last step during abstraction to Bootstrap,
> we opted to have the behavior triggered on click
> rather than on hover
Would be handy if the user gets to choose—messing with the JS source might not be advisable.
matthewpack
We wasted soo much time designing our new site. Bootstrap means we can focus on functionality without having to worry about what it looks like. Our designer is happy. Our tech team love it. Its a great project. Thanks for sharing with the world. I will post link when we go live.
LxwebSolutions
i just feel its a great product great work you have done seriously
visio113
This is just my sing up and would like to say hello to all of you. I think that I could make my contribution to this blog in the future.
benpeck
I was tasked to build or find a toolset that would create consistency within our app (www.3point5.com, www.promotive.com) that could span across different theming and it didn’t take long to find bootstrap paired with LESS CSS was the perfect solution for us.
As we grow and more designers that don’t always get into the code as often but that do new feature mocks for the app I’ve found that having a PSD/Fireworks file for them to pull components from that match the bootstrap framework is useful. I took it upon myself to create one, with the help of @gradykelly’s firework template I converted it over to PSD and have started to refine it and provide it as a resource for our designers.
// Twitter Bootstrap PSD Template
If anyone here wishes that there was a PSD of the Twitter Bootstrap 2.0 toolset I’ve started one. Hopefully designers will find it useful. I’ll be improving it and trying to keep up with the geniuses over at twitter.
http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/
Alann
Bootstrap does a great job packaging everything an all in one toolkit. The only problem I have run into with using Bootstrap is that it is very CSS heavy. I found that on one website, I was actually using a third of the CSS that Bootstrap has by default.
The kit itself, I think, would be great for individuals with less front end development experience as I feel more restricted when I have so many options to choose with JS without Bootstrap. Then again, there may be a project where I will be handing everything off to less knowledgeable customers who would not be able to make future changes easily without Bootstrap.
Mykola
Today most servers and browsers deal ascii content gzipped—css is repetitive and so compresses extremely well, therefore with most sites there hardly shouldn’t be a noticeable delay. I’m not sure about a possible delay due to more work for the browser’s rendering engine, though. If there is one, Google might detect and penalise it.
Mykola
…there hardly should be
Ash Tewari
I have been digging into Bootstrap lately. I just posted my experience with using LESS and Bootstrap together to achieve semantic markup – http://blog.appliedis.com/2013/02/04/bootstrap-with-less/
It links to a working example and also the github repo of the source code for the example.
Liam
I have only recently found Twitter Bootstrap and love it for developing the project core. So glad it was shared and OS!
jumtree
I have only recently found Twitter Boots trap and love it for developing the project core. So glad it was shared here & OS!
Vit Karpov
I think it’s great for prototyping your app. Before you’ll open photoshop you need to interact with interface, make some test with other people, so you can decide: is it good enough?
After it could be taken final shape