Migrate to a flexbox grid

[lee-40square]

Flexbox is the future and it's what Angular uses in angular-material (which to me is a terrible implementation). It would be great to see Materialize be the only other UI framework that uses flexbox. :-)

[Dogfalo]

We think in the future this will be a great thing, but from our experience with working with flexbox, the world isn't quite ready for this yet.

[lee-40square]

I haven't played much yet with flexbox but I might dive in an see. Angular-material is really painful to work with but I think it's because of their class implementation and lack of documentation, not flexbox itself. Anyway, I love what you guys are doing. Keep up the great work! :+1:

[Dogfalo]

It's mainly IE, even in the newer 10+ versions, that has issues with it. Even though it "supports" flexbox, it doesn't adhere well to the w3c specifications which in turn causes problems when trying to maintain cross browser compatibility.

Also thanks for the words of encouragement!

[lee-40square]

makes sense. I'll close this issue if that's ok with you. I think you're right. Flexbox is not mature enough.

[dandv]

Hey Alvin,

Please reconsider this decision.

Flexbox is the way to go forward. There are ways to get Flexbox working in IE, and IE8 or older have very small (<4%), and dwindling, market share. The kinds of apps built for a Material Design audience, appeal to users who use modern browsers anyway. The README already mentions that Materialize only supports IE10+.

The community is looking for a good framework that uses Flexbox.

Let's make Materialize better than Bootstrap, which has refused to use flexbox.

[felixsanz]

+1

[Cosmicist]

I think you should reconsider this, we need good frameworks that push forward. And I think moving to a flexbox grid is the right step here. That plus jQuery removal are the things will make this framework stand out from the rest, because it still feels like a new bootstrap.

[khalwat]

Should look to the future, I'd be interested in adopting Materialize if it was based on Flexbox. Otherwise, as some have stated, it's just a mildly interesting alternative to Bootstrap.

[khalwat]

http://philipwalton.github.io/solved-by-flexbox/

[dandv]

In #1230, @Dogfalo said

We don't plan to add support for IE9 and if this is something that you need, you will have to look elsewhere.

So we'll need to figure out what the Flexbox issues are in IE10+, and come up with workarounds. https://github.com/philipwalton/flexbugs is a great start - a repo listing flexbox bugs and workarounds.

[cvrebert]

Let's make Materialize better than Bootstrap, which has refused to use flexbox.

@dandv That will change in Bootstrap v4: https://twitter.com/getbootstrap/status/610859622153515008

[dandv]

Added this as a con to http://www.slant.co/topics/150/viewpoints/19/~what-are-the-best-css-frameworks~materialize, among many great features.

[cvrebert]

@dandv Creating an experimental fork to prove that it's feasible would be more productive.

[acburst]

We are thinking about adding this as an additional grid option in the future

[dandv]

@lee-40square: if Flexbox is not mature enough, can you please remove the mention at http://materializecss.com/footer.html that MaterializeCSS uses flexbox?

[jcapogna]

Is there something that prevents using Flexbox along with Materialzie?

[Dogfalo]

nope

On Mon, Aug 17, 2015 at 1:44 PM, jcapogna notifications@github.com wrote:

Is there something that prevents using Flexbox along with Materialzie?

— Reply to this email directly or view it on GitHub https://github.com/Dogfalo/materialize/issues/771#issuecomment-131956449 .

Doggy sends his greetings from Mars.

[jcapogna]

Well in that case, this doesn't seem like that big of a deal. At least, it's certainly not a reason to not use Materialize.

[dandv]

You can probably use Materialize along with Bootstrap as well, but does it make sense?

If I use a flexbox grid system, then the Materialize one is just deadweight. Same if I use flexbox for a proper sticky footer instead of the Materialize one.

For what it's worth, Bootstrap 4 has optional flexbox support.

Anyway, please remove the false claim at http://materializecss.com/footer.html that flexbox is used for the sticky footer. It's not. See #1409.

[eikaramba]

I would also reconsider this today, nearly one year after the decision. Flexbox support is good nowadays, and even for IE <10 possible. bootstrap is doing it foundation is doing it semantic UI is doing it ...more are doing it (which names i not remember)

[thebiltheory]

+1

[ivanjuras]

+1 has anything happened with Flexbox as of this date?

[chintanbanugaria]

+1

I am starting a new project and would like to build it using materialize. Has it migrated in Flexbox Grid yet ?

[kmmbvnr]

Bootstrap 4 recently drops IE9 support and preparing to use Flexbox only.

[ixdoodla]

+1

[bardiarastin]

+1

[robinschoss]

+1! Is there a working fork of this yet?

[ilan-schemoul]

Sorry but I really think, for all reasons above, that you should do it. It's an huge deal, it's listed as a reason to not use Materialize in a top of best front-end frameworks. Thus devs (including I) may not use or think about dropping Materialize because of that. Just saying that things have changed and I think that you should really implement it, it's obviously up to you. If you're willing to use flexbox as a grid system, I would be glad to try to make a PR. EDIT : there's an interesting CSS flexbox grid system you could use or take inspiration from. Flexbox is one of the most exciting features brought by CSS. It solves a ton of issue and makes a lot of things, that used to be a pain in the back, a breeze. It could allow you to add a ton of useful feature to the grid system. Maybe this is gonna be a part of a version V1.0 that could be the occasion to make a big leap toward ;)

