Right now if we run the build, the media query breakpoint classes are not generated, because the index.css file is missing defaults for these parameters. It would be great if SUIT provided default best practice parameters...probably in a separate file suit-media-query-breakpoint-defaults that is imported in index.css. If this is done the parameters can be removed from test/test.css.

I pasted the code below for reference. When should u-sizeFillAlt be used? From reading the docs u-sizeFillAlt looks like a possibly inferior form of u-sizeFill...

/**
 * Make an element fill the remaining space.
 * N.B. This will hide overflow.
 */

.u-sizeFill {
  display: block !important;
  overflow: hidden !important;
  width: auto !important;
}

/**
 * An alternative method to make an element fill the remaining space.
 * N.B. Do not use if child elements might be wider than the remaining space.
 * In Chrome, Safari, and Firefox it results in undesired layout.
 */

.u-sizeFillAlt {
  display: table-cell !important;
  max-width: 100% !important;
  width: 10000px !important;
}

We at Cloud Four are big fans of SUITCSS. We use it as a base for most of our projects. Thank you for providing such a great resource!

One thing I've wanted a few times is a responsive sizing utility for width: 100% that does not also add display: block like u-sizeFull does. Maybe this could be added to the sizing utilities as something like u-size1of1?

Hi! I'm using this with the Grid component and running into an issue. When I use the Grid--withGutter modifier, I have to add u-sizeFull to the container or else it overflows, which is normally fine, but since switching to the flexbox-based grid, u-sizeFull forcibly sets display to block.

Am I doing something wrong or is there a workaround?

From my experience, IE 10 and 11 fail to consistently calculate the appropriate width of a Grid-cell when paired with a u-sizeXofY that contains a repeating decimal value (e.g. – 33.3333333%, 16.666667%) within the width attribute. When it fails to calculate the correct width, Grid-cell's are erroneously bumped/wrapped to the next line.

I've created a CodePen to demonstrate the issue. If you visit the link in IE 10 or 11 and slowly resize the window, the cells will jump around at arbitrary window widths.

Is this a known issue? Is there way to resolve this?

With u-sizeFit and u-sizeFitAlt the "Alt" changes the function of the of the css. However with u-sizeFillAlt the function / purpose stays the same, and the intention seems to be to just make the utility an alternate form.

Seems like Alt should just mean "Alternative" in this case. Same semantics, different implementation.

Also u-sizeFit is more semantic as -sizeFitLeft. u-sizeFitAlt >> u-sizeFitRight.

The of the u-sizeXofY utilities set width only...except for the u-sizeFull. It's sets display and box-sizing.

Just curious as to whether display and box-sizing should be left for base?

We noticed on a recent project that the responsive u-sizeFit utilities don't seem to work when any u-size* utility that sets a percentage width is used.

Example:

<div style="display: flex;">
  <div class="u-sizeFit u-md-size1of2">
    u-sizeFit u-md-size1of2
  </div>
</div>

<div style="display: flex;">
  <div class="u-size1of2 u-md-sizeFit">
    u-size1of2 u-md-sizeFit
  </div>
</div>

See CodePen

In this example, the first chunk works as intended. But the second example does not; the child <div> will always be 50% width.

(SUIT CSS is awesome and we love y'all, btw. ❤️)

This re-introduces sizeFillAlt which uses flex-basis: auto as opposed to 0 in sizeFill. This will hopefully be useful to use alongside the utils-flex which is nearly done.

Added some more tests to demonstrate.

Additionally I added more explicit selectors for applying flex-basis: auto to sizeXofY as the previous catch all selector was effecting the sizeFit/Full rules.

These changes support the proposed flexbox grid

Removes float based tools and adds flex-basis alongside width

Tests: https://dl.dropboxusercontent.com/u/1709558/utils-size/index.html

Expect this to fix #25 and fix #22 as those selectors will no longer exist.

How are the different responsive plugins supposed to be included for usage? https://github.com/suitcss/utils-size#plugins

If lets say 2 versions of the size utility are loaded and applied as in this example

<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom]">
  <div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
  <div class="Grid-cell u-size1of2 u-lg-size4of12"></div>
  <div class="Grid-cell u-size1of3 u-lg-size2of12"></div>
  <div class="Grid-cell u-size1of3"></div>
</div>

are the sizes supposed to be defined in the same file?. Is there an example of a responsive layout using suit grids and suit utils size?