sass-planifolia

commit

c888e73217c7698b8e04fba47313bfe5713fd79c

parent

e07a442d3e17660391c49e734938159189efc9a1

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-05-03 22:21

adapt README

Diffstat

1 files changed, 20 insertions, 34 deletions

diff --git a/README.md b/README.md

@@ -1,25 +1,16 @@
    1     1 Sass-Planifolia - Vanilla Sass helper functions
    2     2 
    3    -1 [Compass](http://compass-style.org/) was great, but it has been unmaintained
    4    -1 for a while now. In addition, the rise of
    5    -1 [libSass](http://sass-lang.com/libsass) means that ruby extensions are no
    6    -1 longer a good way forward.
   -1     3 This is a collection of vanilla Sass helper functions, mostly centered around
   -1     4 colors. It currently consists of only two modules:
    7     5 
    8    -1 Planifolia is a collection of commonly used helper functions.  It does not
    9    -1 depend on a specific implementation of the Sass compiler.
   10    -1 
   11    -1 The following modules are included:
   12    -1 
   13    -1 -   **math** for high performance math functions
   14     6 -   **contrast** for WCAG compatible [color
   15     7     contrast](https://www.w3.org/TR/WCAG20/#contrast-ratiodef) functions
   16    -1 -   **color** for CIELAB/CIELUV based color functions (with support for
   17    -1     [HSLuv](http://www.hsluv.org/))
   -1     8 -   **color** for color functions with supper for different color spaces, e.g.
   -1     9     CIELAB, CIELUV, or [HSLuv](http://www.hsluv.org/)
   18    10 
   19    -1 These modules can be imported individually (color depends on math though).
   20    -1 Also note that these modules will only define mixins and variables. They will
   21    -1 not output any CSS. This means that importing them does not add a single byte
   22    -1 to your CSS.
   -1    11 These modules can be imported individually. The only define mixins and
   -1    12 variables. They will not output any CSS. This means that importing them does
   -1    13 not add a single byte to your CSS.
   23    14 
   24    15 See the [full documentation](https://xi.github.io/sass-planifolia/) for more
   25    16 details.
@@ -31,24 +22,20 @@ details.
   31    22 Import it in your Sass files:
   32    23 
   33    24 ```scss
   34    -1 @import "node_modules/sass-planifolia/sass/math";
   35    -1 @import "node_modules/sass-planifolia/sass/contrast";
   36    -1 @import "node_modules/sass-planifolia/sass/color";
   -1    25 @use "node_modules/sass-planifolia/sass/contrast";
   -1    26 @use "node_modules/sass-planifolia/sass/color";
   37    27 
   38    28 .test {
   39    29     background-color: red;
   40    30 
   41    31     // pick between two colors (default: black and white) to get good contrast
   42    -1     color: contrast-color(red);
   -1    32     color: contrast.color(red);
   43    33 
   44    34     // mix orange with black or white to get good contrast to red
   45    -1     border-color: contrast-stretch(red, orange);
   -1    35     border-color: contrast.stretch(red, orange);
   46    36 
   47    37     // mix red with black in a perceptually uniform color space
   48    -1     box-shadow: 0 0 1em pf-shade(red, 0.5, 'lab');
   49    -1 
   50    -1     // calculate modular scale dynamically
   51    -1     font-size: 16px * pow(1.5, 2);
   -1    38     box-shadow: 0 0 1em color.shade(red, 0.5, 'lab');
   52    39 }
   53    40 ```
   54    41 
@@ -61,12 +48,11 @@ Import it in your Sass files:
   61    48 
   62    49 # Similar libraries
   63    50 
   64    -1 -   [mathsass](https://github.com/terkel/mathsass) is another very good
   65    -1     pure-sass math implementation.
   66    -1 -   [accoutrement-color](https://github.com/oddbird/accoutrement-color) and
   67    -1     [bourbon](https://github.com/thoughtbot/bourbon) also contain
   68    -1     WCAG-appropriate color-contrast functions, but they ignore
   69    -1     alpha-transparency.
   70    -1 -   [eyeglass-math](https://github.com/sass-eyeglass/eyeglass-math) and
   71    -1     [chromatic-sass](https://github.com/bugsnag/chromatic-sass) also do
   72    -1     advanced math/color manipulation, but they can only be used with node-sass.
   -1    51 -   [CSS Color Moudle Level 4](https://www.w3.org/TR/css-color-4/) and [CSS
   -1    52     Color Module Level 5](https://www.w3.org/TR/css-color-5/) are W3C Working
   -1    53     Drafts (as of 2022-04-28) that would add similar features to CSS itself.
   -1    54 -   [PostCSS](https://postcss.org/) and [Parcel](https://github.com/parcel-bundler/parcel-css) both
   -1    55     implement some of the functionality of CSS Color Module Level 4/5.
   -1    56 -   [oddbird/blend](https://github.com/oddbird/blend) is yet another Sass
   -1    57     library that implements similar features. The main difference is that the
   -1    58     contrast function do not take transparency into account.