Jump to content

Recommended Posts

Posted

If there was something I wanted to adjust or implement, I just inspect the whole core_global_framework.css with ctrl + f keywords. I'm sure down the road IPS will made documentation all the new classes, hopefully. 😁

Posted (edited)

Thanks. I'm especially interested in the Layout: Grids CSS. Do you know what the equivalent of the class...

ipsGrid_span3

... is in IC5?

Edited by David N.
Posted

Documentation will arrive at some point. The framework is pretty much locked in now, I just haven't had a chance to type it all up yet. 🤝

Grids in v5 are fluid now, so you no longer need to specify a width for every single cell.

If you can let me know what sort of layout you're trying to make @David N., I'll be happy to guide you 🙂 

Posted
13 minutes ago, Ehren said:

If you can let me know what sort of layout you're trying to make @David N., I'll be happy to guide you 🙂 

Thank you so much for offering to help!

I had this simple grid with 4 elements (so each div was assigned the class ipsGrid_span3 in v4).

Now in IC5, when the viewport is wide enough, I see an additional undesired empty div (framed in red below)? 

Could contain: File, Page, Text, Webpage, Number, Symbol

Here's the page: https://z331502.invisionservice.com/about/

Posted

You have 2 solutions.

The first uses grid, but a variation which uses auto-fit instead of auto-fill

<div class="ipsGrid ipsGrid--auto-fit i-text-align_center" style="line-height:1.3em;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The second is to use ipsFluid which behaves very similar, but wrapped elements behave differently. Using ipsFluid, wrapped elements will span to occupy the full width of the grid. In comparison, ipsGrid will keep wrapped children aligned in columns. You should also specify a basis when using ipsFluid, which assigns an "ideal" width to children before they wrap to a new line.

<div class="ipsFluid i-basis_200 i-text-align_center" style="line-height:1.3em;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

ipsFluid is probably a better candidate for your example.

Posted

Thanks! Works great. It's odd how the divs wrap around though when using certain widths, with 3 divs at the top and only one at the bottom? I would expect either 4 on one line, or 2 per line, or 1 per line? 

Could contain: Text

Posted

You can use custom CSS to do that. Grids are now dynamic so instead of instantly wrapping to a single column on tablets, their column count will get less and less based on the width of the entire element (4 columns, then 3, then 2, then 1).

To wrap from 4 to 2 to 1, you’d need to configure that in a container query. I can write up instructions for that in the docs when I get around to it. 

Posted

Actually, there is a way to create grids using the "v4 span method", but it's only in the framework for legacy reasons and isn't widely used anymore. My earlier grid examples are the best for responsiveness since they'll work in every context, but you can use the following in situations that demand it:

<div class="ipsSpanGrid">
  <div class="ipsSpanGrid__4">Column</div>
  <div class="ipsSpanGrid__4">Column</div>
  <div class="ipsSpanGrid__4">Column</div>
</div>

Those grids will collapse into a single column on tablets, just like v4. But they aren't nearly as adaptive as the ipsGrid and ipsFluid versions.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...