List of Twitter Bootstrap Resources

http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

by michaelbuckbee • 14 years ago

372 102 14 years ago

yesimahuman2• 14 years ago

Proud to be a part of the Bootstrap ecosystem with my tool Jetstrap. We've got so much work to do it's not even funny, but the community that has grown up around Bootstrap is so energizing. Exciting to see where it goes from here.

michaelbuckbee16• 14 years ago

Jetstrap is great! A question: I categorized it under "Interface Builders" is that a good fit? Any suggestions on categorization?

yesimahuman2• 14 years ago

It looked perfect to me, thanks :)

zrail• 14 years ago

Does anyone have any examples of the server side component of the FuelUX Datagrid? That looks pretty interesting.

adamalex3• 14 years ago

Yes there is! http://dailyjs.com/2012/10/29/fuel-ux

Glad to help if more questions come up

erjjones• 14 years ago

I wrote up a simple tutorial for anyone wanting to integrate with FuelUX http://erjjones.github.com/blog/FuelUX-a-library-that-extend...

adamalex3• 14 years ago

Thanks @bootstraphero for the multiple Fuel UX mentions. You can also see all the Fuel UX controls in one place here: http://exacttarget.github.com/fuelux

michaelbuckbee16• 14 years ago

No problems, they are great. I had to make some calls in how things were listed. For the FuelUX things it seemed to make more sense to list them individually so if people were searching or browsing through the page they could find them more easily.

adamalex3• 14 years ago

That's great, I like your categories - very well laid-out

jenius• 14 years ago

Whatever happened to semantic and readable code?

view-source:http://www.bootstraphero.com/the-big-badass-list-of-twitter-...

michaelbuckbee16• 14 years ago

Sorry. This is a mix of me just trying to ship something and stringing together a bunch of different tools and things to do it.

rwc• 14 years ago

No need to apologize to the unproductive sniping. How would visitors to the site benefit by cleaner code? Congrats on focusing on what's important: shipping.

gavingmiller• 14 years ago

It's sitting in the project that never shipped because it was trying to be perfect for all the wrong reasons?

coderdude2• 14 years ago

I'm surprised to see that they chose to omit WrapBootstrap, given how the list is presented as being a comprehensive resource. Granted, I'm a bit biased.

michaelbuckbee16• 14 years ago

Added, stupid oversite on my part. I was actually playing around with creating a whole separate section for theming and just lost it.

Give it a few minutes for the caches to expire and it should show up, if not please email me directly at mike@bootstraphero.com and I'll take care of it.

coderdude2• 14 years ago

Thank you much, Mike. :)

Truly nothing is lost as I'm in the process of migrating to a better server and it's taking a few hours longer than expected.

maniexx• 14 years ago

I think it may be a good occasion to ask the probably stupid question - Why is bootstrap so popular on hackernews? As far as I am concerned, it seems to be just another CMS. But posts about it make the frontpage almost everyday seemingly. I'm a newb, so if I don't see something obvious, just tell me what to google.

tnorthcutt• 14 years ago

Bootstrap is not at all a CMS. It's an HTML/CSS/JS framework.

hnriot• 14 years ago

The reason it's so popular is because hackers/engineers that populate this forum are often great at building functional web apps, but they often look like very amateur, however, using some very simple bootstrap it's possible to turn that same app into something that's attractive. Bootstrap is just heavy enough to be useful and light enough to be simple to use. Give it a try, you'll likely see why so many people love it.

mhurron• 14 years ago

Basically this. It allows someone (like me) to create something that looks decent even though my natural talents only bring me up to Geocities level of design.

jbail2• 14 years ago

I basically think Bootstrap is cool, but let me play devil's advocate because a couple things bother me about it.

At this point in its adoption curve, using Bootstrap is amateur. It says I have no idea how to style a webpage. Yes, it makes things look "attractive", but because it so popular, using Bootstrap on a website creates a site with no identity because it looks identical to the 100,000 other sites that use it.

Aside from creating designs with no soul, Bootstrap enforces a model where people without design expertise are supposed to be somehow be good enough at design to utilize these UI components effectively.

If you are not good enough to design a website, what makes you good enough to understand the appropriate time to use a component or when not to?

Hacker News itself has a very hand rolled UI and it works great. If it got Bootstrapped it would be a drastic step backwards. It just isn't the right solution for a lot of sites. It's design overkill.

