No style in the css for class="Grid-cell u-1of3"

[getsetbro]

Thanks for your work on this!

The demo page shows you can set classes on a Grid-cell like: class="Grid-cell u-1of2"
But the css linked on the page has no classes for that: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/grid.css
There only a class for a .Grid-cell in a container of "Grid--1of3":

.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%;
}

[philipwalton]

The other CSS you're referencing can be found in the media.css ultility file. But I can see how this could be confusing. I'll look into adding extra links to these other files where it makes sense.

[getsetbro]

Would those files be combined if I cloned and built the repo?

[philipwalton]

Building the repo produces the files that are on https://philipwalton.github.io/solved-by-flexbox/, so yes.

[dafriend]

In the interests of BEM methodology I suggest refactoring u-* to Util-* or Utility-*

[philipwalton]

Technically the methodology used on this site is SUIT CSS, which makes use of utility classes.

[rajasimon]

@philipwalton Also why <div class="Grid-cell Grid--1of3">...</div> is not working ?

[sanbor]

@rajasimon Probably because Grid--1of3 is a modifier of Grid, not a modifier of Grid-cell.

[pReya]

I agree with @getsetbro. This confused me, too. I'd appreciate if you could include the full CSS in the examples on the page.

[gustiando]

Confusing indeed 😞