Fun with Mobile First

[lesliekirk]

Hey Matt,

I understand the concept of "Mobile First" and I thought I had been adhering to it in my layout. Again, I had "assumed" that when the page was viewed on a mobile device the class "u-width-12" would "prevail because there wasn't any media query involved. The only way I could get my layout to work WAS to add the media query. I guess that is why I got so confused.

[Matt Zimmermann]

Hi Leslie,

"Mobile First" denotes the fact that is you use a certain class, this will start at the mobile level and stay until, if used, a media query is hit which changes what happens when your class is used.

For example, the promo title this class is applied to will be blue wide until you hit a screen width of 48em (768px), then it will be red:

.promo-title {
    color: blue;
}

@media (min-width: 48em) {
    .promo-title {
        color: red;
    }
}

[lesliekirk]

It's not Bootstrap and if you dig through the CSS for Shadows you will even see references to Mobile First


In the UTILITIES / GRIDS and UTILITIES / WIDTHS

/* Mobile First =========================================== */ /** * Width size modifiers. */

[Bruce - PhosphorMedia]

Mobile first doesn't necessarily require the mobile classes to come first since the styles applied are determine mostly by media quires. If Style1 was mobile, and Style2 was desktop, mobile never see's those styles.

If style1 was
{ color:#000, font-size:1rem, text-transform:uppercase }

and style2 had:

{color: #4f4f4f}

the enclosed item will have

{ color:#4f4f4f, font-size:1rem, text-transform:uppercase }

applied.

And at least with Bootstrap, Desktop is applied first specifically because of this rule. For example:


d-none d-lg-block d-md-inline-block

hides on mobile
displays as block on desktop
and inline-block on mid-range

[lesliekirk]

Not sure this was posted clearly, especially for others, if you have "style1, style2" and without media queries, style2's same styles override style1.

Not sure if that clarified it any. Perhaps in context, an example?

I was "assuming" that the "mobile first" "u-width-12" was going to kick in because I "thought it was in the "mobile first" position.

class="o-layout__item u-text-center x-product-layout-images u-width-12 u-width-2-5--m"

So I'm not sure what you are referring to when you say "style1, style2".

[Bruce - PhosphorMedia]

Not sure this was posted clearly, especially for others, if you have "style1, style2" and without media queries, style2's same styles override style1.

[lesliekirk]

That makes sense! Thanks, that's what it needed. I will have to be more diligent with my usage of the media query. I had "assumed" the Mobile First would have been more powerful.

[RTHOMASDESIGN]

You typically want to keep all of your custom styles in that file, but the media queries can make it tricky.

It doesn't sound like your custom class was wrapped in a media query. So it always gains precedence over u-width-12 as it's loaded later down the line after grids.css... Placing this in your theme-styles may work as well:

@media screen and (min-width: 40em) {
.u-width-2-5--m {
flex-basis: calc(100% / 12 * 2.5);
max-width: calc(100% / 12 * 2.5);
}
}

Hope this helps!

[lesliekirk]

Is your custom class wrapped in a media query? Did you place the class in the same "grids.css" file? Your custom class should be located in the same area as the other --m classes. CSS is all about hierarchy and specificity.

No

No - it's in the theme-styles.css file (which I thought was meant to "overrule" the other files).

I placed it with the other Product Page styles in that section of the file.

[RTHOMASDESIGN]

Is your custom class wrapped in a media query? Did you place the class in the same "grids.css" file? Your custom class should be located in the same area as the other --m classes. CSS is all about hierarchy and specificity.

[lesliekirk]

So I was thinking the if the class for the mobile display was "first in line" it would be the what is displayed in the mobile view. I have the following

 class="o-layout__item u-text-center x-product-layout-images u-width-12 u-width-2-5--m"

I'm thinking that the class "u-width-12" should be "obeyed" for the smaller screen. It seems to be ignored in favor of my custom classes "u-width-2-5--m"

.u-width-2-5--m, {
    flex-basis: calc(100% / 12 * 2.5);
    max-width: calc(100% / 12 * 2.5);
}

What am I doing wrong?