SUIT CSS utilities: size
SUIT CSS sizing utilities. Sets width
and flex-basis
.
Read more about SUIT CSS's design principles.
Installation
Available classes
u-sizeFit
- Make an element shrink wrap its content withflex-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+
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 fromtest/test.css
.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...
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 adddisplay: block
likeu-sizeFull
does. Maybe this could be added to the sizing utilities as something likeu-size1of1
?sizeFull breaks flex containers
Hi! I'm using this with the
Grid
component and running into an issue. When I use theGrid--withGutter
modifier, I have to addu-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?
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 au-sizeXofY
that contains a repeating decimal value (e.g. – 33.3333333%, 16.666667%) within thewidth
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?
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.
u-size---- Consistency?
The of the u-sizeXofY utilities set width only...except for the u-sizeFull. It's sets
display
andbox-sizing
.Just curious as to whether
display
andbox-sizing
should be left for base?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 anyu-size*
utility that sets a percentage width is used.Example:
See CodePen
In this example, the first chunk works as intended. But the second example does not; the child
<div>
will always be50%
width.(SUIT CSS is awesome and we love y'all, btw. ❤️)
Add sizeFillAlt
This re-introduces
sizeFillAlt
which usesflex-basis: auto
as opposed to0
insizeFill
. This will hopefully be useful to use alongside theutils-flex
which is nearly done.Added some more tests to demonstrate.
Additionally I added more explicit selectors for applying
flex-basis: auto
tosizeXofY
as the previous catch all selector was effecting thesizeFit/Full
rules.Add flex-basis to support new flexbox grid
These changes support the proposed flexbox grid
Removes float based tools and adds
flex-basis
alongside widthTests: 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.
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
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?