Again, I think Bootstrap is cool, but I would never use it. I don't consider myself a designer, but I'm not okay with working on things that look like everyone else. Simple + handrolled > Bootstrap.

brebory3• 14 years ago

The difference between bootstrap and a CMS is that bootstrap doesn't mess with any wysiwyg interface bullshit. It's just a pre-fabricated way to architect your html, css, and javascript, and the default styling makes things look very professional.

duskwuff• 14 years ago

I think you have that absolutely backwards. The difference between Bootstrap and a CMS is that a CMS is an application. Bootstrap is purely a sort of standard UI toolkit for the web.

akmiller• 14 years ago

Much like the common definition of "bootstrapping" for entrepreneurs, which HN is targeted at, it provides programmers a way to bootstrap the look and feel of a product. It may not be a long term solution but it offers a quick, easy, and decent looking solution to getting a product out the door.

xyzzyb• 14 years ago

Bootstrap isn't a CMS. It does nothing to manage content but is instead a visual framework of HTML, CSS, and JS. It's essentially a good baseline of nice looking defaults.

It's popular because design is hard. Seriously hard. And the skills required to code up a cool web application do not often overlap with the skills required to make a site that isn't hideous to look at.

Bootstrap allows you to have a permanent check on the "design site" in your list of things to do for launch.

Not only does it look great out of the box, but it's also a great starting point for real designs (hence the name "bootstrap"). http://builtwithbootstrap.com/

brebory3• 14 years ago

Any chance of seeing a responsive build of the site down the line?

michaelbuckbee16• 14 years ago

100% Chance.

sorich87• 14 years ago

You left out https://github.com/sorich87/bootstrap-tour (different and more popular than the other tour component you put). ;)

michaelbuckbee16• 14 years ago

Well the important thing is that I'm going to add it now (but I'm having some issues expiring caches) so it may not show up for a while.

soitgoes• 14 years ago

I noticed the Django Boilerplate link seems to be dead. Great list. Thanks.

michaelbuckbee16• 14 years ago

Good catch, looks like the gentleman decided to remove the repo.

josephscott• 14 years ago

For news about updates an RSS/ATOM feed would be perfect. I don't want to signup for another email list and following another Twitter account is totally hit or miss on updates.

michaelbuckbee16• 14 years ago

This would be easy enough to do, let me work on it.

mullacnbg• 14 years ago

We've just released opensource Bootstrap theme for Sencha ExtJS - http://bootstrap.newbridgegreen.com

ekaln2• 14 years ago

For Joomla, it's probably worth mentioning that's it not just an add-on any more.

The whole of version 3 is built with Bootstrap: http://joomla.org/3/

michaelbuckbee16• 14 years ago

Yeah, that's an interesting one. I wasn't sure how to group it. Seemed weird to put "Joomla" in the "Joomla" category, but maybe if someone was looking for a CMS that used Bootstrap they'd appreciate it.

What would you suggest?

ekaln2• 14 years ago

Thanks Michael. Perhaps you could list "Joomla 3" with a link to that landing page?

tjholowaychuk5• 14 years ago

i still dont understand what makes a bootstrap plugin, a bootstrap plugin, and not a jquery plugin? is it just the style?

rmcastil• 14 years ago

Its code is dependent on the style (CSS) and functionality (javascript) that the parent bootstrap library delivers.

tjholowaychuk5• 14 years ago

Yeah I can see that for certain elements, date pickers etc that use popover, they often seem completely unrelated though

hcarvalhoalves2• 14 years ago

I think all these misses the point. Bootstrap is not a clean-cut framework meant to be extended, but a starting point to fork and adapt to your own site (hence "bootstrap"). Eventually, all bootstrap codebases diverge in a way no plugin or theme can be integrated anymore.

at-fates-hands• 14 years ago

Agreed. I don't think it has been vetted nearly enough either. It seems like a lot of people are jumping on the bandwagon and will soon find their stuff not working.

Don't get me wrong, I love bootstrap, but I'm not sure people really see it as a start-up framework as opposed to a full featured, vetted, well thought out framework ready for prime time.

aculver2• 14 years ago

Here's a different perspective: Bootstrap is evolving as a clean-cut UI framework that can be reliably extended when you stick to its conventions (nonsemantic markup and all.) That's why this list is so massive. Like any framework, I would strongly suggest against forking the library and modifying the code directly. Instead, keep application-specific customizations separate, "on top" of Bootstrap.

