Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to a flexbox grid #771

Closed
lee-40square opened this issue Feb 27, 2015 · 54 comments
Closed

Migrate to a flexbox grid #771

lee-40square opened this issue Feb 27, 2015 · 54 comments

Comments

@lee-40square
Copy link

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
Copy link
Owner

Dogfalo commented Feb 27, 2015

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
Copy link
Author

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! 👍

@Dogfalo
Copy link
Owner

Dogfalo commented Feb 27, 2015

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
Copy link
Author

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

@dandv
Copy link
Contributor

dandv commented May 23, 2015

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
Copy link

+1

@Cosmicist
Copy link

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
Copy link

khalwat commented Jun 30, 2015

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
Copy link

khalwat commented Jun 30, 2015

@dandv
Copy link
Contributor

dandv commented Jun 30, 2015

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
Copy link

cvrebert commented Jul 1, 2015

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
Copy link
Contributor

dandv commented Jul 17, 2015

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
Copy link

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

@acburst
Copy link
Collaborator

acburst commented Jul 20, 2015

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

@dandv
Copy link
Contributor

dandv commented Aug 4, 2015

@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
Copy link

Is there something that prevents using Flexbox along with Materialzie?

@Dogfalo
Copy link
Owner

Dogfalo commented Aug 18, 2015

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
#771 (comment)
.

Doggy sends his greetings from Mars.

@jcapogna
Copy link

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
Copy link
Contributor

dandv commented Aug 27, 2015

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
Copy link

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
Copy link

+1

@ivanjuras
Copy link

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

@chintanbanugaria
Copy link

chintanbanugaria commented Dec 22, 2016

+1

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

@kmmbvnr
Copy link
Contributor

kmmbvnr commented Dec 22, 2016

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

@ixdoodla
Copy link

ixdoodla commented Jan 5, 2017

+1

1 similar comment
@bardiarastin
Copy link

+1

@robinschoss
Copy link

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

@ilan-schemoul
Copy link

ilan-schemoul commented Mar 2, 2017

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
Copy link

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

@bradley-varol
Copy link

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

@tetherit
Copy link

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

@DanielRuf
Copy link
Contributor

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

@tekamolo
Copy link

Does this finally use a flexbox grid or not yet?

@DanielRuf
Copy link
Contributor

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

@changhaitravis
Copy link

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

@ghost
Copy link

ghost commented Oct 28, 2017

Why don't we branch it?

@Dogfalo
Copy link
Owner

Dogfalo commented Oct 28, 2017

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

@IAMtheIAM
Copy link
Contributor

IAMtheIAM commented Nov 6, 2017

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
Copy link

harkirat10 commented Nov 9, 2017

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
Copy link
Contributor

@harkirat10 which do not support flexbox yet?

@mrGrochowski
Copy link

@maxisme
Copy link

maxisme commented Feb 1, 2018

+1

@bqv
Copy link

bqv commented Sep 17, 2018

Why is this closed?

@TittluS
Copy link

TittluS commented Dec 12, 2018

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

@rgaufman
Copy link

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
Copy link

I would be interested in seeing Flexbox integration as well.

@Nejkulatoulinkatejsi
Copy link

drop the stupid floats...

@AndrewDurocher
Copy link

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
Copy link

Legends commented Nov 20, 2019

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
Copy link
Contributor

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.

@Legends
Copy link

Legends commented Nov 20, 2019

Not sure what this comment adds to this discussion.

That's my 2 cents to the previous comment of mine. You don't have to like....

@OzzyTheGiant
Copy link

Wow, what a shame really. I'm starting a brand new web app today for an HR analytics and I was looking forward to using this library, but the lack of flexbox support is a no go for me. Sorry, but looks like I'm gonna have to use Bulma until further notice. If anyone else depends on this library and needs flexbox support, try adding Kristofer Joseph's Flexbox Grid. There is a sass implementation as well, by Huge, Inc... really, it's 2020 and caniuse.com reports a 95% rate of full support. We have to fully destroy any support for IE and flexbox is the way forward.

@bqv
Copy link

bqv commented Apr 27, 2020

Jesus I forgot I was subscribed to this issue. Yeah if this is still not being sorted then this project is quite dead to me

@ghost
Copy link

ghost commented Apr 27, 2020

@bqv Agreed. I wrote probably 7 or 8 projects with materialize before ultimately moving to material-ui. A bit of a learning curve, but at least I can say that the experience is consistent, and the devs accept reasonable feedback. And It comes with a flex-box implementation of a grid system. Maybe give it a shot?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests