
Bootstrap 4 alpha - lobo_tuerto
http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
======
bluetidepro
One 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
Thanks for noticing! :)

I spent a lot of time deleting stuff lol. Still more to optimize around though
as we work through the alphas.

~~~
meerita
Any plan to support BEM?

~~~
mdo
No plans :).

~~~
paulojreis
I 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).

------
dlandis
Does 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
Just 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
Yup. Though it's not like it's hard to find samples and compare them. Source:
I write typesetting software.

------
hliyan
Also 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)

~~~
alternize
the Dashboard one looks nice, but is currently (of course) still using
Bootstrap 3. anyone knows if there's a free upgrade to a BS4 version once
released?

~~~
dhgamache
Yeah. We're adding this to the FAQ right now, but the updates are free for the
life of the theme (including updates to future versions of Bootstrap) <3

------
o_____________o
They 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)

~~~
jscheel
I've been hearing a lot of noise about that. As a person who went from LESS to
SCSS, is there any reason I should again switch my focus to PostCSS?

~~~
pyre
Not unless you like chasing the "latest and greatest" fad. If Sass (or Less)
is working for you, then use it. If you are running into issues, then research
alternatives. Both Less and Sass are actively maintained projects, so there's
not reason to run around switching frameworks unless there is a concrete need
for it.

~~~
jscheel
I ran into significant issues with LESS that forced me to switch. I haven't
seen any with SCSS, so that's the question. Is it just another new fad, or
have people exhibited a real need for switching?

~~~
AhtiK
would you mind sharing what were the significant issues with LESS?

I'm using LESS and just wondering what I might be missing.

~~~
jscheel
Well, I built a theming engine that utilized LESS in combination with a whole
host of other stuff. It became a big problem there, but that's not really a
use-case that is applicable to most. For more common issues, the way LESS does
guarded mixins was super annoying, the breaking changes in minor version
release, etc.

------
jp_sc
I'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"?

------
bpyne
I'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).

~~~
jtheory
Dropping 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
Notes 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.

------
Sakes
Flex! 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
From their brief description it seems like it's because Sass is more powerful
and faster to compile.

~~~
pyre
Less 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.

------
CircleJerk
I'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
Definitely not. We're in the alpha stage. Things won't be locked in until
maybe beta, but for sure the release candidates.

------
ramigb
4 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
Blimey, 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.

------
hit8run
I'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
Meh, 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
For 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.

~~~
arrmn
I 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)

~~~
Existenceblinks
I didn't compare the results between Purifycss and this bash script[1] yet.
But this alternative, not intent to compete, does mainly the same detection
e.g. including dynamic class adding detection.