sopooneo• 14 years ago

The non-semantic aspect of it is baffling to me. As I was learning web development, I read all over the place how class names should be descriptive. Otherwise you end with something a lot like the inline styling that CSS first helped us get away from. I was on the sidelines for all this, and didn't fully understand, but I took it as gospel that I should be working towards having all semantic markup.

Then bootstrap comes along and all that talk is just gone. Gone without passing go, or arguing that it is time to rethink our assumptions. And I feel kind of crazy because it's like this massive cacophony of voices has just disappeared and no one even remembers it was there.

Mind you, I'm fine with the change. I'm still sort of on the sidelines listening to what I assume are the experts. But this has been jarring for me.

synor• 14 years ago

Not a good practice. If you keep changes of .less files separate you create an overhead of 50-100% of the resulting style-sheet file size for larger projects, that style most of the components.

We now directly modify everything and try to merge in updates manually. This has proven to be the best practice.

hcarvalhoalves2• 14 years ago

> Like any framework, I would strongly suggest against forking the library and modifying the code directly.

The problem is that it's not a library, it's just scaffolding. There are no agreed standards on how to extend it. Most people include Bootstrap's CSS/JS files, then override on custom stylesheets. That's not viable at all.

riccardoforina2• 14 years ago

After Twitter, I'm here too! Can you please rename "django admin bootstrap" to "django-admin-bootstrapped", which is the correct name of the project?

Btw, that's a massive list :D

michaelbuckbee16• 14 years ago

Done. Will be fixed on redeploy.

riccardoforina2• 14 years ago

Thanks!

javajosh3• 14 years ago

Hey Mike, nice list. Don't forget that Meteor has a bootstrap package built-in (http://docs.meteor.com/#bootstrap). You can add bootstrap like this:

    meteor create myapp
    cd myapp
    meteor add bootstrap

michaelbuckbee16• 14 years ago

Added, but won't show up until I redeploy.

mrchess• 14 years ago

I don't think that should belong on the list. It's like adding the gem bootstrap-rails on your list.

nachteilig• 14 years ago

It's really interesting that Bootstrap is becoming another layer of abstraction to be found in a lot of projects, like jQuery before it.

So far I'm pretty sure that's not a bad thing.

javajosh3• 14 years ago

It is an ambiguous thing because Bootstrap is not usually treated as a library, but rather as project scaffolding. That is, it's used to start a project, rather than enhance a currently built project. This is not necessary, of course, as Bootstrap is really a set of adjunct resources that can be pulled into your pages as necessary.

The major problem you see with this useage is that people start a project with Bootstrap 1.2, and 2.0 comes out, there's no chance in hell that they upgrade. Partly this is ignorance, partly this is because there is still no good package manager for the open web - and that's not for lack of coding chops, but because, IMHO, we're still not really sure what "package manager for the open web" should mean.

A page as an execution environment is both incredibly rich and incredibly risky. As much as the web itself is a wild-west of innovation, so is the page environment. We can pull scripts, images, css, data and even DOM from around the world. And for the most part we still do it by adding a line in the page and, if we want a local copy, a wget. The only reason resources don't step on each other is luck and convention - usually it's mostly luck (although the "single global object per library" convention for javascript seems to work really really well.)

It's time that coders and designers both start to think of CSS as reactive functions that map from DOM to pixels and are invoked with class names and ids (this is a lot different than their intended uses, but let's face it, semantic markup doesn't really meet any real human need). Perhaps, echoing the success of the javascript convention, we should adopt a convention that lets css libraries to exist within a single, top-level selector.

Projects like Meteor, Derby and AngularJS are a good push in the right direction, but there's still a long ways to go I think.

aculver2• 14 years ago

Just on the point about upgrading, I can remember between two versions of Bootstrap where markup changes were required in order for the site to function properly with the new release, and no backwards compatibility was provided. Unless somebody is waiting for new features in the latest release, I can see them not wanting to bother going through and updating all of their forms or views. However, if the new features are compelling, it will be worth the effort. Really this is the same decision process we go through when deciding whether or not to upgrade any underlying framework or supporting software.

kurrent• 14 years ago

The only bad thing I see about Twitter Bootstrap, due to it's success, is that seems to be used everywhere and so many startup projects all look the same.

Do they all look different to people who aren't designers/devs? I don't know, but as a developer, when I see a new project I have become oblivious to the design and find it challenging sometimes to see past the "just another app built with twitter bootstrap" to find the application's true value

