sass-shady

Shady

🌒 Customizable vignettes for your images

1. Install
2. Usage
3. Mixin
4. Options
5. Presets
6. Build

Install

npm install --save sass-shady

Usage

Shady is intended to be used as a semantic mixin on media containers. It works by wrapping the media with a pseudo-element that holds the vignette as a CSS3 Gradient. The markup needed should look somewhat like this (semantics and class-names are up to you):

<!--The image-container will have position:relative applied to it and work as an achor for vignette-->
<figure class="vignette-container">
  <img src="img/test.jpg" alt="Test Image">
  <!-- The caption will be staying readable no matter what when positioned ontop of the vignette-->
  <figcaption class="vignette-caption">
    <p>Shady Test Caption</p>
  </figcaption>
</figure>

Mixin

 
// Basic example 
// This will apply the vignette referenced as "bottom" in $shady-presets 
.vignette-container {
  @include shady("bottom");
}
 
// Default vignette 
// This will apply the vignette defined 
.vignette-container {
  @include shady;
}
 
// Custom vignette 
// You can apply custom vignettes that are not defined in a preset by using @content and passing "custom" to the mixin 
.vignette-container {
  @include shady("custom") {
    background: linear-gradient(from top, red 0%, green 100%);
  }
 
// Custom properties 
// You can apply other css-value to the vignette directly by passing them as @content 
.vignette-container {
  @include shady("bottom") {
    mix-blend-mode: multiply;
  }
}

Options

/// Color used in the default presets 
/// @property {String} 
$shady-preset-color: #000f14;
 
/// Available presets 
/// @property {Map} 
$shady-presets: 
  (
    "bottom": $shady-bottom,
    "bottomTop": $shady-bottomTop,
    "full": $shady-full,
    "top": $shady-top,
  );
 
/// Default preset 
/// @property {String} 
$shady-default-preset: "bottom";
 
/// Shady can expose each preset as a class 
/// By default, the class will be named: .shady--{preset} 
/// @property {Boolean} 
$shady-expose: false;

Presets

The default presets are defined in ./scss/shady/_presets. They are gradients bound to variables grouped under the $shady-preset namespace. You can supply your own presets by specifying them in the mentioned file or before shady is imported.

// Sample preset 
$shady-preset-dracula: linear-gradient(to top, red 0%, white 100%);

Default Presets:

• bottom: Bottom shaded
• bottomTop: Bottom & Top shaded
• full: Fully shaded
• top: Top Shaded

Build:

You can develop shady locally by using the supplied gulpfile and the test-folder. You can build a sassdoc-reference for this repository by running gulp sassdoc.