1:
[https://gist.github.com/50kudos/3028fac585eda85aea9a](https://gist.github.com/50kudos/3028fac585eda85aea9a)

------
shazeline

      <!-- open graph bullshit -->
    

Line 22: view-
source:[http://themes.getbootstrap.com/products/application](http://themes.getbootstrap.com/products/application)

~~~
venomsnake
Kudos to whomever wrote it. The customized meta tags crap for each service has
gone too far.

------
mbreedlove
I'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
Yeah, 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)

------
Kiro
> 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
You 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
Thanks. What about em?

~~~
coldtea
Em (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
Thanks for this simple explanation.

------
legohead
[http://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-
navb...](http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/)

~~~
mdo
Yup! Lots will be a little broken until we get into the beta phase. Still tons
to do, but we wanted to get this out there :).

------
neya
It'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 :)

------
wnevets
>Moved from Less to Sass.

what was the motivation for the switch?

~~~
zecho
From mdo's answer in the Slack chatroom:

> more people use SCSS, libsass is crazy fast, syntax is more explicitly
> clear, and I'm lazy and use SCSS at GitHub

~~~
mdo
Also see
[https://news.ycombinator.com/item?id=10088173](https://news.ycombinator.com/item?id=10088173).

------
duffy0
I am happy that they now have cards. That is something I can drop from my
custom styles.

------
baby
> 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
> 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
It'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.

------
Siecje
I'm curious about the process of writing the Docs in markdown.

~~~
mdo
What specifically would you like to know?

------
joshburgess
Sass by default FTW!

It says they rewrote all of the JS using ES6... Does this mean jQuery is no
longer a dependency?

~~~
lol768
Assuming the comment in the starter template isn't outdated, jQuery is still
required.

[http://v4-alpha.getbootstrap.com/getting-
started/introductio...](http://v4-alpha.getbootstrap.com/getting-
started/introduction/#starter-template)

~~~
joshburgess
Booooooooooo. 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
Like 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.

~~~
hit8run
Angular by default is not using jQuery. They have a convenience layer that is
similar to the jQuery-API called jqLight. But if you use Angular in the right
way you usually don't need to access the DOM with these methods.

------
nfm
Nice 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.

------
julianozen
Sorry 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
They'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/)

------
niutech
I 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
Foundation has a Sass function to do this called rem-calc(pixel size), not
sure if there is a Bootstrap equivalent.

------
grandalf
I'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
@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
Hah, happy to hear that. Thanks!

------
LoSboccacc
> Want default transitions on everything or to disable rounded corners? Simply
> update a variable and recompile.

Oh hell no. But the rest is grand.

------
k__
With flexbox, wonderful!

~~~
zecho
To be clear: It's optional. Off by default.

------
roeeba
The 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

------
sebkomianos
For anyone interested, there's a PR in the rails bootstrap-sass gem:
the[https://github.com/twbs/bootstrap-
sass/pull/954](https://github.com/twbs/bootstrap-sass/pull/954)

------
dodyg
This 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.

------
new_hackers
Get 404 at [http://v4-alpha.getbootstrap.com/examples/jumbotron-
narrow/](http://v4-alpha.getbootstrap.com/examples/jumbotron-narrow/)

~~~
betenoire
probably not the most useful place to point this out.

[https://github.com/twbs/bootstrap/issues](https://github.com/twbs/bootstrap/issues)

------
TheGRS
I 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
Thanks! <3

------
sangd
You're moving too fast. I just migrated mine app to 3.

------
hashgowda
@Bootstrap Team. Any plans of reviving
Ratchet([http://goratchet.com](http://goratchet.com)) project?

------
padho
Nice 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.

------
scubadude
Is 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
We've got them! See
[http://v4-alpha.getbootstrap.com/components/forms/#custom-
fo...](http://v4-alpha.getbootstrap.com/components/forms/#custom-forms) :).

------
jadidian
Means Bootstrap is a few years behind Foundation...

~~~
detaro
in what way?

~~~
jadidian
"Moved from Less to Sass, improved grid system, dropped IE8 support and moved
to rem and em units" looks like where Foundation was more than a year ago

------
hashgowda
@mdo Any plans of reviving
Ratchet([http://goratchet.com](http://goratchet.com)) project?

------
JuanSoto
Very 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
I'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/)

------
gearoidoc
I could be wrong but looks like this doesn't have responsive text alignment?
Really miss that on a regular basis with bootstrap.

------
geon
How come the "extra small" buttons are larger than the "small" ones?

~~~
mdo
Oh, I removed the CSS for those and forgot to remove them from the docs
:grin:.

------
miyuru
progress bars has changed
[http://v4-alpha.getbootstrap.com/components/progress/](http://v4-alpha.getbootstrap.com/components/progress/)

------
barbolo
Do you know what plugins they used to transform Markdown into HTML?

~~~
mdo
Our 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
SASS and rem are the biggest features I am looking forward to.

------
itsbits
No backward compatibility with Bootstrap 3?

~~~
danneu
I 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.

------
miyuru
well glyphicons have been removed, didn't even notice it in the docs.

------
arxpoetica
I haven't really been a loyalist to Bootstrap, but this is the shiz.

------
tuananh
that card things looks exactly card from picnic css.

------
lkjasdoiuqwe
Wow 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?