pbreit• 14 years ago

Bootswatch has the right idea but its templates are much too similar. And all the ones with any color have dark backgrounds.

dbrian• 14 years ago

It's really just the buttons and nav bar. If you change the look of those then it doesn't look so... bootstappy.

__abc2• 14 years ago

We all saw that coming. It's a bummer as adding your own "style", "theme", "whatever you want to call it" isn't that hard.

I think a lot of early stage startups are staffing less graphic art/design via their dependence on Bootstrap.

All in all, it is a sweet front end visual framework!

nshankar• 14 years ago

We have lived with the Windows and OSX aps looking the same but offering different functionality. Why can't web apps do that, and be more functional?

codyguy2• 14 years ago

in bootui we've tried to make some of the templates look totally non-bootstrapy. Of course custom bootstrap template requests are welcome! Do get in touch if you need something.

tjholowaychuk5• 14 years ago

it's a pretty terrible thing actually :s bootstrap is great, looks awesome etc, but this is not the right way to go in the future

garindra• 14 years ago

And why is that?

nickpresta• 14 years ago

TWITTER BOOTSTRAP NOTIFICATIONS, FROM NIJIKO YONSKAI is gone: http://nijikokun.github.com/bootstrap-notify/

Thanks for the list!

aioprisan• 14 years ago

the project is not in your github repo anymore. clicking on that link from the demo page will take you to a 404.

J-H• 14 years ago

Man, this is perfect. Definitely a must have bookmark for anyone using bootstrap. I mentioned something like this a while ago on a HN comment (http://news.ycombinator.com/item?id=4595229), so I'm really glad someone came through!

On a side note, Why isn't there a place to add your own resources?

michaelbuckbee16• 14 years ago

At the bottom of the site I ask people to email me - mike@bootstraphero.com - with suggestions for additional items to add to the list.

I'm trying to make the list truly useful and not just a huge undifferentiated set of links, which requires editing. I've already had multiple people email me with things that just aren't even tangentially related or are of just such poor quality that I didn't think they should be listed.

egor83• 14 years ago

Great list, thanks!

Just one note - would you consider adding second level in the table of content? Like:

COMPONENTS:

- Display

- Form

- Input

FRAMEWORK INTEGRATIONS

- ASP

etc

skadamat• 14 years ago

Couldn't have made this ugly site using Bootstrap? :P

michaelbuckbee16• 14 years ago

Sorry you don't like the design. Any suggestions on improvement? Also, it was made with Bootstrap.

__abc2• 14 years ago

I love me some Bootstrap!

miles_matthias• 14 years ago

One of the best things about bootstrap is how it encourages responsive design and makes it easy to do. Why in the world is any website associated with bootstrap at all not responsive?

kategleason• 14 years ago

amazing.

reledi• 14 years ago

Great list. People here may also be interested in a GitHub gist I put together for myself (and which I'm constantly updating). https://gist.github.com/1718200

nickwoodhams• 14 years ago

Hey Dennis, this list was really fun to go through. Discovered some cool stuff. Thanks.

codyguy2• 14 years ago

Good work Mike, Sent you an email request to add bootui.com to the list. It's a template editor + templates. Double click and edit only. No HTML or css expertise required.

nlh• 14 years ago

I'm a bit late to the comments here, but this is terrific! Thanks Mike.

One suggestion (take it or leave it): Consider adding some sort of simple rating/voting system to the list of resources.

One of my great frustrations with "big lists of things" is that I have an inherent need to evaluate all of them so as to make sure I'm not skipping something important. If I can filter the list a bit -- by seeing, for example, "200 people rated this component as excellent / up voted / etc", that helps. Likewise, it pushes the less-good stuff to the bottom of a section so I might not feel so bad for skipping it.

Just a thought. Either way, awesome resource and thanks for putting it together. Le Bookmarked.

michaelbuckbee16• 14 years ago

I think that's a good suggestion, with the launch of the page I was really hoping to just get a more comprehensive list, and get to some level of generally acceptable categorization.

The most immediate need/request seems to be a way of sorting the most recently added items in some way: when it was launched yesterday it had 162 items, now it's at 186.

Thanks for the suggestion, glad you like the site, if you think of anything else please email me at mike@bootstraphero.com.

List of Twitter Bootstrap Resources

Related Stories