preface: swearing.
because anger.

So. I'm trying to use Material Design with Material UI. The components and UI look *great*.

It's from google, though, which really pisses me off. but I like what I can do with the UI.

I really want a grid system for responsiveness. because obviously. besides, i really hate doing all the responsive shit myself. it sucks and i hate it.

Material Design does not include a grid system. okay, it includes a grid component, but it's not for site layout. it's for making a grid of images. or something.

What it does include is a lot of very lengthy documentation on what you should do, complete with fancy graphics saying "THIS IS HOW YOU MUST DO IT OR YOU'RE DOING IT ALL WRONG" -- but they don't actually support it! you must do it all yourself.

Why oh why would they tell you how you must do things if they don't provide the tools to make it possible? fucking google.

You might decide it's a grand idea to interject at this moment and say: "there are plenty of tools out there that allow you to do this!" And sure, you'd be right. however -- and i think this might just barely might be worth mentioning -- THEY REALLY FUCKING SUCK. Hey, let's look at some of the classes! So clear and semantic! This one was nice and simple: "xs4" -- but wtf does that mean? okay, it apparently means 4 columns as they'd appear on an extra-small layout. How does that work on a large layout? Who knows. Now, how about "c12"? okay, maybe 12 columns? but how does that display on a phone with a layout small enough to only have 4 columns? i don't know! they don't know! nobody knows!

oh oh oh oh. and my particular favorite: "mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom" WHAT. THE. FUCK. I'm not writing a goddamn novel! and that one claims to be from google itself. either they've gone insane or someone's totally lying. either way, fuck them.


Instead of using Material Design v0.fuckoff that lacks any semblance of a grid layout, I figure I'll try v1.0 alpha that actually has one supported natively. It's new and supports everything I need. There's no way this can't be a good idea.

The problem is, while it's out and basically usable, none of the React component libraries fucking work with it. Redux-Form doesn't work with it either because it doesn't understand nested compound controls, and hacking it to work at least triples the boilerplate. So, instead, I have to use some other person's "hey, it's shitty but it works for me" alpha version of someone else's project that works as a wrapper on top of Redux-Form that makes all of this work. yeah, you totally followed that. Kind of like a second-cousin-twice-removed sort of project adding in the necessary features and support all the way down. and ofc it doesn't quite work. because why would things ever be easy?

like seriously, come on.
What i'm trying to do isn't even that bloody hard.

Do I really have to use bootstrap instead?
fuck that.

then again, fuck this significantly more.


  • 10
    It feels like the frontend world is moving so damn fast that everything stays in the "prototype" stage and then dies because it gets replaced by some other prototype. It sucks.
  • 5
    I'm not defending material design here, but the material UI lib is not made by Google. It was made by call-em-all.

    That being said, I know what you mean regarding the material design documentation. I've been doing an hybrid app that uses material design for more than half an year now, so I really know your pain.
  • 4
    And the lack of a grid system as bitten me hard. I had to keep everything centered and rely on max-width, because it's what it seems they do.
  • 2
    @runfrodorun 😊
  • 7
    @Ashkin one of the best rants I've read in a while. And it's on fucking point, too.

    (Edited to remove a random "g" after "fucking")

    (Edited again for spelling because I'm apparently an idiot tonight)
  • 1
    Literally my 2 cents here.
    We have an app in Angular and use PrimeNG Angular components coupled with Ultima theme.
    It has what you need. Have a look at it.
  • 1
    @smitsanghavi thanks! But this is a react-only app
  • 2
    @Ashkin i can probably get you to beta try one of our products. Its pretty much react-strap with styled-component. Easy use easy customizable variables and we wrote a fancy doc.
  • 1
    @Santaclauze oooh, link please!
  • 0
    @Ashkin well i checked with my boss (who is my mentor and who teaches me how to dev) and he told me that i was dreaming and it wont happen and old me its not ready...

    Sorry i wished i could have helped -_-
  • 2
  • 2
    @Ashkin im very sorry i should have asked upwards before asking sideways.

    Well to make you feel better im french and i exagerate. Our tool is really not that good ;)
  • 1
    Though the bootstrap style grid system was kind of nice, I found it quite difficult sometimes when it needed any sort of customisation. Though probably down to me being somewhat inexperienced.

    An alternative approach that I quite liked is a HOC that abstracts over media queries. One library I saw produced props like the following after creating the wrapper specifying the widths:

    mobile: true
    tablet: false

    I am sure my colleague showed me Material ui docs which demonstrated the same feature, I can't see it at the moment. I'll get back to you
  • 0
    That's why I would make my own framework :)
  • 0
    This is so relatable. I honestly stopped using these full featured CSS frameworks a while back and rolled my own. It doesn't use that many classes and that just works for me.

    Good luck though! Hope you can figure out how to deal with this mess.
  • 3
    @AlexDeLarge This. Alex said it exactly the right way! The only thing I also want to say myself is:

  • 1
    @AlexDeLarge I just woke up. Haven't had coffee yet. Don't worry man!
  • 0
    @ashkin PrimeNG has a react version too... Look for PrimeReact on Google...
Add Comment