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