CSS sizing utilities

  • By null
  • Last update: Dec 20, 2021
  • Comments: 11

SUIT CSS utilities: size

Build Status

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+

Github

https://github.com/suitcss/utils-size

Comments(11)

  • 1

    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.

  • 2

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

    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?

  • 4

    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?

  • 5

    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?

  • 6

    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.

  • 7

    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?

  • 8

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

  • 9

    Add sizeFillAlt

    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.

    screen shot 2015-11-15 at 15 27 14

    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.

  • 10

    Add flex-basis to support new flexbox grid

    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.

  • 11

    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?