Announcement

Collapse
No announcement yet.

Fun with Mobile First

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • lesliekirk
    replied
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    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:
    Code:
    .promo-title {
        color: blue;
    }
    
    @media (min-width: 48em) {
        .promo-title {
            color: red;
        }
    }

    Leave a comment:


  • lesliekirk
    replied
    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. */

    Leave a comment:


  • Bruce - PhosphorMedia
    replied
    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

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Bruce - PhosphorMedia View Post
    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".

    Leave a comment:


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

    Leave a comment:


  • lesliekirk
    replied
    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.

    Leave a comment:


  • RTHOMASDESIGN
    replied
    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!

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by RTHOMASDESIGN View Post
    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.



    Leave a comment:


  • RTHOMASDESIGN
    replied
    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.

    Leave a comment:


  • lesliekirk
    started a topic Fun with Mobile First

    Fun with Mobile First

    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

    Code:
     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"

    Code:
    .u-width-2-5--m, {
        flex-basis: calc(100% / 12 * 2.5);
        max-width: calc(100% / 12 * 2.5);
    }
    What am I doing wrong?
Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept