Twitter Bootstrap For Beginners
June 5, 2012 12:26 PM Subscribe
Bootstrap is Twitter's toolkit for creating rich and more consistent web interfaces across browsers and devices. The Bootstrap ecosystem offers, among other things, an iconic font, themes, a customization generator, themes for Wordpress / Drupal + / Joomla, templates for Fireworks / Photoshop, a button generator and a jQuery UI theme.
How to get started? Check out this tutorial or this series or even this.
Built With Bootstrap has lots of examples on how developers are putting Bootstrap to good use.
Template frameworks like Bootstrap have long appealed to me: they make it possible to have a custom template without needing to be a designer (or hire one). As someone who runs a few different websites on a shoestring budget, there is a lot of potential here.
Unfortunately, despite being "decent" when it comes to basic HTML and other web-related coding, I tend to suck at properly deploying these "template frameworks" which are supposed to be so easy to use. The various tutorial information in the FPP are helpful.
posted by asnider at 12:40 PM on June 5, 2012
Unfortunately, despite being "decent" when it comes to basic HTML and other web-related coding, I tend to suck at properly deploying these "template frameworks" which are supposed to be so easy to use. The various tutorial information in the FPP are helpful.
posted by asnider at 12:40 PM on June 5, 2012
God, I love Bootstrap. We just wrote a videoblogging service, and Bootstrap means the sites look great across screen sizes, while maintaining user customizations, and without using icky phone-only templates. And the integration took under a day. Love love love it.
posted by bwerdmuller at 12:57 PM on June 5, 2012
posted by bwerdmuller at 12:57 PM on June 5, 2012
I've been using Bootstrap for a while now on some internal projects at work - an intranet interface, some standalone tools, etc. Very elegant and easy to get things up and running.
posted by phong3d at 1:03 PM on June 5, 2012
posted by phong3d at 1:03 PM on June 5, 2012
OK. You've convinced me. I'll take another look at bootstrap.
posted by samhyland at 1:07 PM on June 5, 2012
posted by samhyland at 1:07 PM on June 5, 2012
After a terrible experience with YUI back in the day, I've been wary of all-encompassing frameworks -- it seems like to get the benefit of the framework, you have to use their CSS and their grid and their markup and their typography and their javascript widgets....
It's great if you need to deploy quickly and don't care much about the fact that your site will look similar to every other site that uses the same framework, I guess, but I always seem to end up spending more time fighting against these frameworks than working within them. I'd rather have six small frameworks that each do one thing well than one gigantic one that wants complete control of the site.
But this is good timing, as I've just been hired on to a job whose key developer is pushing hard for us to use bootstrap, and I've been procrastinating hard on digging into it.
posted by ook at 1:13 PM on June 5, 2012
It's great if you need to deploy quickly and don't care much about the fact that your site will look similar to every other site that uses the same framework, I guess, but I always seem to end up spending more time fighting against these frameworks than working within them. I'd rather have six small frameworks that each do one thing well than one gigantic one that wants complete control of the site.
But this is good timing, as I've just been hired on to a job whose key developer is pushing hard for us to use bootstrap, and I've been procrastinating hard on digging into it.
posted by ook at 1:13 PM on June 5, 2012
OK. You've convinced me. I'll take another look at bootstrap.
Bootstrap can definitely be overwhelming at first, especially since so much of its functionality comes from various plugins. I've found the examples to be pretty decent at illustrating how Bootstrap looks in action.
posted by Foci for Analysis at 1:13 PM on June 5, 2012
Bootstrap can definitely be overwhelming at first, especially since so much of its functionality comes from various plugins. I've found the examples to be pretty decent at illustrating how Bootstrap looks in action.
posted by Foci for Analysis at 1:13 PM on June 5, 2012
Yep. I've used it on 3 projects so far, and it's indispensable, because it lets you get up and running almost instantly.
Of course, you should also add your own styles to the mix, but Bootstrap is great because it lets you hit the ground running, and start with some nice looking base styles and browser-tested layouts.
The Normalize.css reset that Bootstrap uses is also very handy. It's a slightly more 'humane' CSS reset, because it leaves you with some useful default styles instead of setting everything to 0.
posted by schmod at 1:15 PM on June 5, 2012
Of course, you should also add your own styles to the mix, but Bootstrap is great because it lets you hit the ground running, and start with some nice looking base styles and browser-tested layouts.
The Normalize.css reset that Bootstrap uses is also very handy. It's a slightly more 'humane' CSS reset, because it leaves you with some useful default styles instead of setting everything to 0.
posted by schmod at 1:15 PM on June 5, 2012
Bootstrap fan here too. Though font sizes are too small. I have no idea why people on the internet are still working at 10/12px.
posted by zoo at 1:21 PM on June 5, 2012 [1 favorite]
posted by zoo at 1:21 PM on June 5, 2012 [1 favorite]
I've been using Bootstrap for a while now on some internal projects at work - an intranet interface, some standalone tools, etc. Very elegant and easy to get things up and running.
Same here. I don't feel like I know it well enough to point it at the world, but in combination with Sinatra it's really easy to bang out quick, small tools or wrap existing Ruby scripts in a Web interface I can share. Also nice with Serve for fast static sites (or sites that need no more data than a YAML file).
Seems to use a lot of classes and conventions similar to Blueprint, which was my last big CSS framework crush, so it's easy to convert existing things to Bootstrap, too.
posted by mph at 1:21 PM on June 5, 2012
Same here. I don't feel like I know it well enough to point it at the world, but in combination with Sinatra it's really easy to bang out quick, small tools or wrap existing Ruby scripts in a Web interface I can share. Also nice with Serve for fast static sites (or sites that need no more data than a YAML file).
Seems to use a lot of classes and conventions similar to Blueprint, which was my last big CSS framework crush, so it's easy to convert existing things to Bootstrap, too.
posted by mph at 1:21 PM on June 5, 2012
mph: "but in combination with Sinatra it's really easy to bang out quick, small tools or wrap existing Ruby scripts in a Web interface I can share"
If you're a PHP person, I've been loving Slim, which is a Sinatra-esque router for PHP.
posted by schmod at 2:05 PM on June 5, 2012 [1 favorite]
If you're a PHP person, I've been loving Slim, which is a Sinatra-esque router for PHP.
posted by schmod at 2:05 PM on June 5, 2012 [1 favorite]
Plug for myself....
https://github.com/anthroprose/spitshine
Spitshine - On-the-fly form validation written for bootstrap, extendable & expandable to other frameworks
posted by anthroprose at 2:21 PM on June 5, 2012
https://github.com/anthroprose/spitshine
Spitshine - On-the-fly form validation written for bootstrap, extendable & expandable to other frameworks
posted by anthroprose at 2:21 PM on June 5, 2012
Also, you totally don't need to use any of the plugins. Bootstrap plays nicely with other JavaScript libraries and CSS stylesheets, and gives you enough useful styles to make it easy to roll your own widgets if you're competent with JavaScript.
Remember that Bootstrap is not, and is not meant to be a substitute for actually knowing how to do things with CSS or JavaScript. It's just a very good boilerplate to start with, and build things on top of. It's not a monolithic framework, and that paradigm is (thankfully) starting to die, as developers seem to be marching toward disparate microframeworks that can be mixed and matched according to any project's need. A lot of attention is now being paid to client-side JS 'package managers' such as ender.
posted by schmod at 2:21 PM on June 5, 2012
Remember that Bootstrap is not, and is not meant to be a substitute for actually knowing how to do things with CSS or JavaScript. It's just a very good boilerplate to start with, and build things on top of. It's not a monolithic framework, and that paradigm is (thankfully) starting to die, as developers seem to be marching toward disparate microframeworks that can be mixed and matched according to any project's need. A lot of attention is now being paid to client-side JS 'package managers' such as ender.
posted by schmod at 2:21 PM on June 5, 2012
And I came on MeFi to procrastinate from adding bootstrap classes to all the forms on our site..
Your whole point is that you are not work-related, Metafilter!
posted by jeisme at 2:35 PM on June 5, 2012
Your whole point is that you are not work-related, Metafilter!
posted by jeisme at 2:35 PM on June 5, 2012
I use Bootstrap for some rapid prototyping work around the office, especially when I need more than a Balsamiq wireframe but I don't want to go into the faux-HTML world of Axure for an interactive design.
One of the really nice things about Bootstrap is it integrates well with LESS and SASS.
posted by dw at 4:06 PM on June 5, 2012
One of the really nice things about Bootstrap is it integrates well with LESS and SASS.
posted by dw at 4:06 PM on June 5, 2012
I used it to make my quick and dirty professional page, but it seems like such a waste to have a 350k (ALMOST HALF A MEGABYTE GUYS) CSS file for a page that shows maybe 40 lines of text.
Some of the examples supplied by Twitter seem to assume that you already know how to configure and implement JQuery, too, which was a much larger stumbling block for me than the actual layout.
posted by tmt at 4:09 PM on June 5, 2012
Some of the examples supplied by Twitter seem to assume that you already know how to configure and implement JQuery, too, which was a much larger stumbling block for me than the actual layout.
posted by tmt at 4:09 PM on June 5, 2012
tmt you don't need to include more than 35K worth of files for a simple site. I use it on my professional site and only use two css files, and those aren't even the complete file. They have a widget on the site to roll a custom set, where you select the stuff you plan to use and leave out the stuff you don't want to use.
posted by inthe80s at 4:46 PM on June 5, 2012 [1 favorite]
posted by inthe80s at 4:46 PM on June 5, 2012 [1 favorite]
Is this the thing people were whining about not using semicolons or not working with exposing flaws in minify?
Anyway, what is it with web front end people and cute names for everything? "Bootstrap" tells you nothing about what it is. I mean I'm sorry but a comment like this:
Also, there seems to be this whole aura of 'cuteness' that web front-end people want to stick on all their stuff that I find kind of annoying. Copy like this from the page on bootstrap:
I rarely hear that kind of thing from people who do other kinds of programming, whether it's embedded stuff, or desktop apps, or even when talking about game programming or iPhone/Android stuff. The only framework I've heard of for mobile phones is PhoneGap which pretty much tells you exactly what it's supposed to do right in the name
posted by delmoi at 6:20 PM on June 5, 2012 [1 favorite]
Anyway, what is it with web front end people and cute names for everything? "Bootstrap" tells you nothing about what it is. I mean I'm sorry but a comment like this:
I use Bootstrap for some rapid prototyping work around the office, especially when I need more than a Balsamiq wireframe but I don't want to go into the faux-HTML world of Axure for an interactive design.Just sounds kind of ridiculous to me. "jQuery" at least gives you the gist of what it does right in the name. "Bootstrap" doesn't tell you anything, really, about what it does, although I suppose it does try to give you an idea of what it's supposed to do for you: help you get you app (or whatever) up and running quickly.
One of the really nice things about Bootstrap is it integrates well with LESS and SASS.
Also, there seems to be this whole aura of 'cuteness' that web front-end people want to stick on all their stuff that I find kind of annoying. Copy like this from the page on bootstrap:
Built for and by nerds: Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.This along with all the cute names seems saccharine and frankly kind of immature to me. Why is it so prevalent in people who do web frontend stuff, (or else do backend stuff in Ruby, apparently)
I rarely hear that kind of thing from people who do other kinds of programming, whether it's embedded stuff, or desktop apps, or even when talking about game programming or iPhone/Android stuff. The only framework I've heard of for mobile phones is PhoneGap which pretty much tells you exactly what it's supposed to do right in the name
posted by delmoi at 6:20 PM on June 5, 2012 [1 favorite]
The naming isn't as important as the project doing a good job at what it set out to do. If someone creates a terrible framework and calls it SimpleDynamicPageFrameworkForRegularJoes and someone comes out with a better one, what should they call it? SimpleDynamicPageFrameworkForRegularJoes II?
posted by tmt at 6:26 PM on June 5, 2012 [1 favorite]
posted by tmt at 6:26 PM on June 5, 2012 [1 favorite]
Great timing. I've just started to use bootstrap on my latest project (usually they end up being plain old un-styled HTIML), and bootstrap has been giving me grief. Hopefully these links will help me figure out enough of the basics to not go insane. I just spent too much time getting rid of the latest 'OMG I'm a Tablet/Phone' navbar monstrosity and adding back the older topbar. But I really like the rest of it to make things look decent with minimal effort.
posted by zengargoyle at 7:07 PM on June 5, 2012
posted by zengargoyle at 7:07 PM on June 5, 2012
I'm using Bootstrap for the first time on a project at work, and while I love the ease of making the site responsive to various device sizes, I hate how much nested code it requires. Div upon nested div upon nested div ad infinitum, just for a navbar? Give me a break.
posted by starvingartist at 7:37 PM on June 5, 2012
posted by starvingartist at 7:37 PM on June 5, 2012
For my latest project I'm using Holflower with YEEST. Everything I need is baked in.
posted by iotic at 11:54 PM on June 5, 2012 [1 favorite]
posted by iotic at 11:54 PM on June 5, 2012 [1 favorite]
The naming isn't as important as the project doing a good job at what it set out to do. If someone creates a terrible framework and calls it SimpleDynamicPageFrameworkForRegularJoes and someone comes out with a better one, what should they call it? SimpleDynamicPageFrameworkForRegularJoes II
No but they could call it EasyDyne or something. The next one can be DynaFrames. It's not like there's a shortage of descriptive and semi-descriptive names. And every other branch of programming seems to manage with a lot less goofiness.
The thing is, the vast majority of these are going to be forgotten in a couple years, if anything other then a small group ever even learn the name. One obscure name is OK if they're going to be used for major things like, "Apache", "Java", "Ruby", "Python". But when you have libraries and "frameworks" and all sorts of goofynymed nonsense that all depends on other stuff it all starts to sound ridiculous.
posted by delmoi at 12:48 AM on June 6, 2012
No but they could call it EasyDyne or something. The next one can be DynaFrames. It's not like there's a shortage of descriptive and semi-descriptive names. And every other branch of programming seems to manage with a lot less goofiness.
The thing is, the vast majority of these are going to be forgotten in a couple years, if anything other then a small group ever even learn the name. One obscure name is OK if they're going to be used for major things like, "Apache", "Java", "Ruby", "Python". But when you have libraries and "frameworks" and all sorts of goofynymed nonsense that all depends on other stuff it all starts to sound ridiculous.
posted by delmoi at 12:48 AM on June 6, 2012
I'm consulting for... one of the most visited sites in Singapore and have just proposed a new design experience using Bootstrap as a basis. Loads of love for Bootstrap here; it is my considered view that using Bootstrap as a basis would smoothen the transition to responsive design and HTML 5 for us by quite a fair bit.
I'll even say this: I've never seen a client more excited by a prototype I cranked together in a few hours.
posted by the cydonian at 1:16 AM on June 6, 2012
I'll even say this: I've never seen a client more excited by a prototype I cranked together in a few hours.
posted by the cydonian at 1:16 AM on June 6, 2012
Bootstrap is old news now.
The web has moved on to HTML9 Responsive Boilerstrap JS.
http://html9responsiveboilerstrapjs.com
posted by TheKM at 6:04 AM on June 6, 2012 [3 favorites]
The web has moved on to HTML9 Responsive Boilerstrap JS.
http://html9responsiveboilerstrapjs.com
posted by TheKM at 6:04 AM on June 6, 2012 [3 favorites]
I now this isn't AskMeFi, but ...does this play nice with PHP? I work on a site for a yearly event, that needs an overhaul, and while I'd considered a CMS like Joomla or Drupal I feel they're kind of overkill for what the site needs. Basically the info is the same year to year, it's just the dates that change, so I made a little PHP code in an include file that sets all the dates as variables - change the include file and the dates change on the whole site. If I build a new site layout with Bootstrap can I keep my PHP includes to do that? (assuming I don't find some better way...)
posted by dnash at 8:17 AM on June 6, 2012
posted by dnash at 8:17 AM on June 6, 2012
I now this isn't AskMeFi, but ...does this play nice with PHP?
Bootstrap, being an HTML5 (i.e front end) framework, really does not care by what magic the HTML is assembled. So yes, it'll play nice with PHP, for example.
posted by oxidizer at 9:22 AM on June 6, 2012
Bootstrap, being an HTML5 (i.e front end) framework, really does not care by what magic the HTML is assembled. So yes, it'll play nice with PHP, for example.
posted by oxidizer at 9:22 AM on June 6, 2012
Thanks for posting this! I was reading about getting started with Bootstrap last week, and I feel embarrassed to admit that it really seemed too dense for me. This collection of links is what I was looking for.
posted by kendrak at 9:50 AM on June 6, 2012
posted by kendrak at 9:50 AM on June 6, 2012
Thank God for this post -- I'm trying to escalate my CSS past "font, float and frame" levels, and found Bootstrap too intimidating. I was just combing through individual posts on Stack trying to get some way of wrapping my head around it when searching MeFi turned this up.
If anyone is up for a few questions, please MeMail me and I'll bug you a bit from time to time with specific hang-ups.
Right now, I'm trying to figure out how LESS works and fits into this whole equation. Is it absolutely something I should learn about to use Bootstrap? Or is it kind of a nice-to-know that I can set aside for now?
posted by Shepherd at 8:41 AM on June 29, 2012
If anyone is up for a few questions, please MeMail me and I'll bug you a bit from time to time with specific hang-ups.
Right now, I'm trying to figure out how LESS works and fits into this whole equation. Is it absolutely something I should learn about to use Bootstrap? Or is it kind of a nice-to-know that I can set aside for now?
posted by Shepherd at 8:41 AM on June 29, 2012
« Older Prop 8 is still unconstitutional. | Two-faced photoaged Newer »
This thread has been archived and is closed to new comments
posted by Fizz at 12:34 PM on June 5, 2012 [11 favorites]