Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • IPS Customization.

    While building this website I have learned a lot about how to customiza different aspects of the IPS products. I see a lot of people struggling to get started with IPS and this section is my attempt to gather what I have learned so others can benefit as well.

    To me nothing is more important than to share knowledge and help others. This section contain my findings and the things I have learned, but I still have much more to learn as well. Together we can learn and evolve the ways we customize the IPS products and while doing that there are no stupid questions. In the forum you can ask any question and we will try our best to answer them.

    Go to the IPS Forum ->
  • Class prefixes/modifiers

    Jimi Wikman

    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.


    User Feedback

    Recommended Comments

    There are no comments to display.

    Please sign in to comment

    You will be able to leave a comment after signing in

    Sign In Now

  • Create New...