suitcss / utils-size

CSS sizing utilities

SUIT CSS utilities: size

SUIT CSS sizing utilities. Sets width and flex-basis.

Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-utils-size
• Download: zip

Available classes

• u-sizeFit - Make an element shrink wrap its content with flex-basis.
• u-sizeFull - Make an element the width of its parent.
• u-sizeFill - Make an element fill the remaining space. Distribute space evenly on multiple elements.
• u-sizeFillAlt - An alternative method to make an element fill the remaining space. Distribute space based on element width.
• u-sizeXofY (numerous) - Specify the proportional width of an object.

X must be an integer less than Y.

Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

Plugins

Utilities that can be limited to specific Media Query breakpoints.

• u-sm-sizeXofY - To use at the smallest Media Query breakpoint.
• u-md-sizeXofY - To use at the medium Media Query breakpoint.
• u-lg-sizeXofY - To use at the largest Media Query breakpoint.

Configuration

There are 3 Media Query breakpoints:

• --sm-viewport
• --md-viewport
• --lg-viewport

When using postcss-custom-media, breakpoints can be configured using @custom-media. For example:

@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Usage

Please refer to the README for SUIT CSS utils

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

To lint code with postcss-bem-linter and stylelint

npm run lint

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support

Refer to the caniuse page for flexbox. This package can still be used in older browsers if width is required

• Google Chrome (latest)
• Opera (latest)
• Firefox 28+
• Safari 6.1+
• Internet Explorer 10+

utils-size's Issues

rename to 'utils-size'

Makes more sense.

Rename media query selectors

Add utility for width: 100%

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?

Default Media Query Breakpoints

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.

Including responsive plugins

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?

Add `files` to package.json

Consider using `calc()`

Makes the maths clearer and will generated lots of decimal places to help improve precision. The builder will calculate the value and substitute it.

width: calc(100% * 5 / 6);

u-size---- Consistency?

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?

The `test/test.css` file has the wrong path for index.css

The path should be ../index.css. Are these projects still alive?

What's the purpose of u-sizeFillAlt?

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;
}

Add npm support

Size zero of X (u-sm-size0of12)

I'd love to have a class for hiding elements completely at certain viewports, with the same syntax of the sizing utils, like:

.u-sm-size0of12 {
    display: none;
}

or

.u-sm-hidden {
    display: none;
}

My main use case is working with components-grid, where I want to hide a .Grid-cell at a certain viewport width. There are certainly other ways of doing this, but having it as part of the suit sizing utils would make it much easier to reason about.

There might be some overlap in use cases here with suit-utils-display, but suit-utils-display doesn't have a media query plugin the way utils-size does.

Happy to submit a pull request if it'd be helpful.

Add build tools

u-*-sizeFit always overridden by percentage size utilities

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. ❤️)

Use suit-components-test

Temporarily remove MQ files from component.json

Component(1) has no good way to support this use case; needs tooling. Therefore, this is blocked by: suitcss/suit#51

Perhaps `u-sizeFull` should use `box-sizing`

Since it makes an element the width of its parent, it might be better to use box-sizing here so that it holds true even when the element has border and padding.

Fix documentation of `sizeXofY`

3-part grid is also supported but missing from docs

Sizes using calc with trailing decimals cause Grid-cell's to wrap in Internet Explorer 10 & 11

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?

Remove CSSLint

Fix `sizeXof9`

There are some stray 9-part grid utilities. These should either be removed or the missing utilities added.

u-sizeFitLeft and u-sizeFitRight?

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.

sizeFull breaks flex containers

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?

Add responsive plugins

Add plugins for sizing at 2 additional breakpoints.

Add `!important` to widths

Add !important where necessary to ensure the utility class's styles are always applied.