Is there a CSS framework guide for IC5?

[David N.]

Is there a CSS framework guide for IC5? 

Something like this but for IC5? 

 

[teraßyte]

The CSS changes are still ongoing. Even us developers only have a few rough details about it so far.

I don't expect a full guide until an advanced beta release is ready. If not post-final release even.

[Goza]

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

[David N.]

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 October 3 by David N.

[Ehren]

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 🙂 

[David N.]

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)? 

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

[Ehren]

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.

[David N.]

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? 

[Ehren]

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. 

[David N.]

Ok great, thanks a lot Ehren! 🙂 

[Ehren]

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.

[David N.]

That's great, thanks again. I believe I'm going to choose to live in the future and stick with ipsFluid for now.