ipsGrid

[legionaire]

is ipsGrid_span no longer used in 5.0 and if not what replaced it ?

[Matt]

I'm going to tag in our CSS maestro @Ehren for assistance. 

[SeNioR-]

Hi. You need to replace ipsGrid with ipsData and ipsData--grid and for single record you need to useipsData__item.

[Matt]

Ehren, you look different today.

[legionaire]

Thanks to you both will give that a shot 🙂

[Ehren]

On 11/15/2024 at 10:53 AM, legionaire said:

is ipsGrid_span no longer used in 5.0 and if not what replaced it ?

ipsGrid has moved to a more fluid concept in version 5.

With version 4, you'd typically add ipsGrid and then each child would need to use a ipsGrid_spanx class which told it how many columns to span (out of 12). On tablets and phones, these grids would automatically collapse to 1 column.

That concept was fine a decade ago, but with the limitless amount of devices these days, fluid/dynamic concepts are better.

In version 5, when you assign ipsGrid, all children are automatically assigned to a grid (the span class is now redundant). By default, grids have an ideal column width of 260px, but you can change that by adding a basis class, such as i-basis_350 which will make all columns 350px, or by changing the --i-basis CSS variable for that element. Columns will automatically grow/shrink/add/remove depending on the available space on the screen.

If you need to restrict the grid to a certain amount of columns (lets assume you never want more than 3 columns for some reason), you can add ipsGrid--max-3 to the parent.

If you need to use the old grid system and force content into a 12 column grid (like v4), you can use .ipsSpanGrid on the parent, and then ipsSpanGrid__4 (for example) on the children. But the new fluid code is better 🙂 

[shahed]

On 11/15/2024 at 12:43 PM, Matt said:

I'm going to tag in our CSS maestro @Ehren for assistance. 

I mean talking about @Ehren as CSS maestro is one thing, and seeing it in action how he disable an element without a template condition is something else entirely.

Just tip of the Iceberg...

🫡

Edited November 18 by shahed

[legionaire]

Thanks Ehren, I know it has been a while, but I finally got this incorporated using ipsGrid.  I have one more question (for anyone who can answer) is there a way to have my app take on the theme settings for any theme that may be used ?

[Ehren]

10 hours ago, legionaire said:

is there a way to have my app take on the theme settings for any theme that may be used ?

If you can elaborate on what you're trying to achieve, I might be able to help 🙂 

[legionaire]

It used to be you could use ipsAreaBackground for your application to obtain the same look and feel of a theme you were using however, that does not seem to work in 5.0.

I don't want to make the app the coloring I like and not be able to change it but, to take on the look of the theme that is being used

[Ehren]

All of the theme colours are available as variables.

The most useful ones for backgrounds are --i-background_1 through to --i-background_6. Background 1 is the lightest colour in a light theme, and the darkest in the dark theme.

There are 3 main colors: --i-color_root, --i-color_soft and --i-color_hard. "Root" is the global text colour, "soft" is a subtle/softer colour and "hard" is a higher contrast colour. There are also a bunch of others including --i-color_primary, --i-color_secondary, --i-color_positive, --i-color_negative.

In practice, variables in v5 look like this:

.box{
  background-color: var(--i-background_3);
  color: var(--i-color_hard);
  padding: 1em;
}

 

[legionaire]

Thank you Ehren, that will get me going

[SeNioR-]

On 11/28/2024 at 5:16 AM, Ehren said:

backgrounds are --i-background_1 through to --i-background_6.

On 11/28/2024 at 5:16 AM, Ehren said:

--i-color_root, --i-color_soft and --i-color_hard.

I have to admit that the new variable naming is much more intuitive and simpler than in IC4 👍 Even if we don't know the exact name of a variable, we can easily guess it.

[Ehren]

I’m glad you think so too. Numbers have been much easier to work with compared to descriptive names. 🙂 

I should also mention that those variables map directly to utility classes, such as class=“i-background_2 i-color_hard”

[Adriano Faria]

On 11/15/2024 at 10:36 PM, Ehren said:

If you need to restrict the grid to a certain amount of columns (lets assume you never want more than 3 columns for some reason), you can add ipsGrid--max-3 to the parent.

@Ehren or anyone else.

I got this on IPS4:

I used:

<div class='ipsGrid'>
    <div class='ipsBox ipsGrid_span2 ipsType_center'>...</div>
    <div class='ipsBox ipsGrid_span2 ipsType_center'>...</div>
    <div class='ipsBox ipsGrid_span2 ipsType_center'>...</div>
    <div class='ipsBox ipsGrid_span2 ipsType_center'>...</div>
    <div class='ipsBox ipsGrid_span2 ipsType_center'>...</div>
    <div class='ipsBox ipsGrid_span2 ipsType_center'>...</div>
</div>

Trying to do the same on IPS5. I'm trying:

<div class='ipsGrid ipsGrid--max-6 i-margin-top_2'>
	<div class='ipsBox i-text-align_center i-padding_2'>...</div>
	<div class='ipsBox i-text-align_center i-padding_2'>...</div>
	<div class='ipsBox i-text-align_center i-padding_2'>...</div>
	<div class='ipsBox i-text-align_center i-padding_2'>...</div>
	<div class='ipsBox i-text-align_center i-padding_2'>...</div>
	<div class='ipsBox i-text-align_center i-padding_2'>...</div>
</div>

but it isn't working as expected:

 

Can you point out what I'm doing wrong?

Thanks.

[Ehren]

38 minutes ago, Adriano Faria said:

Can you point out what I'm doing wrong?

Everything’s correct, you just need to assign a smaller column width. By default, the “ideal size” for columns is 280px. Since there isn’t enough space for 6 of those columns (1560px + gaps), they collapse instead of becoming squashed.

Making the ideal size of columns smaller can be done by adding a basis class, such as i-basis_120 to the ipsGrid element (the basis name was inspired by flex-basis and can be used on flex children too). Just make sure to test all screen sizes by adjusting your browser window. 

[Adriano Faria]

Bingo!

Wil play with it a bit more.

Thanks.

[Marco Junior]

16 hours ago, Adriano Faria said:

Bingo!

Wil play with it a bit more.

Thanks.

Straying a bit from the topic, the display with only 4 columns is much more beautiful.
At least I prefer it! The information is larger, automatically more elegant.