[jasonsturges]

Besides remaining competitive with frameworks listed above, Google's Material Design Lite uses Flexbox.

[bradley-varol]

This framework looks awesome, it's a shame that flexbox isn't supported. +1

[tetherit]

Wow, this doesn't use flexbox? - shame, I guess my search continues!

[DanielRuf]

Well, you can always include flexbox classes and it should be not so hard to change the grid using the Sass files.

[tekamolo]

Does this finally use a flexbox grid or not yet?

[DanielRuf]

No, we do not yet use flexbox for the grid.

[changhaitravis]

+1 for flex-box. even namespaced out would be good.

[ghost]

Why don't we branch it?

[Dogfalo]

We're focused on 1.0 release right now. After that is out, we will add a Flexbox grid.

[IAMtheIAM]

In the mean time, you can easily create your own flexbox based grid, using Susy3. You don't need to use the out of the box grids that frameworks provide. For example, I created a 24 column grid:

/* ===============================================================
 *             GRID: Custom 24-Column Flexbox-Based Susy3 Grid
 * =============================================================== */
.col-1 {
   flex: 1 1 span(1 of 24);
   margin-right: gutter(24); // gutter(24) is equavalent to 1 of the 24 columns

   &.last-col {
      margin-right: 0;
   }
}

.col-2 {
   flex: 1 1 span(2 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-3 {
   flex: 1 1 span(3 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-4 {
   flex: 1 1 span(4 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-5 {
   flex: 1 1 span(5 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-6 {
   flex: 1 1 span(6 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-7 {
   flex: 1 1 span(7 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-8 {
   flex: 1 1 span(8 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-9 {
   flex: 1 1 span(9 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-10 {
   flex: 1 1 span(10 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-11 {
   flex: 1 1 span(11 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-12 {
   flex: 1 1 span(12 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-13 {
   flex: 1 1 span(13 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-14 {
   flex: 1 1 span(14 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-15 {
   flex: 1 1 span(15 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-16 {
   flex: 1 1 span(16 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-17 {
   flex: 1 1 span(17 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-18 {
   flex: 1 1 span(18 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-19 {
   flex: 1 1 span(19 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-20 {
   flex: 1 1 span(20 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-21 {
   flex: 1 1 span(21 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-22 {
   flex: 1 1 span(22 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-23 {
   flex: 1 1 span(23 of 24);
   margin-right: gutter(24);

   &.last-col {
      margin-right: 0;
   }
}

.col-24 {
   flex: 1 1 100%;
   margin: 0;

   &.last-col {
      margin-right: 0;
   }
}

Then implement like this, for example 2 cols that are 50% width of the container.

<div class="col-12">First col 50% width</div>
<div class="col-12 last-col">Last col 50% width (no margin right)</div>

That can easily be changed to a 12 col grid, 9 col, or any grid that suits your needs. I always use Susy for creating grids no matter what CSS framework I'm using.

Then of course there is actual CSS Grids module, but it is only supported by modern browsers, and is only useful when you really need a "grid" meaning 2 dimensional, rows and cols. Flexbox technically isn't a grid, its 1-dimension, rows OR columns.

[harkirat10]

Yes please upgrade to using flexbox. It's the future. It's a shame it doesn't. A lot of people are looking for frameworks right now that support flexbox and very few do right now even when all modern browsers support it natively today.

[DanielRuf]

@harkirat10 which do not support flexbox yet?

[mrGrochowski]

+

[maxisme]

+1

[bqv]

Why is this closed?

[TittluS]

Materializecss 1.0 is out. Dogfalo where is the Flexbox grid?

[rgaufman]

We're focused on 1.0 release right now. After that is out, we will add a Flexbox grid.

14 months later, any news on Flexbox? :)

[harkirat10]

I would be interested in seeing Flexbox integration as well.

[Nejkulatoulinkatejsi]

drop the stupid floats...

[AndrewDurocher]

This is what I do most the time if I want the coolness of Materialize and the power of FlexBox: https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

bootstrap-grid.min.css

In some cases, large corporations have computer systems that cannot accept software updates. Mostly people who run Java and ASP (lol)... However until they decide to spend the millions of dollars it takes to install Chrome and get off IE9/10/11.... The stats wont drop... The problem is not usually the customer/visitor its almost always the client asking for the project-build. Just blacklist the client IP on analytics and see the IE Stats drop to zero. Its our responsibility as developers to say enough is enough, we're no longer using Netscape Navigator! I mean.. IE. Then flamboyantly pump out the CSS3.

[Legends]

Next MS Edge version is based on Chromium. Because of the pain with IE and lastly Edge, I will boycott MS Edge forever.

I mean look at the settings if you want to change something, it's hell even more today, it was better with IE.

But look at the settings in Chrome, you have a search box, no need to scroll/search by hand, it's so easy.

[DanielRuf]

Next MS Edge version is based on Chromium. It is already available. https://www.microsoftedgeinsider.com/download

The "old" Edge was using the engine of Microsoft

I will boycott MS Edge forever. Not sure what you mean.

Not sure what this comment adds to this discussion.