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 ->
  • Flexbox

    Jimi Wikman


    While we've used flexbox in some places in previous versions, 4.5 makes much wider use of it and also introduces a new family of classes. If you aren't familiar with flexbox, I highly recommend this CSSTricks article for a primer on it. Essentially, instead of positioning elements using floats/clears/etc., flexbox treats the container as a flexible box with properties for controlling how elements inside of it as laid out.

    4.5 has a number of new classes that are essentially just convenience for the usual CSS rules.

    • ipsFlex (sets element to display: flex)
    • ipsFlex-ai:start, ipsFlex-ai:center, ipsFlex-ai:end, ipsFlex-ai:stretch (ai - values for align-items property)
    • ipsFlex-as:start, ipsFlex-as:center, ipsFlex-as:end, ipsFlex-as:stretch (as - values for align-self property)
    • ipsFlex-jc:start, ipsFlex-jc:center, ipsFlex-jc:end, ipsFlex-jc:around, ipsFlex-jc:between (jc - values for justify-content property)
    • ipsFlex-fd:column, ipsFlex-fd:row, ipsFlex-fd:column-reverse, ipsFlex-fd:row-reverse (fd - values for flex-direction property)
    • ipsFlex-fw:wrap, ipsFlex-fw:nowrap, ipsFlex-fw:wrap-reverse (fw - values for flex-wrap property)
    • ipsFlex-flex:10 - sets flex-grow: 1 and flex-shrink: 0
    • ipsFlex-flex:11 - sets flex-grow: 1 and flex-shrink: 1
    • ipsFlex-flex:01 - sets flex-grow: 0 and flex-shrink: 1
    • ipsFlex-flex:00 - sets flex-grow: 0 and flex-shrink: 0


    All of these classes have md and sm prefixed versions too, and this opens up the possibility of having different layouts on different device sizes in a way that's much easier than the hoops you'd have to jump through before. For example, to create some elements that show as a row on desktop but collapse to a column on mobile, you'd just apply ipsFlex ipsFlex-fd:row sm:ipsFlex-fd:column. The sm:ipsFlex-fd:column class overrules the ipsFlex-fd:row class on mobile, adjusting the layout. (Note: flex-direction: row is the CSS default direction anyway, so you can actually leave out ipsFlex-fd:row - it's implicit. I included it in the example for clarity.)


    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...