In a project I'm working on I needed a sizer helper class which makes elements with the class equal width no matter the items inside the grid.

I extended the size utility to generate this class (including a class for each breakpoint if the responsive flag was set to true) with the default namespace of "equal-width" but this is configurable like the other iotacss namespaces.

So with the default iotacss config it would be: .u-equal-width, .u-equal-width@sm, ...

Is this something that could be useful for iotacss base? If so, I can create a PR.

Uses '/' for division.

Dart Sass compiler is deprecating this - warnings from the compiler:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(100, $column-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
34 │     $margin-size: ((100 / $column-size) * $i) * 1%;
   │                     ^^^^^^^^^^^^^^^^^^
   ╵
    ../node_modules/iotacss/modules/iotacss-utils-pull/_utilities.pull.scss 34:21  @import

There maybe other uses of this in the libary, but this is one example.

Hi,

if I set (according the documentation: https://www.iotacss.com/docs/objects/grid/):

$iota-objs-grid-gutter: (
  small: (
    null : 5px,
    sm   : 10px
  )
);

it does not seem to render responsive gutter styles. I had a closer look into the source file (https://github.com/iotacss/iotacss/blob/master/modules/iotacss-objs-grid/_objects.grid.scss), and that variable is not evaluated there.

Create a line-height utility

In https://www.iotacss.com/docs/objects/grid/, Settings section, first row of table ("$iota-objs-grid-aligned"), the Default value should be "false", not "fasle".

The documentation site doesn't scroll together. It relies on two columns, and users are expected to scroll one column at a time, with sheer in the middle of the window.

This makes it harder to scroll, and can trigger migraines for users with visual processing issues.

Media object is a great way to make simpler layout using the modifier o-media-full like this

<div class="o-media o-media--full">
  <div class="o-media__fixed">
     ...
  </div>
  <div class="o-media__fluid">
     ...
  </div>
</div>

It will render one fixed sized row and one fluid row using all the vertical height of the parent and making the content scrollable.

iotacss code:

$iota-objs-media-full-name: 'full' !default;

.#{$iota-objs-media-var-media-mod + $iota-objs-media-full-name} {
  height: 100%;
  overflow: hidden;

  & > .#{$iota-objs-media-var-media-fixed},
  & > .#{$iota-objs-media-var-media-fluid} {
    height: 100%;
    overflow: auto;
  }
}

Maybe you are already thinking/implementing new utilities, but I would like to know what do you think about adding those:

Border

Add a border to an element

<div class="u-bt-black">A div with a bottom border</div>
<div class="u-bv-black">A div with a left and right border</div>

Border-radius

Add a border-radius to an element

<div class="u-br-x2">A div with a border radius of 2px on all corner</div>
<div class="u-brb-x4">A div with a border radius on bottom corner</div>

Box-shadow

Add a shadow to an element

<div class="u-boxshadow-x3">A div with a strong shadow</div>
<div class="u-boxshadow-x1">A div with a light shadow</div>

$iota-utils-margin-default may have a list value to set which exactly margins should be generated which is a really cool feature.

// that is awesome
$iota-utils-margin-default: null null '10px';

It would be logical and very helpful if $iota-utils-margin-extra variable could also contain a map of lists but currently it can't.

// that would be even more awesome
$iota-utils-margin-extra: (
  '-x2': null null '20px',
  '-x3': null null '30px',
  '-x4': null null '40px',
);

Same with $iota-utils-padding-extra.
And thanx for such a great framework!

Hy,
do you have any particular reason, why you do not reset button margin along reset of other form elements here
?
Seems like normalize.scss is doing it here, and I discovered, it is an issue on Safari Mobile v11.

If you set the responsive flag to true for the push and pull module, it will generate utility classes for each breakpoint, which is great!

The only thing that is missing is a class to stop this pushing / pulling on certain breakpoints (like Bootstraps .col-*-offset-0 classes)

I can create a PR if you think this would be a useful addition to IotaCSS.

I noticed when using the .o-grid--equal-height modifier, the child block elements of the grid columns become inline.

E.g.:

<div class="o-grid o-grid--equal-height">
<div class="o-grid__col u-12/24@md-up">
<div class="div1">...</div>
<div class="div2">...</div>
</div>
<div class="o-grid__col u-12/24@md-up">...</div>
</div>

Will result in .div1 and .div2 being placed side-by-side.

The documentation is rather sparse on describing what to expect from iota's core classes, but I assume that all that modifier is supposed to do is make the two .o-grid__col elements the same height, but not affect their children.