Bootstrap 4 final in next Phoenix release? (Update: No... Phoenix 1.4 uses Milligram)

Will bootstrap 4 be supported by default in the next Phoenix release? They recently became stable. I know it’s trivial to swap it oneself, but I don’t see a reason not to upgrade officially

Bootstrap was never “supported” by Phoenix, as far as I know :rolling_eyes: There is not nothing to upgrade as Phoenix doesn’t ship with Bootstrap included.

phoenix_app/assets/css/phoenix.css contains a massive blob of Bootstrap v3.3.5 by default. This is part of the either the Phoenix guides or docs, as far as I know. With that it mind, the question is probably “Will Phoenix automatically include Bootstrap 4 now?”.

2 Likes

Not “supported” officially but it comes with Bootstrap CSS in app.css for the homepage. See https://github.com/phoenixframework/phoenix/blob/v1.3.0/installer/templates/phx_assets/phoenix.css

The plan is to remove bootstrap css but it’s not done. See comments in https://github.com/phoenixframework/phoenix/pull/831

1 Like

I see Bootstrap as the jQuery of the “design/styling world” and it will probably have the same fate in the long run - so it would make sense for the Phoenix base install to not include it at all.

My guess it’s in there now because waiting for handmade CSS would have delayed completion of the the seed project assets a bit longer - none of which are a primary concern for Phoenix.

Result: Adding Bootstrap to Phoenix will become a user customization of the seed project.

3 Likes

Alright thanks everyone :slight_smile: makes sense now

We include it only for the “something that looks decent out of the box” experience and something that you can just roll with for prototyping, so we don’t have a big desire to stay on the bleeding edge. I haven’t followed up on bootstrap 4 really. Did they majorly change conventions/classes/grids that could trip folks up? I’d entertain a PR that swapped it out.

2 Likes

Yes they changed most of classes, grids. After upgrade my bootstrap 3.3.7 to bootstrap 4 everything blew up

They have changed enough things that your layout will stop working in many cases. I don’t think there’s any advantage of including bootstrap4 instead of 3 as a default.

Phoenix 1.4 uses https://milligram.io , in an effort to go almost entirely classless generated markup, with reasonable out-of-the-box styling and responsiveness.

7 Likes

So I do a mix phx.new and am working away on stuff and finally get around to the homepage. I delete out the included stuff and update the fav.icon. So I’m like ‘view page source’. Ok. Click on /css/app.css. " * Bootstrap v3.3.5 (http://getbootstrap.com)" Huh??? I search documentation. Nothing. So I find this thread.

First let me say given a choice I would rewrite history and delete Bootstrap. That said I over and over again find myself adding it in sooner or later. It just has so much useful stuff. What I would like to advocate, (I can’t believe I am saying this) is include Bootstrap 4 by default. We end up using the dang thing at some point any way. I would say do not include version 3. From https://blog.getbootstrap.com/ dated 24 Jul 2019, “Starting today, Bootstrap 3 will move to end of life, and will no longer receive critical security updates.”

If the Phoenix user is smart enough to know not to use Bootstrap they will know how to take it out. If the user is not that smart, like myself, we will want it in by default. :slight_smile:

1 Like

Milligram is a fine choice as it adds just enough defaults to make a fresh Phoenix installation look good. There are too many options to choose from when it comes to CSS libraries, so there’s no right choice and I don’t think that We end up using the dang thing at some point any way is true for many people either. Ask someone else, and they will tell you the same thing about Bulma, Tailwind etc…

Phoenix is not about styling your app – including Bootstrap or similar would lead to a situation where the Phoenix team would always “have to” include the latest version, because people would expect it. Milligram just adds minimal styling and if you don’t want to use it, you just have to delete one single file, which is a good compromise. Also, most people will use something else anyway and don’t really care about the Milligram version.

If you want to use Bootstrap, I think it’s ok spending the two minutes it takes to pull it in :slight_smile:

1 Like