Usage

Because we are using pseudo-elements (:after) to create filter effects, you must apply these filters on a containing element (i.e. not a content-block like <img>. The recommendation is to wrap your images in a <figure> tag. Read more about the figure tag here.

There are currently 2 ways to consume this library.

Use Sass @extends

1. Download the /scss folder contents
2. Include scss/cssgram.scss or any individual file (i.e. scss/aden.scss) into your Sass manifest
3. Extend the silent placeholder selector @extend %aden; in your element.

For example:

      <!-- HTML -->
      <figure class="viz--beautiful">
        <img src="../img.png" alt="">
      </figure>
    

      // Sass
      .viz--beautiful {
        @extend %aden;
      }
    

Use CSS classes

1. Download the CSSgram Library
2. Link to the cssgram library: <link rel="stylesheet" href="css/vendor/cssgram.min.css"> or any individual css file (i.e. <link rel="stylesheet" href="css/vendor/aden.min.css">)
3. Add a class to your image element with the name of the filter you would like to use

For example:

      <!-- HTML -->
      <figure class="aden">
        <img src="../img.png" alt="">
      </figure>