0.1.1 • Published 4 years ago
scss-textures v0.1.1
SCSS Textures
I often use CSS textures to do early prototypes, but I usually wind up hand altering them. Also I tend to use SCSS as a project matures, so I figured I'd macro-ize all the textures I use.
That's what this is, just include the file in your existing SCSS workflow, and go to town.
It's as simple as
npm install --save scss-textures
then in your source file
@import 'node_modules/scss-textures/textures.scss';
Then call some mixins and you are done
No Argument Mixins
These macros do not take any configuration:
- rainbow_burst_background() (Demo)
- ash_background() (Demo)
- mahogony_background() (Demo)
- cherry_background() (Demo)
- ebony_background() (Demo)
The Helper Mixins
There are some helper mixins that are used to make others:
- wood_ish($color, $thickness, $opacity, $appendGrad, $appendSizes)
- cubes_background($colorA, $colorB, $colorC, $scale)
Standard Mixins
The vast majority of the mixins take foreground, background and a scaling factor:
- biohazard_background($color, $background, $scale) (Demo)
- spotty_background($color, $background, $scale) (Demo)
- wavey_background($color, $background, $scale) (Demo)
- big_waves_background($color, $background, $scale) (Demo)
- loose_plaid_background($color, $background, $scale) (Demo)
- tight_plaid_background($color, $background, $scale) (Demo)
- diamond_background($color, $background, $scale) (Demo)
- blueprint_background($color, $background, $scale) (Demo)
- woody_background($color, $background, $scale)
- aquatic_background($color, $background, $scale) (Demo)
- spirals_background($color, $background, $scale) (Demo)
- radial_halftone_background($color, $background, $scale) (Demo)
- couch_background($background, $color, $scale) (Demo)
- triangle_background($color, $background, $scale) (Demo)
- argyle_background($color, $lineColor, $scale) (Demo)
- arches_background($color, $background, $scale) (Demo)
- hex_background($color, $background, $scale) (Demo)
- sloped_background($color, $background, $scale)
- zigzag_background($color, $background, $scale) (Demo)
- dotted_background($color, $background, $scale)
- starry_background($color, $background, $scale) (Demo)
But some take just a color and a scaling factor:
- spikey_background($color, $scale) (Demo)
- vertical_stripes_background($color, $scale) (Demo)
- weave_background($color, $scale) (Demo)
- tartan_background($color, $scale) (Demo)
- cubes_up_background($color, $scale) (Demo)
- cubes_down_background($color, $scale) (Demo)
Testing
TBD
Enjoy,
-Abbey Hawk Sparrow