List of Twitter Bootstrap Resources | Hacker News Reader

List of Twitter Bootstrap Resources

bootstraphero.com

372 pointsmichaelbuckbee102 comments

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.

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.

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.

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

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

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

That, and the fonts.

I like the font!

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!

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?

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.

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

And why is that?

It was never mean to be modular; just to be extended and modified in a per-project basis, just an starting point for fast design development. You are suppose to be able to just use some part of bootstrap but many of this extensions assume that you are using it fully; and also there is no way of handling conflicts between extensions because this are just a bunch of files with no console or control panel to do a proper administration.

for the same reasons jquery plugins are terrible

What is your beef with jQuery plugins?

it's a terrible pattern, extending a god object with useless plugin names and massive option objects are brutal patterns that need to disappear

What would be an alternative to having said god object?

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.

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

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.

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.

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.

> 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.

There's nothing that can save you from having bad taste. However, given good taste and not-so-great artistry, Bootstrap is a web developer's best friend, specially if you're looking for contract work or launching your v1 app. And even with bad taste, there are sufficient examples out there to steal, err, get inspiration from.

> I'm not okay with working on things that look like everyone else does.

You're suffering from selection bias as an HN reader visiting other hackers' websites and such who have heard of Bootstrap. The greater extent of the world has not seen Bootstrap, and if they have, isn't it better for them to experience something decent looking?

> Simple and handrolled > Bootstrap.

If you have the chops sure, but a good number of hackers do not have taste, and less have the artistic talent.

Think about sites like Hacker News or Craigslist. They are arguably not very "tasty" designs, but they are simple and they work.

That's an important point to digest. Just because something looks nice doesn't mean it's effective. It may be the opposite.

Sure, the website looks "nice", I guess, but is that the goal? Or is the goal of the site to get sign ups, generate referrals, make money, etc?

When you're done plugging in Bootstrap, does the design serve your goals? Or does it just look nice? Have you saved time or merely punted the design farther down the road?

Again, I'm playing Devil's advocate because I do see the value in Bootstrap. I just rarely hear any contrary opinions on Bootstrap and it's important to understand (or at least discuss) the trade offs in using a canned design.

I couldn't design a site like Hacker News, not in my wildest dreams. It's the essence of a site with everything supliferous taken away and that takes talent that I just don't have. It's less about "looking nice" and more about "ok can people who aren't me actually use this site?

Bootstrap really helps with stuff like that because it does a lot of heavy lifting for you (styled content, scaffolding, themed buttons, etc) and allows you to fiddle with that stuff to get the effect that you want while still making everything line up.

Now make no mistake about it people can still design awesome sites with nothing and people can definitely design terrible sites with bootstrap it's just that the bar for terrible is a little harder to reach if someone is holding your hand.

Also with regards to the whole "everything looks canned" I think that's largely a part of being on a site where bootstrap is very popular. I know I used a lot of bootstrap sites before I knew what it was and I was none the wiser but now that I used it too I see it everywhere.

Bootstrap is great for quickly turning a mockup into functional app.

If i know my site needs some thumbnails a navbar, icons and a nice font, I'd rather avoid recreating the wheel.

it's almost the Rails of HTML/CSS UI design

Think of bootstrap as a base, an alternative to the reset.css that everybody used to use. You can use as much or as little of it as possible. Everything that you haven't explicitly styled gets a sane default.

It also can be used as a specification for markup. The markup required for Bootstrap's form-horizontal is kind of ugly, but if everybody uses it than it becomes much easier to move form CSS from one project to another.

> At this point in its adoption curve, using Bootstrap is amateur. It says I have no idea how to style a webpage.

Similar to how, if I go to a website and I notice it's using Apache or nginx, I write them off as not having any idea how to write a web server, and that's something I look for from an application or service provider.

Facebook and Twitter could be said to lack identify, too. Google's page of search results and ads. Couple of columns, ads, navigation. People understand it. The consumer is already educated. I dunno :)

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.

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.

A pre-requisite for being a CMS is managing content (Content Management System). Bootstrap has no content-managing facilities; It is purely a presentational (CSS, some JS) library with some well thought out defaults.

ie: you could still use Bootstrap to style a WordPress site.

Right, a CMS lets you implement an architecture for HTML and CSS, e.g. Bootstrap. I don't understand how what I said was "absolutely backwards".

    Right, a CMS lets you implement an architecture for HTML and CSS, e.g. Bootstrap.

Huh?

I think "backwards" is the wrong word. I'd say "uninformed" would be closer to the point.

CMSs manage your content usually through a database, and most of them provide a way to display that content in a structured format. See Wordpress and Drupal. WYSIWYG is not a necessary part of a CMS.

Bootstrap is a (mostly) css library to help provide a better front end development experience for a web site/app. It can be used with the front-facing portion of a CMS or any other kind of site.

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.

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/

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.

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.

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.

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.

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.

> 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.

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.

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

It looked perfect to me, thanks :)

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

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.

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

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

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

Well, bootstrap-rails is on the list. I was going to add it Meteor in under Frameworks > Javascript.

I hear what you are saying though, where do you draw the line. What would you suggest?

You don't draw the line; you just arrange those in order of independence, first the ones where there are no dependencies but bootstrap itself, then the helpers to use it in major frameworks (Meteor, Django, Drupal, WordPress, etc) and then minor frameworks and miscellaneous dependencies.

A tool that painlessly provides you with a ready-to-use Bootstrap environment belongs on the list. That includes gem bootstrap-rails.

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.

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.

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

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.

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

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/

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?

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

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

100% Chance.

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.

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

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

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.

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.

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.

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?

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.

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

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

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

Thanks for the list!

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

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?

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.

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

Done. Will be fixed on redeploy.

Thanks!

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

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

Glad to help if more questions come up

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

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

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

Whatever happened to semantic and readable code?

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

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.

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.

I feel like the "just ship it" mentality lead to the need for standards, no? Spaghetti code and unreadable HTML resulted from two decades (or more) of neglecting a standard.

balance.

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

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

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

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

Yeah, it's a tough call in some cases. If you see anything too egregiously mis-categorized let me know.

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

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

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

I love me some Bootstrap!

amazing.

Reply on news.ycombinator.com