12 ms·
Bootstrap 3.0 Upcoming changes
- dminor 14y ago> Removed all color variables (e.g., @blue, @orange, etc). New, more meaningful variables are on their way (such as @state-warning-text). Hooray! Should make customization that much easier.
- Trufa 14y agoI'm sorry, I don't know what @state-warning-text is, googling it only seems to point to this article, could somebody explain please? thanks!
- jarcoal 14y agoIt was just an example, but what this means is that they are switching to semantic naming, rather than style naming.
- Trufa 14y agoThanks!
- pilif 14y agoThe 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.
- Trufa 14y agoThanks!
- jsncbt 14y agoI 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.
- dheerosaur 14y agoI 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?
- jrogers65 14y ago>Why will they choose hyphenated variables instead of camelCase? Presumably because hyphentation is the standard in CSS.
- dheerosaur 14y agoBut, variables are not standard in CSS. I always perceived less variables as JavaScript variables. Now, I need to figure out a way to make Vim treat hyphenated words as words for filetype=less.
- ldh 14y agoYou can either use the 'W' movement (instead of 'w') or use the 'iskeyword' option to change what is considered a word character. Word movement: http://vimdoc.sourceforge.net/htmldoc/usr_03.html#03.1 http://vimdoc.sourceforge.net/htmldoc/usr_03.html#03.1
- steferson 14y agoReally sad they are dropping support for IE7 unfortunately I will not be upgrading to this version then.
- bluetidepro 14y agoI 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.
- tbassetto 14y agoIn 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.
- dharbin 14y ago_this_. And why drop support for FF 3.6 too? Is there a technical reason to drop support for older browsers or is it idealism?
- dugmartin 14y agoLooks like for IE7 they did it so they could use border-box.
- josscrowcroft 14y agoWhen was the last time anybody used FF 3.6? Serious question.
- riffraff 14y ago> Hero unit > ❑ Convert class to .jumbotron. can someone explain the rationale here?
- bluetidepro 14y agoV2.2.2 used ".jumbotron" AND ".masthead" for the hero unit in the docs, so I think they are just condensing that to one class. See this screenshot: http://bluetide.pro/cPkH/5LohuilN http://bluetide.pro/cPkH/5LohuilN
- markdotto 14y agoPretty much. Plus, it's a much better (and more socially known) metaphor for describing its function and presentation.
- jedireza 14y ago> Dropped all things fluid. We removed the fluid grid system, fluid container, and fluid layout. Damn. That is very handy when you want to have even sub columns inside of an odd-sized parent column.
- nosecreek 14y agoI 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.
- phinnaeus 14y agoThey also removed all IE7 specific CSS hacks. IE7 will no longer be supported at all.
- josscrowcroft 14y agoObviously this is particular to each site's visitor demographics, but the only IE7-specific CSS my sites need would be something along the lines of: #ie-warning { display:none; } html.ie7 #ie-warning { display:block; }
- muyuu 14y agoThat's bold but the right decision IMO.
- nathanstrauser 14y agosame 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
- 14y ago
- excid3 14y ago> Responsive CSS is no longer separate. Will we still be able to easily remove things like the "large desktop" size?
- bluetidepro 14y agoI don't see why you couldn't. It's pretty easy to find media queries in the CSS, because of the unique styling they have in the CSS file.
- excid3 14y agoRight, but if I want to disable it right now, I simply remove the include and updates to Bootstrap don't require me to do any extra work. If it's not easy to remove, I'm guessing that I can just set the large format to something ridiculously high for the minimum width.
- mctx 14y agoMay I ask why you'd like to? I've invested in a large monitor to avoid being stuck with thin column layouts.
- excid3 14y agoJust 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.
- markdotto 14y agoYes, 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.
- excid3 14y agoAwesome, thanks! I typically just drop in Bootstrap with a Rails gem but this is good to know.
- bluetidepro 14y agoI 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.
- ckluis 14y agoIt would be great to get a prospective date in those types of announcements.
- wpietri 14y agoI 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.
- ceejayoz 14y ago"We're thinking probably January" versus "sometime late 2013" would be useful and feasible to provide, though.
- josscrowcroft 14y ago+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.
- tiredoffps 14y agoGlad they are finally using icon fonts instead of PNG. Now we can make icons any color and add drop shadows if needed.
- hackerboos 14y agoHow about dropping support for LESS and using SASS instead?
- arcosdev 14y ago:) I see what you did there....I also agree
- untog 14y agoYou 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. Looks like there is already a SASS port: https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass
- hackerboos 14y agoThe SASS ports tend to lag behind the original or don't leverage the full potential of SASS/Compass. I personally think SASS has won out over LESS since the introduction of SCSS and if Bootstrap dropped support LESS would gradually fade away.
- stdbrouw 14y agoI personally think no CSS preprocessor has won out over any other.
- untog 14y agoWon 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.
- moe 14y agoWell, 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.
- arcosdev 14y agoDoes this add the semicolons back in?
- johnx123-up 14y agoSome of these like Glyphicons are already in Kickstrap (a Boostrap fork)
- jonpaul 14y ago"Dropped all things fluid." 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?
- phinnaeus 14y agoThe 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.
- RossM 14y agoHowever I am not looking forward to removing all the row-fluid/container-fluids in my templates.
- markdotto 14y agoYou should be able to use find-and-replace to tackle most of this—the classes aren't changing too much.
- timrpeterson 14y ago@RossM searching and replacing "row-fluid" with "row" isn't hard using most text editors, try SublimeText2 which is generally very impressive, using shift-command-F enables search replace across the file directory location of your choice..
- josscrowcroft 14y agoYup, 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.
- Griever 14y agoExciting! 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.
- jpdevereaux 14y agoFor 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.
- Griever 14y agoThanks, that's good to know. 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..
- markdotto 14y agoVim wasn't the exact reason, but text selection is a huge part of it. Readability and text selection are huge.
- ubersoldat2k7 14y agoAlthough 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").
- nailer 14y agoDoes 'punted' mean punted away like in a sport? Or does it mean bet on, like at a casino?
- aquark 14y agoIt's the sports metaphor ... kicked down the field for later
- Swizec 14y ago> 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?
- luigi 14y agoI'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.
- apricot13 14y agobecause you can't double click on class names that contain dashes to quickly copy and paste them into your html. - do look neater but I wont switch because it frustrates me so much to not have that simple feature!
- harlanlewis 14y agoFunny, 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: @color-link @color-link-hover @color-link-active
- markdotto 14y agoI 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 :).
- Benferhat 14y agoAny thoughts on how the changes compare with Foundation 3? Is the grid system up to par?
- yahelc 14y agoNot sure how reliable this is, but it seems like you can get a preview of how these changes may affect you by testing out the branch 3.0.0-wip. https://github.com/twitter/bootstrap/tree/3.0.0-wip https://github.com/twitter/bootstrap/tree/3.0.0-wip
- isabre 14y ago"Dropped all things fluid." Looks like I've got some updating to do in the near future.
- markdotto 14y agoThe 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.
- jrochkind1 14y agoThis is awesome, thanks for the clarification. 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!
- wilfra 14y agoI 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!
- markdotto 14y agoYup, loving that we're getting rid of stuff out of the core. Definitely a major focal point of mine to date.
- mepcotterell 14y agoAny reason why you prefer that over "deprecated"?
- nycacorp 14y agowell i like it! i usually get a helping speed boost through NetDNAs CDN serving of bootstrap files. http://blog.netdna.com/opensource/64-million-request/ http://blog.netdna.com/opensource/64-million-request/
- jbrooksuk 14y agoOk... 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!
- mikhuang 14y agoAny word on carousel supporting fades? They mention vertical movement but thus far I've had to hack in fades a lot
- ses4j 14y agoI 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...
- ScotterC 14y agoI've found this site to be very helpful: http://bootstrapdocs.com/ http://bootstrapdocs.com/
- conradfr 14y agoAs someone with something like four applications on different Bootstrap versions, THANK YOU (and to the creator of this site as well). ps: yes I know you can just use the docs from the archives.
- FuzzyDunlop 14y agoThat's certainly nicer than the one I threw together (and never found time to update manually) at http://bootstrap-docs.org http://bootstrap-docs.org. I'd probably consider pointing the domain at one that was maintained properly :)
- envex 14y agoMaybe you should be looking into a more custom solution instead of using Bootstrap if you have to support IE7. It's not like bootstrap adds 1000 features that can be created manually.
- ses4j 14y agoWhy 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.
- VaughnDTaylor 14y agoThis 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?
- aed 14y agoI 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.
- VaughnDTaylor 14y agoThis 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?
- TommyDANGerous 14y agoCan't wait to use it.
- wittjeff 14y agoStill punting ARIA support?
- manoit88 14y agoHow about splitting inverted navbar into a separate less file?
- johns 14y agoWhen will input and button size classes (e.g. input-xxlarge) be normalized as hinted to in the current docs?