18 ms·
Bootstrap 4 alpha
- k__ 11y agoWith flexbox, wonderful!
- zecho 11y agoTo be clear: It's optional. Off by default.
- LoSboccacc 11y ago> Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile. Oh hell no. But the rest is grand.
- duffy0 11y agoI am happy that they now have cards. That is something I can drop from my custom styles.
- mbreedlove 11y agoI'm very excited for the move to SASS and ES2015. Also, the few themes they have on themes.getbootstrap.com look very nice!
- ivan_ah 11y agoYeah, I also like the move to SASS! I used to work with an unofficieal sass port of bootstrap, but not in the future! (I know less / sass is about the same thing, but i have a bunch of folders of old projects i can copy-paste from in sass, and not in less, so i'm super biased)
- hliyan 11y agoAlso launching official bootstrap themes: http://themes.getbootstrap.com/collections/all http://themes.getbootstrap.com/collections/all Edit: unfortunately though, the 'dashboard' theme is not fully responsive (tables (order history) in mobile view)
- pbreit 11y agoWow, $99.
- kirkbackus 11y agoThey only provide one type of license: http://themes.getbootstrap.com/pages/our-license http://themes.getbootstrap.com/pages/our-license It is comparable to the "Multiple Applications License" provided by WrapBootstrap. Still relatively expensive since most Multiple Applications Licenses are under $99.
- ckluis 11y agoDo I live in some sort of parrallel universe that thinks a well documented base design for dashboard/app that will presumably continue to mature for $99 is SUPER STINKING CHEAP? If this is officially supported by the Bootstrap project - this to me feels like a nuts deal.
- cap_theorem 11y agoAt first, I was skeptical, but after looking at the completeness and quality of themes are and how well they are documented, I complete agree. This is an excellent deal, especially considering how much it would cost to hire someone to build something comparable for you. Even then, it will not be as well-documented.
- k__ 11y agoAm I allowed to modify it?
- MichaelGG 11y agoYou live in a superposition. It is very cheap! Yet when people are selling the same thing for $4, it also looks like a lot, even though it isn't. I recently bought some themes and I had to make a conscious effort to simply ignore the price. In fact, I wish such sites had an option to hide all pricing info. (Same in mobile apps. $5 is a steal for a decent app/game, by any direct measure of value. But comparatively, $5 is way more than most apps.)
- arxpoetica 11y agoI haven't really been a loyalist to Bootstrap, but this is the shiz.
- o_____________o 11y agoThey seem pretty confident about Sass; It seems outdated and clunky to me, in part because it's always going to be the only Ruby dependency in any of my projects. The Javascript parser never found parity from what I know. By contrast, PostCSS is faster and has massive adoption. Seems like the way forward. Anybody think this is wrong? > PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful. https://github.com/postcss/postcss https://github.com/postcss/postcss
- StavrosK 11y agoIf I'm going to have to choose between Ruby and Node as a dependency for my project, I'll go with Ruby, and be unhappy regardless. Installing a whole programming language/framework and package manager just for a transpiler isn't my idea of fun.
- curun1r 11y agoI think a lot of people feel that way, but it's a false dichotomy based on what I've seen. The more real choice is between Node/Ruby and just Node. When building a web application, you're basically forced to use JavaScript. It would be nice if this wasn't the case, and there are some transpilation tools that can basically get around that requirement, but it's almost always more painful to go that route. So if you're basically going to need the Node toolchain anyways for stuff like Babel and Webpack/Browserify, having your CSS abstraction library also use it means not needing an extra Ruby dependency. But there's not really an option to use only Ruby.
- not_with_retard 11y agoRuby? Yeah sure, if you're a sucker. https://github.com/sass/libsass https://github.com/sass/libsass
- mbreedlove 11y agoThey mentioned they're using libsass, a C/C++ port of the compiler. Although it's only an issue if you're using the source and not the compiled CSS. The same issue exists with v3 needing a LESS compiler.
- legohead 11y agohttp://v4-alpha.getbootstrap.com/examples/justified-nav/ http://v4-alpha.getbootstrap.com/examples/justified-nav/ broken for anyone else? also: http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/ http://v4-alpha.getbootstrap.com/examples/sticky-footer-navb...
- miyuru 11y agoprogress bars has changed http://v4-alpha.getbootstrap.com/components/progress/ http://v4-alpha.getbootstrap.com/components/progress/
- bpyne 11y agoI'm a Boostrap lightweight, but I always respect an organization willing to drop support for old technology (IE8) and rewrite libraries with an improved technology (ES6).
- mdo 11y agoHell yeah, we love doing it. Keeps us fresh and interested in the ongoing development of the project and helps push other folks forward with new web patterns, tech, etc.
- chrismarlow9 11y agoIt not only gets rid of clunky code holding you back, but often the code written to keep legacy working is a huge attack vector because it's generally not scrutinized as much. because well, how many people using it really care if the little chunk of code to make it work in IE6 isn't super solid? Not many... how many 0day hunters care? Many of them.
- jtheory 11y agoDropping old tech means projects/companies that require that support have to do it in-house. We need to support IE7+ for much of our UI, unfortunately, because of paying customers in hospital environments where upgrading is a nightmare. So it's a good thing in that libraries can be leaner/meaner for everyone who doesn't need to care about old tech, but it also means the unpleasant work of supporting the old tech now has to be carried on by lots of different developers in lots of different companies, rather than being done well in one place. If there's any possibility of keeping alive an "old-browser-support" branch of BS (like jQuery's 1.x and 2.x streams), that's rather better than abandoning it -- in theory we might be able to contribute some developer time into it.
- jtheory 11y agoNotes from the actual post: > When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. The current plan is already keeping basic support in place for BS3, but no new features. That's probably just where we'll stay, then.
- deleted 11y ago[deleted]
- hit8run 11y agoI'm not sure if one really needs to load in tons and tons of css and js for displaying a site like http://themes.getbootstrap.com/products/marketing http://themes.getbootstrap.com/products/marketing :/
- zzalpha 11y agoMeh, if it means rapidly putting together a high-quality, cross-browser, responsive website with little effort, I'll accept a little bloat. The savings in developer time is more than worth it, IMO. Doubly so given how much of that CSS and JS is likely cached.
- hit8run 11y agoFor prototyping this is okay. But for production I try to keep bloat as low as possible. I see this as service to my customers. A fat ui framework like this adds its very own complexity and as soon as you want to go out of the crud box you will have to add your own styles anyway.
- huac 11y agoYou can cut the unused styles out after.
- arrmn 11y agoI try to get my bloat down, I just load the components which I'm going to use (most of the time it's the grid). There are some tools like purifycss [1] which can delete unused css 1: https://github.com/purifycss/purifycss https://github.com/purifycss/purifycss
- hit8run 11y agoIndeed an interesting tool. If one keeps the site structure simple enough I think that the no-framework way might fit best. One doesn't have to go as far as for example this site http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com but it made me think about minimalistic css while keeping great device support. I recently read the blog (http://.ws http://.ws) of Adam Morse (http://mrmrs.cc http://mrmrs.cc) and it gave me some inspiration for my own css stuff.
- bluetidepro 11y agoOne amazing thing to note is that in v3.3.5 (last stable) bootstrap.min.css was at ~123kb. The new 4.0.0 alpha bootstrap.min.css is at ~88kb. WOW. That's just amazing. Congrats to everyone who worked on this project. I'm always so impressed with the work done on it! Also, I want to add, I don't care where you land on the side of the debate whether to use Bootstrap or not, there is some very smart minds behind the project and there always something to learn from the source code.
- mdo 11y agoThanks for noticing! :) I spent a lot of time deleting stuff lol. Still more to optimize around though as we work through the alphas.
- o_____________o 11y agoThanks for your work! It's amazing that I can still recommend it to people looking to quickly scaffold something beautiful.
- meerita 11y agoAny plan to support BEM?
- gpmcadam 11y agoMentioned on github before https://github.com/twbs/bootstrap/issues/9366#issuecomment-22507074 https://github.com/twbs/bootstrap/issues/9366#issuecomment-2... Personally I hope they never impose such an awkward naming convention.
- mdo 11y agoNo plans :).
- paulojreis 11y agoI think it's a good idea to avoid "BEM" in such a mainstream project, since the naming pattern clearly puts some people off. However, what about the problems that BEM tries to solve? Using a naming pattern to communicate structure (element E is a "child" of block B) is a good idea (instead of e.g. a descendant or a child selector) because of: a) Performance: one class (e.g .blockB__elementE) will be faster to "match" by the browser than .blockB > .elementE /.blockB .elementE; b) Less coupling to DOM structure: to have the desired style, element E doesn't necessarily have to a child of B. Similar points can be applied to modifiers. A "btn--large" instead of "btn btn-large" seems like a good idea for performance and also to avoid conflicts (the latter class will override the first, but I wouldn't want to care with order).
- TheGRS 11y agoI am very new to Bootstrap, but it has been such an easy tool to get a website professional-looking in no time at all. Great to see all these improvements from such a young library.
- mdo 11y agoThanks! <3
- Sakes 11y agoFlex! fantastic. I have no opinion but am curious about why you bailed on Less and committed to Sass. If you see this, can you explain?
- wldcordeiro 11y agoFrom their brief description it seems like it's because Sass is more powerful and faster to compile.
- pyre 11y agoLess is simpler, and the canonical implementation (IIRC) is written in Javascript. Sass (now) has libsass which is a C/C++ library (meaning presumably faster), and has a larger feature set than Less.
- bronson 11y agoIt's definitely more readable. Some of the workarounds less forces upon your code get downright ugly.
- mdo 11y agoHappy to explain! - Sass has a larger community of developers. - Sass seems to be iterating as a tool faster than Less. - Sass is really similar to Less, so it's an easier transition to make than jumping right to PostCSS. - LibSass (the C implementation of the traditional Ruby Sass) is super fast, faster than Less in my casual tests).
- JuanSoto 11y agoVery interested in the new grid system. It's always been my favorite part of Boostrap—looking forward to see what they do with it.
- at-fates-hands 11y agoI'll be interested to find out what level of customization you can do to it. The fact their grid was so rigid is why I switched to Jeet a while ago: http://jeet.gs/ http://jeet.gs/
- hashgowda 11y ago@Bootstrap Team. Any plans of reviving Ratchet(http://goratchet.com http://goratchet.com) project?
- ramigb 11y ago4 major versions and still not official direction support! that's why i use Foundation because it offers RTL support out of the box.
- scott_karana 11y agoBlimey, that is an omission. I always liked that Bootstrap 3 was so inclusive of screenreaders, and as a LTR reader, would never have guessed that RTL support wasn't there if you hadn't pointed it out.
- mdo 11y agoDefinitely need to do it. We tried to do it as part of v3 but ultimately left it to the community. We saw a few good things come of it, but it's on my bucket list for the future.
- wnevets 11y ago>Moved from Less to Sass. what was the motivation for the switch?
- jp_sc 11y agoI'm confused about how the Dashboard theme seems to be built using http://titon.io/en/toolkit http://titon.io/en/toolkit instead of Bootstrap. Why it's advertised as a "Bootstrap theme"?
- joshburgess 11y agoSass by default FTW! It says they rewrote all of the JS using ES6... Does this mean jQuery is no longer a dependency?
- lol768 11y agoAssuming the comment in the starter template isn't outdated, jQuery is still required. http://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template http://v4-alpha.getbootstrap.com/getting-started/introductio...
- joshburgess 11y agoBooooooooooo. Bootstrap is the most popular CSS/UI framework on the planet. I don't get why they continue to depend on jQuery while most modern app frameworks are abandoning it...
- zecho 11y agoLike which? Ember continues to depend on it. Angular uses a lightweight version. I don't think there's a lot of interest in reinventing the wheel as far as cross-browser JS libraries go.
- path411 11y agoThe most popular UI framework using the most popular UI library? I don't see the problem.
- dlandis 11y agoDoes anyone know why they don't want to support right-to-left? I've seen tons of questions and posts about it over the years so I'm surprised that even with the next major release they aren't addressing it. Maybe I'm missing a perspective here though -- don't other people think that rtl should be a core capability of a framework like this? I'm also curious whether accessibility will be improved in 4.x.
- rattray 11y agoJust to be clear, you're talking about the text direction, for languages like Hebrew and Arabic? (We Americans are typically blissfully unaware that other languages are actually used on the internet - this is a great opportunity to talk about the importance of i18n)
- duaneb 11y agoYup. Though it's not like it's hard to find samples and compare them. Source: I write typesetting software.
- msoad 11y agoI'm curios to know what doesn't work in rtl? Does bootstrap uses `margin-left` and stuff like that? It should be simple to fix it .some-class { margin-left: 1em; &[dir="rtl"] { margin-right: 1em; } }
- ivanca 11y agoIt is a little more complicated because you have to omit the previous rule as well (and overriding it may interfere with other CSS rules), so it should be: .some-class { &[dir="rtl"] { margin-right: 1em; } &:not([dir="rtl"]) { margin-left: 1em; } }
- realityking 11y agoPart of the problem is, that it's highly undesirable having to mark every node as rtl, when it should just be inerited. Eventually (https://developer.mozilla.org/en-US/docs/Web/CSS/%3Adir https://developer.mozilla.org/en-US/docs/Web/CSS/%3Adir) will be able to write it like this: .some-class { &:dir(rtl) { margin-right: 1em; } &:dir(ltr) { margin-left: 1em; } } Right now it's probably easiest to load an additional stylesheet when a RTL language is used.
- Siecje 11y agoI'm curious about the process of writing the Docs in markdown.
- mdo 11y agoWhat specifically would you like to know?
- CircleJerk 11y agoI'm launching a not-so-critical thing in 2 or 3 months, currently using Bootstrap 3. Is it safe to adopt 4 right now, to be more future-proof? I don't mind bugs that eventually will be fixed but is the API stable enough?
- mdo 11y agoDefinitely not. We're in the alpha stage. Things won't be locked in until maybe beta, but for sure the release candidates.
- johnny22 11y agoyou might want to consider using bootstrap-sass package, so you can still use sass while preparing for bootstrap 4. bootstrap-sass is an official bootstrap project.
- jadidian 11y agoMeans Bootstrap is a few years behind Foundation...
- dodyg 11y agoThis is the most important part of the announcement >For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.
- geon 11y agoHow come the "extra small" buttons are larger than the "small" ones?
- mdo 11y agoOh, I removed the CSS for those and forgot to remove them from the docs :grin:.
- sangd 11y agoYou're moving too fast. I just migrated mine app to 3.
- grandalf 11y agoI'm not convinced that it makes sense to migrate existing sites to new versions of libraries like this unless a fairly complete redesign is happening. Looks great though.
- joeblau 11y ago@mdo - Thanks for continuing the great work on this framework. I just listened to the Design Details podcast [1] with you on it and it was great to hear about the evolution of the project (And where the purple came from). [1] - http://spec.fm/show/design-details/14701 http://spec.fm/show/design-details/14701
- mdo 11y agoHah, happy to hear that. Thanks!
- Kiro 11y ago> Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. Can someone explain the benefit of this?
- coldtea 11y agoYou can resize a top-level font size value (namely, the "html" node, e.g. to make it smaller for a mobile screen) and the rem-based fonts sizes for all your components change respectively.
- Kiro 11y agoThanks. What about em?
- coldtea 11y agoEm (which we use to have for lots of years now IIRC), is the same thing, but instead of being responsive to the top level font size, they are responsive to their first sized parent. So, inside a DIV with font-size: XXpx, em sized sub-elements will change size with respect to XX etc. So to size them you have to target their px-sized-parents across your document. Whereas rem sized items you control from a central single value: the font-size of the "html" element. In this sense a page full of em-sized elements will behave the same as a page full of rem-sized elemements if the only pixel sized element in the page is the "html" node.
- sooheon 11y agoThanks for this simple explanation.
- deleted 11y ago[deleted]
- baby 11y ago> Moved from Less to Sass I felt like this would never happen > Opt-in flexbox support is here Awesome. That's the future :) > Improved grid system From a quick look, it still looks bloated for people who don't want to design with mobile in mind > Reboot they are using box-sizing: border-box so cheers to that > Every plugin has been rewritten in ES6 nice! > Improved documentation. We rewrote it all in Markdown wow it looks really nice now I've dropped Bootstrap a year ago in favor for Semantic-UI. I'm curious to see how this new version holds up.
- meetbryce 11y ago> From a quick look, it still looks bloated for people who don't want to design with mobile in mind Why would anyone not be designing for mobile in 2015? I question why you would even bother using BS if you're building something non-responsive. Might as well just revert back to 960gs... haha
- baby 11y agoIt's not that I don't want to design for mobiles, it's that I don't want to design for both mobiles and desktops. I just want to design for something that would work for both. So I just use xs- for everything, but it's just confusing to me that they don't have a "default" grid system that works on both instead of having all these sizes.
- RamitSharma 11y agoCongrats Bootstrap team for Bootstrap 4 alpha release great work. I am a Bootstrap loyalist from Bootstrap 1 release. I looked at Semantic-UI components for last days and agree they are good in looks but not so easy to use for responsive environment. But comes with lot of integrated feature such as Reveal, Sticky content, Calendar, Validation etc. Was hoping lot now with release 4, Feature displayed in official theme could have been part of release 4. please add those as part of release 4.
- barbolo 11y agoDo you know what plugins they used to transform Markdown into HTML?
- mdo 11y agoOur docs are built on Jekyll, which takes either HTML or Markdown for page content. Markdown is so much faster to write in for docs, especially since we no longer have to escape inline HTML by hand haha.
- tmaly 11y agoSASS and rem are the biggest features I am looking forward to.
- julianozen 11y agoSorry dumb question. How can bootstrap safely use ES6? Isn't there limited compatibility? Are they using some kind of tool to allow it, or are they only using it for new browsers, and falling back to ES5 if they have to?
- McGlockenshire 11y agoThey're probably using a preprocessor like Babel[1] or something like es6-shim[2] 1: https://babeljs.io/ https://babeljs.io/ 2: https://github.com/paulmillr/es6-shim/ https://github.com/paulmillr/es6-shim/
- gearoidoc 11y agoI could be wrong but looks like this doesn't have responsive text alignment? Really miss that on a regular basis with bootstrap.
- sebkomianos 11y agoFor anyone interested, there's a PR in the rails bootstrap-sass gem: thehttps://github.com/twbs/bootstrap-sass/pull/954 https://github.com/twbs/bootstrap-sass/pull/954
- new_hackers 11y agoGet 404 at http://v4-alpha.getbootstrap.com/examples/jumbotron-narrow/ http://v4-alpha.getbootstrap.com/examples/jumbotron-narrow/
- betenoire 11y agoprobably not the most useful place to point this out. https://github.com/twbs/bootstrap/issues https://github.com/twbs/bootstrap/issues
- nfm 11y agoNice work :) And the migration process (http://v4-alpha.getbootstrap.com/migration/ http://v4-alpha.getbootstrap.com/migration/) doesn't look to be too hard, either.
- hashgowda 11y ago@mdo Any plans of reviving Ratchet(http://goratchet.com http://goratchet.com) project?
- itsbits 11y agoNo backward compatibility with Bootstrap 3?
- danneu 11y agoI prefer it that way. Last thing a front-end framework needs is a bunch of legacy cruft, and they're going to continue supporting v3. The migration doesn't seem like a tall order: http://v4-alpha.getbootstrap.com/migration/ http://v4-alpha.getbootstrap.com/migration/ though my v3 projects are going to stay on v3 until it's time for a complete UI redesign.
- niutech 11y agoI can understand rem units in font-size, but why use rem in media queries instead of px? The same with margins - when I get the PSD file from the designer, I will have to convert all margins from px to rem.
- davemac8 11y agoFoundation has a Sass function to do this called rem-calc(pixel size), not sure if there is a Bootstrap equivalent.
- shazeline 11y ago<!-- open graph bullshit --> Line 22: view-source:http://themes.getbootstrap.com/products/application http://themes.getbootstrap.com/products/application
- venomsnake 11y agoKudos to whomever wrote it. The customized meta tags crap for each service has gone too far.
- scubadude 11y agoIs there any reason checkboxes and radio buttons aren't styled, e.g. like in wtfforms? Are there plans to merge that project into bootstrap?
- mdo 11y agoWe've got them! See http://v4-alpha.getbootstrap.com/components/forms/#custom-forms http://v4-alpha.getbootstrap.com/components/forms/#custom-fo... :).
- lkjasdoiuqwe 11y agoWow the shilling is hard in here, that dashboard is an extremely limited implementation and looks like garbage. Why would you ever pay $99 for it?
- miyuru 11y agowell glyphicons have been removed, didn't even notice it in the docs.
- fr7anu 11y ago50218125
- fr7anu 11y ago50218128
- fr7anu 11y ago50218125
- tuananh 11y agothat card things looks exactly card from picnic css.
- neya 11y agoIt's good to see that Bootstrap is progressing so fast. Frankly, some features like cards (or some variations of it) have been in Semantic-UI for a while now. It's a matter of personal preference, but like one of the other commentators have suggested, I've also replaced bootstrap in favor of Semantic-UI last year and never looked back. For me, while developing a web app, it's the ability to come up with faster prototypes and then improve upon the UI at later stages that impresses me the most. Bootstrap was the first one to show me how much you can get done in very less time. But, Semantic-UI is simply miles ahead in this aspect. Semantic-UI is a full-fledged package - THe amount of custom CSS I write in comparison to a bootstrap project is way small say, 70-80% less. That's how good Semantic-UI is for me. However, this new Bootstrap release actually excited me and I can't wait to test run it. Kudos and thanks to the team for this awesome release :)
- padho 11y agoNice job, Bootstrap saved me so much time already. It really helps by getting the job done! However, in most of my projects I just used the grid.
- roeeba 11y agoThe wait for RTL still not over? I've delayed project for long time while waiting to the official RTL support. I remember you bumped up the RTL support to XXX version and after that to YYY version. You ignore the large population reads text from right to left Please add RTL support to Bootstrap 4 we need it