tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.
There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.
Here are official'ish documents to outline the developer community's desires.
| /* | |
| * This script will download a package (and all of its dependencies) from the | |
| * online NPM registry, then create a gzip'd tarball containing that package | |
| * and all of its dependencies. This archive can then be copied to a machine | |
| * without internet access and installed using npm. | |
| * | |
| * The idea is pretty simple: | |
| * - npm install [package] | |
| * - rewrite [package]/package.json to copy dependencies to bundleDependencies | |
| * - npm pack [package] |
| // | |
| // _oo0oo_ | |
| // o8888888o | |
| // 88" . "88 | |
| // (| -_- |) | |
| // 0\ = /0 | |
| // ___/`---'\___ | |
| // .' \\| |// '. | |
| // / \\||| : |||// \ | |
| // / _||||| -:- |||||- \ |
Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.
This script currently lacks the support for alpha-transparency that Lea supports in her script though.
In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.
Normal usage: `color: pick_best_color(#f00
