Bootstrap 2.2.0 released
blog.getbootstrap.com
blog.getbootstrap.com
We were left stuck in 2.0.4 for a project , it will certainly come in handy.
http://titanthemes.com/titan-framework-a-css-framework-for-r...
http://www.angrycreative.se/wordpress/plugins/less-framework...
Then why are you posting on a completely un-related post for Bootstrap, instead of letting it stand on it's own merits?
"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.
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.
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!
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.
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.
.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.
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…
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..
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).
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)
There must be a bug.
Edit Tried it in Firefox - OS X and Chrome - Win7 .. same thing :(
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.
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 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.
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 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.
"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 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.
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.
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?
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.
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.
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.
It's definitely a framework.
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.
"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.
Yeah, that would certainly be helpful.
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.
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.
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?
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.
Sounds about right!
* 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/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.
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.
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?
"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.
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"?
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.
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.
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.
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.
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.
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.
>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".
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.
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.
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.
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.
Delegating to a framework that has an implementation that has resolved these browser idiosyncrasies is a huge win.
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.
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?
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.
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.
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.