Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Class prefixes/modifiers


    Jimi Wikman
     Share

    Class prefixes/modifiers

    Wait, what's that sm: bit in the atomic classname example above? That's a new naming convention you'll see which controls at which breakpoints the style is applied.

    • Unprefixed (e.g. ipsBorder_top). Applies to all devices, desktop and smaller.
    • md: (e.g. md:ipsBorder_top). Applies to tablets and smaller.
    • sm: (e.g. sm:ipsBorder_top). Applies to phones only.

    sm and md prefixes take priority over the desktop classname. This means you provide the desktop classname but can override it for tablets and/or phones by also adding an md: or sm: classname. For example, ipsPadding_top:double sm:ipsPadding_top:half applies double top padding on desktop, but only half top padding on phones.

    You'll also see modifiers on some classes (as in the example above), for example ipsPadding:half. ipsPadding is saying 'apply padding to all sides', and the ':half' modifier makes it a smaller amount.

     Share


    User Feedback

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...