Hacker News new | past | comments | ask | show | jobs | submit login
Bootstrap 2.2.0 released (getbootstrap.com)
267 points by niels on Oct 30, 2012 | hide | past | favorite | 138 comments



It doesn't look like a lot has changed in this release, but just a reminder for those who can't upgrade right away: I'm hosting all the old docs at http://bootstrapdocs.com


Thanks for this.

We were left stuck in 2.0.4 for a project , it will certainly come in handy.


You may already know this, but if you download the full master, you get the docs included in each release.


Thanks for this! We're still waiting on a few changes before we do anything with hosting the old docs, so thanks for helping out in the interim :).


Hijacking the thread a bit here. Foundation (http://foundation.zurb.com) also released 3.2 on October 26th:

http://foundation.zurb.com/docs/changelog.php


It's kind of bad PR for Foundation junkies to try to ride on Bootstrap's coattails every time there's a Bootstrap thread on HN. I get that there's bad blood there, but it really makes the Foundation guys look desperate when you beg for attention like this.


Fair enough. Zurb isn't desperate for HN traffic or users. It's only fair that some of the other equally good frameworks get due attention.

http://www.getskeleton.com/

http://gumbyframework.com/

http://titanthemes.com/titan-framework-a-css-framework-for-r...

http://www.angrycreative.se/wordpress/plugins/less-framework...


" Zurb isn't desperate for HN traffic or users"

Then why are you posting on a completely un-related post for Bootstrap, instead of letting it stand on it's own merits?


That's what a separate thread would be for.


Perhaps I should have worded it differently then. My goal was simply to provide other relevant alternatives to bootstrap.

"Then why are you posting on a completely un-related post for Bootstrap, instead of letting it stand on it's own merits?"

Actually, other popular css frameworks highlighting responsive design are very relevant to Bootstrap. Normally, one could let these frameworks stand on their own merits, but it seems that any bootstrap post on HN hops the popularity train right to the front page.


"...that any bootstrap post on HN hops the popularity train right to the front page...."

Doesn't mean you should jump on someone else' headline to promote Foundation. That's rude.

Make you own thread. If it isn't as "popular", that's your problem.


Disagree - there is nothing rude about this. The thread is not "someone else's" - it exists to benefit the community. I, and others, found these additional leads useful.


I found the other examples very useful as well.


I like it when someone lists alternatives to the current "marketing leader".

I also like the energy of foundation for asserting itself, especially if other users follow on to confirm foundation's quality! It's good for end users and it gets the best product into the spotlight!


Don't give Bootstrap that much credit. The only reason it got popular is due to riding on the coattails of Twitter. If something is a better project (in which I believe Foundation is having used it and been to a couple Zurb talks), it should absolutely get mentioned.

Also, I'm wondering why you're instigating something occluding to "bad blood". Are you serious? They are CSS frameworks being open sourced. This isn't Apple vs. Samsung.

Funny how you're ridiculing options but it looks like you're new here so I'll give you the benefit of the doubt.


Upvoted. Contrary to others's ocd opinions, I have no problem with you posting this. I wasn't aware Foundation had gotten an update recently, nice to know. And while this thread is about Bootstrap, they're the two most sophisticated frontend frameworks available right now, so it's not totally unrelated.


Agreed. Competition is obviously beneficial. I appreciated the links to other front end frameworks as well. Being able to compare features and basic tenants across the two popular frameworks was a mini education and helpful.


I didn't know either, I don't mind comments like this if they are actually relevant.


One thing Bootstrap guys should avoid doing is to modify previous css declarations. It becomes very difficult to get on the new version without breaking existing design. And by breaking I mean it will look different (line heights, spacing, etc..)


Nice, this finally fixes modals in small browser windows. http://twitter.github.com/bootstrap/javascript.html#modals


The modals are a trainwreck in a lot of different ways. I suggest you use this code: http://jschr.github.com/bootstrap-modal/


Every single demo on this page is buggy in my browser! (OSX, latest chrome).


Define buggy. The guy who wrote the new modal code is pretty responsive to fixing any issues.


Good pun ;P

Click on "View Demo" for the Responsive Modal. Modal appears with content, and disappears immediately when it reaches center of the screen.

Same thing happens for Stackable, and Full Width.

Click on "View Demo" for AJAX. 'Okay' button doesn't dismiss the modal, as I would expect it to.

Same thing happens for Custom Manager.


Weird, I can reproduce it now. It seems to be something with clicking around to various different ones. I'll report it to the author and see if we can get it fixed. Thanks for giving more information.

https://github.com/jschr/bootstrap-modal/issues/8


I don't quite know how to use github yet. Thanks.


It's been fixed now. Clear your cache and reload the page.


Sadly they are still broken in big browsers, though. You can still <TAB> out of the modal...


What's broken in big browsers exactly? Nothing seems wrong on my MBA.


As said, you can <tab> out of the dialog. Keyboard users often "scan" pages by tabbing back- and forth rapidly. This breaks down when the modal-dialog turns out to be not so modal after all (i.e. suddenly your keyboard focus is "behind" the dialog).


I have already started making used of 2.2.0 with media-list for my tweets (http://www.millwoodonline.co.uk/). Nice to see http://www.bootstrapcdn.com/ already have the new version in their CDN.


Extremely off-topic, but when I visited once during the Food Festival, I was wondering if Abergavenny had any semblance of a tech scene :-) Congratulations on living in such a beautiful place!


Thanks, and FYI there isn't much of a tech scene here.


Nice way to shamelessly promote your website


"Hey guys, I'm one of the millions of sites who use Bootstrap/Foundation on xyz.com!"


Yes, a little shameless, sorry. Just trying to show how some of the new features can be used.


There aren't that many people using any 2.2.0-specific features in the wild yet, though, which is what the OP was posting to.


Does it fix the bug In the most recent version whereby dropdowns wouldn't work on ios safari?


Its still not fixed on iOS chrome. I like bootstrap but it's a disaster on ios.


Does anyone else feel like every time they release a new version of Bootstrap it is never backwards compatible? I feel like lots of divs on my site need different classes than were used before.


There is something very wrong with having to "upgrade" your CSS.


There should be no problems upgrading from 2.1.2 to 2.2.0—no features were removed and none had their classes changed.


Two changes that I found affected me:

.label's are now display: inline-block. In my particular usage, I needed block in one area.

tooltips used to default to html: true and now they default to html: false - The issue with this is that popovers are now html: false as well. I think popovers should default to html: true given their nature.


Thanks Mark.


My only problem is that they don't version the docs. I couldn't care less if it were easy to find the docs.

I had to revisit a bootstrap 1 site I put together for a client and it was very annoying to track down the documentation.

I considered opening an issue on github but…


You can just grab the tag of the version you need from Github and the docs are included in there.

i.e. https://github.com/twitter/bootstrap/tree/v1.0.0

If that's too complicated for you, I believe there is even someone who hosts an archive of all the version of the docs? He posted elsewhere in this thread..

http://bootstrapdocs.com/


Would be lovely if they didn't hotlink placehold.it for their images as that site requires captcha approval before showing their images so mine is just a bunch of broken image links.


They went behind CloudFlare because of DDoS attacks. That is why you are seeing captchas. https://twitter.com/placeholdit/status/256201151266045952


I really don't understand most people. Why would you ever DDoS a CSS library's website?


Accidental DDoS? For fun (a la 4chan etc.) etc. But yeah I understand what you mean.


If it's accidental, is it really a DDoS? Or a poorly deployed/coded app? :)


If you're looking for a client side alternative checkout holder.js - http://imsky.github.com/holder/


I like bootstrap but my lessc parser under Ubuntu sucks. Bad error messages (errors dont understand importing), no autocompilation and hard to install (have to install the whole Node.js world).

Anyone found a solution that works well under Ubuntu? (I use it with WordPress and Drupal; Rails would be nice but there I run for Sass/SCSS).


In the Carousel example... there is something very wrong with the header scrolling/timing. Click the arrows a couple of times and roll across the menu. It goes crazy.


I get the same behavior. First no response from the carousel when clicking the arrows and after a few seconds it's going crazy. Windows 7 wit Chrome version 22.0.1229.94


OSX, 22.0.1229.94


What is the easiest way to customize Bootstrap without changing Bootstrap code? I mean, the easiest way for its intended audience, CSS amateurs.


It's really easier to re-compile your CSS from modified LESS files.


Bit weird linking to a zip of master, but nevermind.


Does Google CDNs host bootstrap, with less or sass similar to the way they do with jquery and some other javascript libraries?


Use this one: http://www.bootstrapcdn.com, it also hosts FontAwesome and some extra themes for Bootstrap.


no, but http://cdnjs.com does, although I don't think they have the CSS


carousel.html (one of the new examples) is really sexy. i think they learned lots of people are lazy and just leave their sites as pretty much stock bootstrap for a long time - so might as well make stock bootstrap look amazing. well done!

Here it is http://dev.82.io/carousel/

There seems to be a bug with the carousel though. Clicking next doesn't work and the images randomly start skipping really fast etc, at least for me (Chrome/OS X)


Same thing happens to me (Chrome/OS X), even on the github page (http://twitter.github.com/bootstrap/javascript.html#carousel)

There must be a bug.

Edit Tried it in Firefox - OS X and Chrome - Win7 .. same thing :(


The official example appears to work as expected: http://twitter.github.com/bootstrap/examples/carousel.html


I get the same bug there as well. Chrome/Windows


Me too, Firefox/Mac


Yeah that's better, but the animation is still pretty harsh on my browser (chrome / OSX) .. would benefit from a bit of jQuery easing.


i get the same bug =/


Same here, Chrome/Windows and Chrome/Ubuntu.


Sorry for the bug on this one—we're aware of it and will try to push out a quick fix shortly. Thanks!



I'm mainly a backend guy but do some frontend work from time to time. I keep seeing all this talk about a dozen different CSS "frameworks", and I just don't get it. Can someone explain to me what the purpose of these things is? Bootstrap's site for example doesn't even try to tell me what I would want it for, it just says I want it "because its for nerds" (do I have to dress in faux-nerd chic and live in the valley to use it?) and that it uses grids (that's the opposite of a selling point guys).

From looking at the code, all I see is a bunch of boilerplate CSS that seems to deliberately work against the nature of CSS (protip: the C stands for cascading), and is very brittle and tied to specific classes and markup rather than using selectors to be general and reusable. Is that really all it is, just a "I'm too lazy to design my site, so I'll just use twitter's design"? Perhaps it is just the word "framework" throwing me off since it doesn't appear to be a framework in any way? I know this is going to sound needlessly critical to some people, but I am expressing genuine confusion here, I really don't understand what I am supposed to use this for, or how it would help me in any way.


And here we have it again: the textbook middlebrow dismissal, anchored to the top of the thread.

http://news.ycombinator.com/item?id=4693920

http://news.ycombinator.com/item?id=4714217

The reality of course is that calling Bootstrap a "framework" isn't at all controversial, that you cannot simply mimic it with a "default stylesheet" as suggested by this poster below, that to find a respected source vouching for the use of grids (and other systems of measure) you need look no further than Robert Bringhurst, that the Bootstrap site is atypically clear about its goals (maybe this poster didn't bother to scroll down half a page to see), and that the use of grid systems isn't remotely controversial in web design (where a good starting point to the use of grid systems in typographical and graphical applications would be Khoi Vinh).


I can't believe I missed those posts by pg, but I think it's fair to say that in all but a very few subjects, my opinion is of the 'middlebrow' variety.

I now have a very real (though very slight) paranoia that any dismissal I offer on HN is going to be categorized as such, and heaven help me if it gets upvoted substantially.

In all seriousness, I both thank you and slightly hate you (in a valley girl sort of way) for pointing it out.


Reading papsosouid's other comments in this thread, I think a more accurate description would be "troll".


  From looking at the code, all I see is a bunch of boilerplate CSS that seems to deliberately work against the nature of CSS (protip: the C stands for cascading), and is very brittle and tied to specific classes and markup rather than using selectors to be general and reusable.
I think they're doing their best. It's very hard to write both clean CSS and cross-browser compatible CSS.

  I know this is going to sound needlessly critical to some people, but I am expressing genuine confusion here, I really don't understand what I am supposed to use this for, or how it would help me in any way.
If one of the following applies to you, Bootstrap is for you:

"I'm too lazy to design my site."

"I suck at design."

"I don't have enough time to design my site from scratch."

"I don't have enough money to hire a designer."

"I want to signal my site is fresh and trendy."


>I think they're doing their best. It's very hard to write both clean CSS and cross-browser compatible CSS.

I think that's a poor excuse. Our designers manage just fine without requiring me to generate horrible markup or dump dozens of classes on everything. For something that is intended to be used by other people, I would have higher quality expectations, not lower.

>If one of the following applies to you, Bootstrap is for you

Thank you for the list, that's exactly what I was hoping their website would tell me.


What you seem to be missing is that implementing complex designs means spending a lot of time dealing with cross-browser issues and platform-specific minutiae. Using these frameworks saves a lot of time, if the affordances you accept by using them are okay for you. Yes, it is a lot of boilerplate CSS. "Boilerplate" just means the boring stuff that's the same every time and is appropriately abstracted away in a framework. Your complaint about bootstrap not cascading properly is non-sensical. It's verbose in comparison to a custom job that's perfectly tailored to the situation; that's another tradeoff.

I've read your responses below and you're weirdly contemptuous of these frameworks. It's like saying "sure you can use Rails, if you're not competent enough to write your own app code, but then you'd be doing it wrong anyway." Devs make choices; engineering is frequently about tradeoffs. If you sound needlessly critical, work on your tone.


>I've read your responses below and you're weirdly contemptuous of these frameworks.

No, just that using the word "framework" in reference to something that is in no way even remotely like a framework caused much confusion. I was expecting it to be a framework, and was trying to figure out what I was missing. If the answer is (and others have already said this is the case) "its just a design to copy" that's fine. Although I do find it pretty absurd that so many people seem to want to suggest that "a default stylesheet" is some revolution in web design, and is a "framework". Hasn't everyone already used their own default stylesheet since the 90s?


Okay, now I get it: You're trolling HN. Good for you. You got me.


Please don't use a cop out like this. I don't think that writing someone off is very helpful to the discussion, and it's made worse when you don't explain yourself.

To respond to papsosouid:

I'll be very honest, I have little experience with most of the skills that others on HN commonly have (lots of code experience, tinkering with projects, etc) so I can only speak to what I think about BootStrap.

For me, BootStrap is a great tool to make web pages in a way that:

  1. I know will work.

  2. I know will look acceptable.
It's rather like the Ikea of CSS. It's simple, clear, and accessible for someone with little design sense or experience (like me!).

I feel like that was part of your underlying question: "Why do people use this?"

The other part of your question would be "How is this a framework?"

Looking at Wikipedia[0], a framework is a set of generic functions/tools that can be changed by the user to fit their needs. Based off of that definition, I feel that this very well fits what BootStrap is. It's a set of pre-made tools (CSS classes) that can be easily modified to fit specific cases.

[0]http://en.wikipedia.org/wiki/Software_framework


>Looking at Wikipedia[0], a framework is a set of generic functions/tools that can be changed by the user to fit their needs.

Yeah, that's the definition I was going on too. It doesn't seem like it describes bootstrap to me any more than it describes every stylesheet ever made. The nature of CSS is that you can override previously defined styles. When I see "CSS framework" my expectation was something like an actual framework, where a compiler processes some custom language to generate the specific CSS you need based off the components provided by the framework. Clearly my interpretation of "framework" is atypical.


The framework is written in less. The css is just the rendered version of the less framework. You can configure variables to choose colors, curvatures, font base heights etc. the math performed in less scales elements and padding to the base height. There are a lot if edge cases and browser issues that are noticed and fixed by the larger community. You can also break the framework apart easily and only include certain parts by includes in the master style sheet. I'm personally using the sass fork And I have the js and CSS pared down to reduce the overall size, customize navbars etc.

It's definitely a framework.


I don't know if this makes it fit your definition of "framework" any better, but to create the CSS provided by Bootstrap a "compiler processes some custom language" (they use http://lesscss.org/) and you can tweak variables to get different CSS output.

You can also "override previously defined styles" but I don't really understand why you would think you couldn't.


>You can also "override previously defined styles" but I don't really understand why you would think you couldn't.

I don't think you couldn't. I just mean that if "you can override styles" makes it a framework, then every stylesheet ever written is a framework. Perhaps I am missing something, but it appears to just use LESS the same way everyone else does (or the same way everyone uses SASS anyhow), just as a simple pre-processor, not to create what I was thinking of as a framework.


I do agree with you that their choice of label is rather confusing/doesn't fit the best. However, I can't think of a short descriptor for bootstrap that describes:

"BootStrap is a set of generic, reliable, compatible and stylish CSS classes that you are free to use."

Actually, I'd really prefer that right there to be on the front page.

In fact, I'd really love it if most product descriptions were expanded a bit to provide more info. Hmmmm... I think I may write about that.


>Actually, I'd really prefer that right there to be on the front page

Yeah, that would certainly be helpful.


What's wrong with grids? Everything I have read about design seems to advocate laying things out in the fashion.

The nice thing about bootstrap is it enables things like having say, 2 columns at the top of the page then 3 columns underneath then finally going to a single column for the footer very easily.

Doing these things in manual CSS if you don't know about all the various browser quirks and tricks can be a pain.


Grids are awesome.

So awesome in fact, that I created DesignGridLayout, a Java Swing layout manager. Jean Francois Poilpret has been the project owner for years and extended far beyond my original vision.

http://designgridlayout.java.net

It has a mostly "fluent API", so you just add components and it mostly figures out columns and spanning widths.


I didn't say grids were bad in general, I said they are bad in web design. The problem of tightly coupling content and presentation, and the hiding semantic meaning that goes with it, doesn't exist in a desktop GUI environment, or in a print ad or flyer, etc. Grids are perfectly fine in those uses.


I don't understand how you are mixing content with presentation by using a grid any more than any other method of design?

With bootstrap you mostly use CSS classes to dictate presentation so you can keep your HTML pretty clean.

If I wanted to make a website with perfect separation of content and presentation, how would I go about it?


Grids are fundamentally the exact opposite of good design. They are a cludge to make it easier to lay things out the way you want, but do so by tightly coupling content and presentation. I see it advocated too, but not by design gurus, by people who want to just have it work and don't care about doing things correctly or having reusable, modular components.


> Grids are fundamentally the exact opposite of good design.

As a former designer, I cannot overstress how stupid this sounds. It's the equivalent of a designer walking up to a bunch of programmers and saying "what's the big deal with functions?" Some things are opinion, and some things are just wrong. This is the latter.

Here's the longer response:

Grids are fundamental to good design. Have you ever wondered why some sites just look right? GRIDS. Ever noticed how many people try to emulate famous designs but never seem to get it quite right? What are they missing? GRIDS. If you start designing without a grid, guess what? You've already resigned yourself to mediocrity, even if you don't realize it. Here's an analogy: you are building a house, and you decide to "just wing it" with the foundation and fix it as required as you go along. You have already failed before you even started. The grid is the design equivalent of a home's foundation. Everything you design will build on top of that grid.

When you say things like

> I see it advocated too, but not by design gurus

there's really no coherent response you will get except NO. STUPID STUPID STUPID.

Edit: Here's what one of my designer friends responded with: "And it's always good to write a line of code (at least) twice, in case it isn't noticed the first time."

And no, I won't show you an example of a guru who advocates grids. Stay ignorant.


Show me a respected design authority who advocates grids then. "STUPID STUPID STUPID" is not an argument. The fact is, grids tie content to presentation, and are entirely unnecessary. The fact that you think grids is the reason some websites look right and others look wrong is astoundingly ignorant.



> Purchasing my copy of grid Systems in Graphic Design, by Josef Muller-Brockmann, was the best money I've ever spent on a design text. I was a relatively seasoned designer with 6 years of pro-experience when I was fortunate enough to find a copy of this masterpiece. I was largely self-taught however, and while I knew from working in various layout programs about grids, I had no idea how powerfully they could be utilized. Within a weekend of reading and absorbing this book, my designs had improved substantially.

Sounds about right!


Raster Systeme of course being one of the more famous graphic design books of the 20th century.


The fact that I recognize your name solely because you seem to constantly deliberately misrepresent what people say so you can respond with nonsense is rather depressing. That is graphic design, not web design. See how I pointed out that tightly coupling content and presentation is the problem with using grids for web design? Notice how that book never even touches on the subject? Web design is not just graphic design, it is a different medium, with different needs.


You'd be a more compelling troll if you chose a different one of my comments to attach this to, since the comment you're replying to is literally just a link to a book.


Every university visual communications program (graphic design) teaches grids ... for a reason.

    * http://departments.risd.edu/registrar/web/1112cat.pdf (a number of classes focus on grid systems. this is one of the most respected design programs in the country)
    * http://graphicdesigntheory.net/Images/DT/Armstrong_GDTsyllabus.pdf
    * http://pacificgraphicdesign.wordpress.com/courses/graphic-design-ii-2/graphic-design-ii-syllabus/


See my response above. We are talking about web design, not graphic design.


Why is web design so different here? We are still talking about content that is consumed with your eyes.


That is precisely how it is different. We're not talking about content that is just consumed with our eyes. It is consumed by computer programs also. And we need to convey information in a way that those programs can understand. Hiding semantic meaning in classes is bad, as is pushing presentation information into markup. A screen reader has no way to understand that a div with a class of "errormsg" is anything at all. It is just a generic meaningless item. A screen reader can understand that a paragraph tag with a role of "alert" has a specific defined meaning, this is text content indicating an error or warning message. Just as a div with a class of "navbar-fixed-top" is completely meaningless, and a nav tag conveys the specific meaning of "this is a container holding navigation items".


I'm not sure how using a grid system or something like bootstrap is "pushing presentation into markup".

Regardless of whether you use bootstrap or not you are always going to be specifying CSS classes which describe the presentation of elements, not sure how else it can be done?

Screen reader software will generally ignore anything that it doesn't understand or deem irrelevant.

Whenever I have tried screen readers they will say "ok, there's 3 divs with content here. Let's read them out one at a time or just read the headings and wait for the user to select one". How they are arranged in a grid will be irrelevant to the software.

Does bootstrap present some particular problem for screen readers?

You are yet to explain what you think best practices should be here.


>Regardless of whether you use bootstrap or not you are always going to be specifying CSS classes which describe the presentation of elements, not sure how else it can be done?

http://coding.smashingmagazine.com/2012/06/19/classes-where-...

>Screen reader software will generally ignore anything that it doesn't understand or deem irrelevant.

Yes, that's the problem. Putting useful information in places where software has no way to understand it.

>Whenever I have tried screen readers they will say "ok, there's 3 divs with content here. Let's read them out one at a time or just read the headings and wait for the user to select one".

And if you had the appropriate tag instead of a meaningless div, it would know what to do. That's the point. Google for semantic html.


> Yes, that's the problem. Putting useful information in places where software has no way to understand it.

You aren't putting "useful information" in the classes, you are putting presentation related information in there, if you are displaying the content non-visually it is irrelevant and can be safely ignored.

Writing semantic HTML is nice for bots and browsers, but there is nothing stopping you from doing this whilst using bootstrap or whatever. Another thing to consider is that bootstrap aims for backwards compatibility so you are going to be restricted by tags that can be supported by old versions of IE etc.

Even if you could write perfect semantic HTML I don't see how that would make it bad practice to organise your pages using grids?


>You aren't putting "useful information" in the classes, you are putting presentation related information in there, if you are displaying the content non-visually it is irrelevant and can be safely ignored.

"This is navigation" is not just presentation, it is real, meaningful information.

>Writing semantic HTML is nice for bots and browsers, but there is nothing stopping you from doing this whilst using bootstrap or whatever

The contortions it would take to make bootstrap work with proper markup would consume far more time than simply writing correct CSS to begin with.


Navigation is not something that is done via CSS. You provide navigation information inside the HTML itself, via <a href="/whatever.html">Link Title</a>.

Here is one of the sample bootstrap pages: http://twitter.github.com/bootstrap/examples/hero.html

If you disable CSS in your browser you can still view the page and it is still perfectly functional and should work fine with a decent screenreader.

I'm hugely confused by what you mean by "proper markup", bootstrap does not do markup itself, you create the markup and apply bootstrap's CSS classes to make it look a certain way.

Could you provide a link to a page that you would use as an example of how it should be "done right"?


Go back and read the posts you've replied to, I gave an example that was exactly this case: navigation.


I'm really confused, Navigation is a case of what, and what does that have to do with bootstrap or grid based layout?


>Go back and read the posts you've replied to


It is really unclear what you're talking about. You seem to be suggesting that designing to a grid means somehow disguising your navigational menus, but that is just flagrantly untrue, so jiggy is trying to inquire as to what you actually mean. Rereading your comments will not clarify it, because your comments are either unclear (if you do not mean that grids = disguised nav menus) or very poorly substantiated (if you do mean to say that grids = disguised nav menus).


Jeffrey Zeldman? Andy Clarke? Are they not respected enough?


Grids are fundamentally the exact opposite of good design.

From a software perspective, perhaps. From an aesthetic design perspective, grids are a common tool used widely outside of web based design.

by tightly coupling content and presentation.

CSS has always been a hack that disallows completely or properly separating content and presentation, except in toy cases. Thus, frameworks like Bootstrap.


>From an aesthetic design perspective, grids are a common tool used widely outside of web based design.

Yes, we're not in 1996 anymore. We're beyond the "lets pretend the web is print" phase finally. That means separation of content and presentation matters.

>CSS has always been a hack that disallows completely or properly separating content and presentation

What? People (deliberately?) not understanding how to use CSS correctly certainly caused problems like that. And I'm certainly open to blaming much of that on the design of CSS. But it by no means disallowed it separating content and presentation, that is the entire point of it. Stop littering your markup with classes and you can get the benefits of that separation.


Well, if you actually toke the time to read the docs, you would see the value it has. It has personally saved me many hours of development, and I am a back-end + front-end developer too. Don't just start shooting assumptions about the community that surrounds it without reading the help first. And, no, it doesn't just say "because it's for nerds", it says a whole lot more things, but if you wanted to read them you could, you just don't want to. Seems like you just wanted to vent that comment out of your system :). Come on corpy backend guys, dont hate on new frameworks, if you don't like them just let pass through.


I said nothing about any community. And yes it does just say "because it is for nerds". Go to the website, the front page has a "Need reasons to love Bootstrap? Look no further.", which is exactly what I was looking for. Except the answers are total non-answers that don't explain it at all, it literally says "cause nerds".


It's a framework, it simplifies development because you don't have to worry about building up all the little components to improve the look and feel. Instead, you use a design framework like bootstrap so you can quickly bang out an interactive site that looks ok but maybe not great but is still highly functional.

It's a way to build a website in a short amount of time without being held-back by the frankly horrendous design and layout choices that come when you use simplistic html.

P.S. No, you are not expressing "confusion", you are using "confusion" as cover for derision.


http://twitter.github.com/bootstrap/components.html

Have a look at that. If you want to quickly and easily add these kinds of elements to your site, bootstrap is amazing. All you do is use the proper class names and bam you got buttons, tooltips, alerts, progress bars etc etc etc.

If making those things is second nature to you then you probably don't need it - but for devs who are better at backend and lost when it comes to frontend/design, it can be a huge time (and money) saver.


>but for devs who are better at backend and lost when it comes to frontend/design, it can be a huge time (and money) saver.

This is a large part of why I am/was so confused about the purpose of these things. That describes me exactly, and everyone keeps saying I am exactly who bootstrap and friends are made for. Yet I see no purpose or value to it at all. I guess the answer really is "if you don't want to or can't design your site, just use twitters design". It was just hard to believe that's really all there is to it given how much attention is paid to something so trivial.


"no purpose or value to it", really?

For those who want to get a site up with good defaults, typography, and widgets, Bootstrap is a huge timesaver. If you have a better framework for those of us who "can't design" then point us in the right direction.


As I said:

>I guess the answer really is "if you don't want to or can't design your site, just use twitters design"

That is what you are describing, so go right ahead and use boostrap. I was just trying to figure out if there was something more to it, given that it calls itself a "framework" and minor releases of it get posted here for some reason. Those things made me think perhaps I was missing something, and it wasn't just "here's a copy of our design you can use".


I think that answers your question to "how is this a framework" and "what is the value in this?"

For many startups who want to get a site up quickly and have it look good and work well on a large number of sites, using something like bootstrap as the basis for their site design is a huge win.

In your previous posts you keep mentioning "designers", plural. What if started your own firm and didn't have money for "designers", plural, but wanted a site that looked good? Code all that CSS bugger yourself and test it across all those browser versions and different display sizes? Or would you maybe look for a solid, easily customized solution that is built around design and coding best practices and that is tested by an active community?

Do you code your own OS kernel and device drivers as well?

What's a good value for the ratio between your base font size and the lineheight you use? Hmm? A decent approximation is already used in the LESS code for bootstrap.

How do you implement a clean grid system that works across browsers and resolutions? How many grid implementations have you tested? Implemented? How reliable are they? How well do they work?

Are you hand coding your CSS? Bootstrap is probably what helped most of the people on HN realize the value of CSS preprocessors such as LESS.

Instead of spending a load of time optimizing common UI experiences across lots of browsers, or hiring a consulting designer who will probably reuse the code he's already written and charge you a chunk of change, you can instead use bootstrap. And when there is a point release you will find that they often included lots of little optimizations that make the overall CSS work better and across more browsers.

Frameworks provide templates and take care of the boilerplate for you. Bootstrap isn't any different from any other framework in that regard.


>In your previous posts you keep mentioning "designers", plural

Yeah, one at a time. I've been doing it for 16 years, I have worked with dozens of designers over that time. I don't have some sort of stable of dozens of designers to choose from or anything.

>Or would you maybe look for a solid, easily customized solution that is built around design and coding best practices and that is tested by an active community?

Bootstrap is not built around best practices at all, it actively forces you into anti-patterns that best practice is to avoid.

>Do you code your own OS kernel and device drivers as well?

If I were being paid to develop an OS, I certainly would.

>How do you implement a clean grid system that works across browsers and resolutions?

I don't. Grids are entirely unnecessary, and are bad web design. All my sites work fine across browsers, across devices, across resolutions and DPIs, with javascript disabled/unsupported, in screen readers, etc. Note that I've never seen a boostrap site that accomplishes that. Most break on trivial, obvious stuff.

>Are you hand coding your CSS?

Our SCSS, yes.

>or hiring a consulting designer who will probably reuse the code he's already written

Bingo! Where are all these people coming from that haven't already solved this problem a decade ago?

>you can instead use bootstrap

This is all that anyone needed to say. Everyone insisted on trying to fight about this, instead of simply giving me an honest answer: "its just a default design you can use in case you didn't already have one". Given that the answer is so simple, it is amazing how many people just wanted to fight about bootstrap for no reason.


> Given that the answer is so simple, it is amazing how many people just wanted to fight about bootstrap for no reason.

You may want to review your original posting and the follow ups that mention your tone.

You say that Grids are unnecessary and bad web design. Given that that is pretty much the opposite of what most practicing graphic designers think is the case, I think it'd be helpful if you could follow up with a few links, articles, examples or data points to back up what you are saying.

I'm curious. Educate me.


>Given that that is pretty much the opposite of what most practicing graphic designers think is the case

Sorry, I assumed HN of all places wasn't stuck in 1996. What do graphic designers have to do with anything? We're talking about web design. What web design experts think is relevant. What is good for laying out a newspaper or magazine is not necessarily what is best for delivering web content.


So, please, provide some examples. It's much more productive.


So another way to look at it is having re-usable components that you can choose to include/exclude as needed. Then use LESS to customize, tweak, extend those components as needed to create the custom design you need. https://wrapbootstrap.com/ has some examples of work done in this area.


You can customize it, there are even generators. It gives you a cross-browser grid and a lot of goodies. It is maintained and tested across nearly every device. A huge help, if you ask me.


>something so trivial. Getting the layout, typography and stylized components working correctly across all browsers is a tedious, tedious task.

Delegating to a framework that has an implementation that has resolved these browser idiosyncrasies is a huge win.


"Yet I see no purpose or value to it at all"

Did you visit that link? If you don't see the "purpose or value" in having all of that functionality instantly just by adding CSS classes, I don't know what to tell you.

Another huge perk is the responsive design. Bootstrap looks great on any device out of the box.


Yes, I visited the link. And I saw twitters web design. Like I said. I already get styles by adding classes, or even better, without having to spam up my markup with pointless classes. That is how CSS works. You seem to be suggesting that my choices are use twitter's CSS, or don't use CSS at all. The benefit you describe comes from CSS, not bootstrap. Responsive design is the norm, not a "huge perk" of boostrap.

Basically, if I were to use bootstrap the process appears to be the following:

1. Destroy my templates by filling them with tons of garbage containers and pointless class attributes. 2. Our mockups now look like twitter. 3. The actual design gets done, and we have to go back and remove all crap we had to put in for boostrap to begin with.

Which part of that is supposed to appeal to me? Or is the intent to actually ship sites to customers looking like twitter and having horrible markup?


I'm not sure why you keep saying 'looks like Twitter'. Bootstrap was originally created by Twitter, it wasn't created to make every site look like Twitter - nor does it do that.

As for your other comments, you seem to have a far greater knowledge and skill level dealing with CSS than you let on. That's great for you, it must make doing frontend work a breeze - and maybe you don't need Bootstrap. Not everybody is so experienced though - and for them, Bootstrap can make life much simpler.


"Looks like twitter" is just shorter than "looks like every bootstrap website on the internet". My CSS knowledge and skill is very low, I'd rate myself a 2 or a 3 out of 10. I tend to leave the design work to the designers whenever I can. I certainly agree that a default stylesheet is quick and easy, I just didn't realize that's all boostrap is. Now I know the answer to the question everyone keeps asking me ("why aren't you using bootstrap") is "because I already have a default stylesheet". Previously my answer was "I don't know what I am supposed to do with it or why".


I've read your diatribe here and am underwhelmed. However, I was underwhelmed when investigating bootstrap too.

Separation of content and presentation sounds good, but a concrete example would be much more convincing. (I do understand the general idea, so pls don't explain it.) I think what I am hearing is that css styles should be applied to tags rather than classes, but am not sure.

I suppose your time would be better spent building a prototype of what you mean instead of wasting it here. One link is worth a thousand words. Do it right, put it on github, give it five years, and people will be laughing at bootstrap sites, while you are racking up consulting fees.


>I think what I am hearing is that css styles should be applied to tags rather than classes, but am not sure.

As much as possible, yes. Here's a good example of what I mean, although he makes the mistake of taking it to the other extreme ("you should never use a class for anything ever!"):

http://coding.smashingmagazine.com/2012/06/19/classes-where-...

>Do it right, put it on github, give it five years, and people will be laughing at bootstrap sites, while you are racking up consulting fees.

That seems like a rather unfounded assumption. There's already several other CSS "frameworks" that are better than boostrap. What is popular and what is good are seldom strongly correlated.


Read the link and liked it. Now what? What are these better CSS frameworks?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: