I wish they weren't dropping IE7 support. You can make fun of "who uses that!" all you want, but we build a site that is used by government people who can't control their own computers, and our current demographics are 50% IE7! Nothing to be done, we just can't upgrade to Bootstrap 3.0. So -- if you MUST do this, at least leave the website docs up for Bootstrap 2, cause we're not going anywhere...
At some point people need to be pushed off. That's all there is to it. A lot of wasted developer time goes into supporting old browsers. Probably a lot more time than it would take to upgrade the browsers in the first place. If a large portion of the Internet stops working because a company/govt is using IE7, Firefox 3.6, etc, maybe they'll come to the conclusion that it's worth looking at different options.
While it's tempting to use the threat of obsolescence to force governments and enterprises to adopt newer software, these groups are traditionally the most resistant to such efforts. This is due not in significantly to the bastions of old tech living in iso, where all they have to talk to is the custom-built application.
Also, the promise that the forced obsolescence will eventually work out better for the world is cold comfort when it's you who must choose between legacy tech and sacrificing a large portion of your revenue.
There is however the problem that historically they have not keep a copy of the old docs online. So if you stick to 2.2.2 your probably going to be SOL when it comes to reference info.
Sure there is an archive somewhere of the old docs but that is a long way from ideal.
Same stats roughly, 9.5% IE7. Client's are asking for IE7 support as base level (they normally don't ask for IE6 when I say +50% cost). I suspect next year will start the "death to IE7" campaign. Hopefully.
We also have 1.67% IE6 users who haven't take the hint, my banner and the fact it's totally broken doesn't deter them.
This is a public facing website, although we did investigate the IE7 users and found alot come from public/government networks. They strangely browse the site at work then buy at home (IE8+/Firefox/Chrome) which is frustrating as they won't buy if the site doesn't work in IE7...
That's certainly nicer than the one I threw together (and never found time to update manually) at http://bootstrap-docs.org. I'd probably consider pointing the domain at one that was maintained properly :)
Why would that be better than sticking with Bootstrap 2? Bootstrap has been a huge boon for us -- provides a cross browser, consistent, and well documented layout framework that has brought valuable organization and unification to our previously hodgepodge and inexpert usage of CSS. It's a fabulous tool, much better than any custom solution we would gin up with the limited time allotted for that sort of thing.
I almost fell out of my chair when you said "government people who can't control their own computers". That's just so wrong. No they refuse to change. Administrators have no excuses anymore.
If they literally couldn't control their computers, they would have to be terminators.
Yes they do. They have procedures and are paid to act according to them. You are clearly unaware how the public sector works, or how expensive are upgrades in such scale. Upgrading software for the whole administration sector of a big country means upgrading a few hundreds/thousands computers per city (depending on the population), do the math; and only if the upgrade is even possible (breaking dependencies of software ordered 10 years ago).
Yeah, 'the system is broken', blah blah, it is what it is.
BTW Polish parliament (420 people) members were given iPads 'to save on paper'. Aside from the fact they watch porn at work, the yearly cost of maintanance and upgrades is at $150k. Yep.
You probably want your govt to spend money on better things than upgrading browsers.
The problem is that a variable name like "orange" is a very bad variable name in case your design wants warnings to be in, say purple for whatever reason.
If the LESS variable is called "state-warning-text", you can define that to be purple without the bad aftertaste of having to use "orange" when you mean purple.
I don't mind haveing color variables. When I need a new red, I define @projectRed or @redAlt. It is so much easier to remember red than some dangerColor.
Why will they choose hyphenated variables instead of camelCase?
I enjoy having colour variables at the top that are project specific blues or oranges which can then be set as the values of other variables such as @state-warning-text.
> All variables now use dashes instead of camelCase. For example, it's now @body-background instead of @bodyBackground.
Not sure how I feel about this. On one hand that's a pretty large sweeping change that is going to break all my customizations.
On the other, dashes look much better in css and I prefer them for class names and so on. Not even sure why, is this some sort of community standard I picked up somewhere along the way?
They don't use that selector as far as I know, because it's very brittle. Something like [class|='span'] would only match classes starting with 'span-' if they are the first class in the class list. So it wouldn't match something like '<div class="stacked span-5"></div>'
I struggled with making this decision, but ultimately it's all about readability for me. Hope it's not too much of a hassle for folks, but that's why this happens in a major update and not minor ones :).
I like the human-readability that dashes lend to URLs, but there are two things that bother me about using them in this case:
1. A dash is an operator, which could get confusing when you are doing math. For example: (@grid-gutter-width * (@grid-columns - 1)).
2. As far as variables go... thisIsDoubleClickable, and_so_is_this, but-this-is-not. I suppose it's not the biggest deal in the world, but I really hate having to drag my mouse to select.
Yea this is an age old discussion, I also like the separation that dashes or underscores give. Personally I'm a fan of underscores myself, mostly because I can then have id="foo_bar" #foo_bar and $foo_bar, for html, css, and jQuery variables, respectively, and remembering that JS can't have dashes in variable names. This makes the double clickable aspect super handy to me :)
Sometimes I hear that people don't want to have to press shift, which is understandable considering how much we code. But if bootstrap devs are already pressing shift in order to use camelCase, I wonder why they didn't pick underscores.
This is my general rule: If it's client-facing (eg. a URL) then use dashes - it's more readable (at least I feel it is). If it's developer-facing, use underscores or camel case. Sure it's not as pretty, but it's functional - which is really what we need. This boils down to - do whatever is best for the user.
I've always wondered why they initially chose camelCase and not dashes. I like keeping camelCase for JS only. CSS uses dashes (border-top). LESS uses dashes in its example documentation.
Funny, my editor usage is different, so I prefer dashes for the exact reason you don't. I use opt+(shift)+arrow keys to navigate and select words instead of mouse doubleclick.
camelCase and under_scores both select the full string as a word. But if you throw some-dashes-in-there, and you're using the keyboard, it's super fast to select just the bits of the value you want. Without the dash, you have the select a character level to modify aspects of the string, which is fairly fiddly for being such a common task.
A simple example of this being awesomely quick is adding a pre/postfix to values, eg:
Could someone create a compatibility stylesheet that defines all the camelCased variables based on the new dashed values? Just as a stand-in until you can update all your variables.
That or can someone write up a nice Sed script to grep through my less files and change all the variable names?
$ cat <<HN | sed -e '/@/ s/\([a-z]\)\([A-Z]\)/\1-\l\2/g'
> The following sed will replace camelCase only if it can find an arobase
> character in the current line, thus fooBar and bazThing won't be replaced
> but @fooBar and @awesomeFooBarBazzProperty will.
> True story.
> HN
The following sed will replace camelCase only if it can find an arobase
character in the current line, thus fooBar and bazThing won't be replaced
but @foo-bar and @awesome-foo-bar-bazz-property will.
True story.
What are the implications of this? I'm not a web designer, so does that mean that we have to have fixed-width pages? Won't that make it harder to design web apps? Will someone help to clear up my misunderstanding?
The also redid their scaffolding model (grid system) to use percent widths instead of pixel widths, so it seems like the default (and only option) will be for things to behave like the old fluid layouts did.
Yup, and then if you need specific pixel widths on anything, you specify them yourself. E.g. a fixed width page, you'd need `body { width:950px }` or etc.
I don't think I saw it on the doc, but is there a projected release date for 3.0? It sounds like there is some pretty awesome updates coming, even though they seem more "back-end" related.
+7 votes for a rough release date. Working on a new project which would benefit greatly from using 3.0... for the meantime, I suppose we just use the bleeding edge version and extend it in a separate CSS file, then keep the base bootstrap CSS up to date.
I understand why people want it, but I'd rather most open-source projects avoided announcing release dates.
Best case is they spend a bunch of time on estimation that they could have spent on delivery. More likely is that they rush something that was unexpectedly hard, or drop things that the would have rather kept in. Or, worst of both worlds, they announce dates that they then slip.
Better, I think, that things are done when they're done. Or that they just have frequent, regular releases, like Ubuntu and Firefox do.
I was worried when I saw this, but the very next bullet point is:
>Overhauled default grid system. Now uses percentage widths, padding, and box-sizing: border-box instead of pixel widths and margins. Nesting and offsets remain the same.
Which sounds like they are actually making everything fluid, and removing fixed widths. Perhaps a good thing, although border-box means no IE7 support.
same thoughts here - worried, then optimistic as it should actually be a more simple syntax to create nested grids - would be really nice if you'd be able to do a project wide removal of "-fluid" and it all just works the same
Really? Are you in enterprise software or something? We (WePay) see less than 1% of our traffic and revenue from IE<=7, and that includes the data from our embeddable checkout flow. And of that tiny amount, most is related to our API.
We still officially support 7 for our offsite/embeddable stuff, but from the chatter I hear of the devs that are working on that stuff, the maintenance cost sounds higher than the revenue. Then again, that cost to us is yet another reason that people like our API, since its one less tedious thing for other devs to worry about in their checkout process.
International ecommerce, including China, I can't speak to the exact numbers but the revenue from 6 and 7 is in the millions so we're not quite out of that maintenance cost to revenue hasn't quite tipped yet. Though we do display the ie6countdown.com banner along (and I may have messed it up a bit to display for 7 as well.)
I don't think it would be THAT hard to add back in support for IE7. Also, I'm sure that not long after the release someone will make a forked version that supports IE7, since so many of us still need to support IE7.
In fact, it will be hard! They will use `box-sizing: border-box;`, which changes everything about width calculation and IE7 does not support this property.
There's a great reason. Browsers are advancing, and it makes sense to gradually take advantage of features as most of the mainstream browsers start supporting them.
The hacks required to make older versions behave tend to pile up with time, increasing complexity and maintenance overhead for the developers. There gets to be a point where the complexity and overhead is no longer worthwhile to appease a very slim demographic.
Just use older Bootstrap versions if you want older browser support. I don't want your legacy users slowing down the progression for the rest of the modern world :)
This 'very slim demographic' is more than 1 in 20 people on the web still, and catering to them has typically required very little (maybe a few extra lines of CSS; otherwise, modern websites work fine on IE7, just without the nice rounded corners and such). I'll be using Bootstrap 2.x until that statistic drops much lower.
Additional data point for all the people arguing about it deeper in comments: Firefox 3.6 had its last security update 9 months ago (2012-03-13) and hit official end of life from Mozilla a month later.
It's the 16th most popular user agent seen across the ~60,000 websites tracked by W3Counter. IE7 is the 7th. Dropping support for both will affect 1 in 20 visitors of the 'average' website (your particular audience may vary).
Hospitals and big companies lock down the computers, you can't install anything. If it comes with IE7, that's all you got.
And it's not because of these companies.
E.g. they need to run a specific custom version of SAP (accounting), which on turn crashes if any other browser is present. Upgrading would cost over $30M, so forget it for a while.
Or the hospital needs to validate the hardware + OS + software. Until GE does not support feature X they are stuck with the old version which requires a specific list of software to be installed.
You don't want to hear "sorry about the bad news last week that you have cancer - actually it was just a rendering glitch on your MRI due to the new Chrome version".
So life is a bit more complex than "just upgrade"...
To a degree, definitely. As someone who works in healthcare (both as a practitioner - paramedic), and whose other job is healthcare IT...
I know your example is exaggerated for effect, but there is (or should) be a difference between "general use" PCs in a hospital, and Patient Care / Management PCs (EHR, workflow automation, digital diagnostic imaging, pharmacy and the like). That in itself is a failling of healthcare IT policy.
Sure, your critical systems should all be be "certified", but even that is an area ripe for disruption - witness DrChrono in EHR, and I myself am working, or brainstorming on, better "field reporting" (i.e. 911 response laptops / tablets - most software in this field is horrific for usability, though admittedly there is pretty cool functionality, the ability to transmit 12-lead ECG to the hospital for prepping cath labs is fantastic) - definitely willing to talk to people interested in such a thing.
Edit: as an aside, I'm yet to see MRI software that wasn't driven by a Solaris backend, or even Irix, though that does demonstrate how this area works.
Not a lot, but they are there. I just pulled the Google Analytics numbers for one of my sites and over the past 30 days (3.3M visits) there were 3,003 visits with Firefox 3.6 (1.2% of all FF visits and .09% of all visits).
IE 7 is more common, there were 67,841 IE 7 visits. Worse still is the 12,188 IE 6 visits. Amazingly there were 78 IE 5.5 visits, the web must be a crazy place with IE 5.5.
I was using it this spring (2012) because I had a netbook running Ubuntu 9.04 (9.10 had failed to work properly). But after Google Docs began refusing to let me edit, I finally gave in and upgraded the netbook to 12.04, which has an up-to-date Firefox.
Still, I don't doubt that there are lots of public computers (in libraries, for example) running Firefox 3.6 today. I've seen even older.
This is something that has been messing with my workflow so hear me out. First, I use CodeKit on my local machine to compile. CodeKit allows me to choose a framework (bootstrap-master > LESS files). I don't want to keep multiple versions of bootstrap-master sitting around on my computer. Preferably, I'd have the most current version with which I'd use to build all of my CSS (regardless of the site I'm working on) by simply pointing to the bootstrap-master directory. However, the inclusion of variables.less in bootstrap-master > bootstrap.less (where it's an import) makes this difficult - variables.less is the ONLY file in bootstrap-master that I need to slightly tweak for each site I create. The variables.less file should not be a default import in bootstrap.less - at least this would be ideal for me. The way things are now, I have to modify bootstrap.less (to tell it not to import variables) and variables.less (to control colors, grid, etc). I'd like to just update all of the bootstrap-master files in one fell swoop without worrying about overwriting my changes to these two files. If variables was not a default import AND it was outside of this framework directory, I could update every file in bootstrap-master without worrying about overwriting anything. I hope I have communicated this in the right way - it seems a bit muddled?
I actually know exactly what you're talking about and here's what I do:
- Put Bootstrap in a folder and import it as a framework in CodeKit. (Just like you.)
- In my project folder, I create a LESS file for the project (e.g. project.less).
- At the very top of my project.less I add an import for bootstrap (@import "bootstrap.less")
- I define and customize all my LESS variables within the project.less without touching bootstrap.less.
Yes, this does mean that the variables are being define again. However, this won't matter because what you define in your project.less will override everything else.
The bootswatch project (basically themes for Bootstrap) uses a similar system, though they generally have two less files, one for overriding variables, and a second one for theme-specific additions.
This solution will work for me. Thanks! I suppose it makes no difference that the variables are defined twice? I guess I was just getting stuck on the metaphor of other frameworks (eg. JQuery UI) where my custom files are kept separate from the library. Make sense?
Exciting! I really hope they do end up going with multiple modal widths in 3.1, as I've had to do this myself on more than a few occasions.
On a side note, I'm curious as to why they decided to refactor their variable names to include dashes instead of just sticking with camel casing. Personally, I find camel casing to be much more readable.
For a while the dash-ing annoyed me until I realized that it makes selecting/changing part of a variable name easier (at least in vim). Can't imagine that's the reasoning behind it but it does work out well.
I suppose it doesn't make _too_ much of a difference considering I prefer to use hyphens in my css classes anyway, but this just seemed like a somewhat useless change that will end up breaking a lot of customization's..
Although not always, you'll end up mixing CSS with JavaScript. In this case when naming CSS with dashes it's easier to differentiate from my JavaScript names, i.e. $("#myDiv") vs $("#my-div").
Yes, of course. The customizer will continue to have the ability to include or remove the media queries for these. You can also always make a local build on your own to do it.
Just that the client didn't want the two different sizes for desktop. Nothing in particular, just didn't have time to invest into that and it wasn't really providing that much benefit for the site we were working on.
The default grid system will be come fluid (using percents for widths), so you'll have to just find and replace the row classes and you should be okay. Unsure about more complex layouts though.
I got scared at 'dropping fluid', because it's become been pretty clear to me that the fluid approach in bootstrap was better for most apps, and I was wondering why in fact using the fluid approach wasn't more popular. I got worried that you were making it much more difficult -- but it turns out you agree with me, and instead are making it the out of the box default! woo!
You mean, "how about re-engineering the entire project for little benefit"? LESS vs SASS is one of the more infuriating "this vs that" argument circling the web right now, because everyone is so inexplicably vocal and passionate about it.
Won out in what sense? Last I checked there are no formal figures about usage for either. Bootstrap's phenomenal popularity ought to make it a kingmaker for the preprocessor it uses, I suspect.
Well, the CSS preprocessor ecosystem is a clusterfuck (pardon my french).
Since the differences are so marginal I wish projects would pick their preprocessor by the number of available implementations (in popular languages) rather than the latest fashion.
Less and stylus only have javascript impls and should be avoided for that reason alone. The same applies for most other niche processors.
Like it or not, SASS appears to be the only one with a C library that enables a wide range of language bindings.
Recently I was investigating using LESS on windows. I didn't want to do it at run-time a la DotLess, but at build-time. I wasn't able to install node.js so i had to scout around for other options...
It leverages the fact that windows has long supported running JavaScript (OK technically "JScript") outside of the browser, without node, to create a command line utility from the less.js implementation. Works perfectly :)
Negatory, but given the prominence of the ports and use of Sass, we'll likely try to do something here to help folks out who are using that over Less. No reason we couldn't write a script to translate the two or officially sanction a port. Both have their pros and cons; just a matter of time, duplicate code, etc.
Even if you don't officially sanction or provide a port yourself -- just hearing that you're open to tweaking the way you do things a bit to make it easier for _others_ to port to Sass (and keep their ports up to date with bootstrap evolution) -- is super encouraging.
I'd actually suggest that as a first step, just talk to the folks maintaining the ports, and ask if there's anything you can tweak on your end to make their jobs easier.
does SASS work without installing the pre-processor? I know LESS does. I didn't think SASS did. LESS will work well enough with just the js file loaded (if a bit slower).
Ok... I can see the rationale behind almost every single change here, and whilst I love the changes, this will undoubtedly cause me no end but problems when I revisit a project, change the source of a CSS file and wonder why it no longer works. This is because I've setup a Codekit framework with Bootstrap. If I change anything now, I'll be changing the entire project for the sake of a couple of classes. Dang!
I really like how frequently words like 'dropped' 'removed' and 'consolidated' are used. Was a little worried about bloat with the creators now having more time to devote to it. Great to see that wont be a problem!