Skip to content

Releases: una/CSSgram

Stinson

11 Nov 23:49
@una una
Compare
Choose a tag to compare

Thank you to @LadyCarni and #251, we now have STINSON!

Maven!

03 Nov 03:48
@una una
Compare
Choose a tag to compare

New filter (Maven) thanks to @LadyCarni and #252

screen shot 2016-11-02 at 11 45 24 pm
screen shot 2016-11-02 at 11 45 33 pm

Additional updates:

  • template update in /test/
  • updated Gingham filter

screen shot 2016-11-02 at 11 45 58 pm

Kelvin -- Feel the Image Burn

06 Oct 02:57
@una una
Compare
Choose a tag to compare

Another fantastic filter by @Praseetha-KR! #210

kelvin_filter_comparison

Valencia!

03 Oct 05:15
@una una
Compare
Choose a tag to compare

Thanks to the awesome work of @Praseetha-KR we have the Valencia filter!!

valencia_filter_comparison

Brannan!

28 Sep 01:30
@una una
Compare
Choose a tag to compare

Brannan filter now available to all!

(could probably use some touchups though :) )

screen shot 2016-09-27 at 9 32 02 pm
screen shot 2016-09-27 at 9 32 11 pm

Mixins! Mixins! Everywhere!

11 Mar 05:39
@una una
Compare
Choose a tag to compare

You can now use Sass mixins to @include filters!!

Shoutout to @bunomonteiro on #156

Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

To use:

  1. Download the /scss folder contents
  2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
  3. Include the mixin @include aden() in your element.

For example:

<figure class="viz--beautiful">
  <img src="../img.png">
</figure>
// Sass
.viz--beautiful {
  @include aden()
}

As mentioned above, you can also add additional filters as arguments when using the library with mixins:

// Sass
.viz--beautiful {
  @include @include aden(blur(2px) /*...*/);
}

Available Mixins:

  • 1977: @include _1977();
  • Aden: @include aden();
  • Brooklyn: @include brooklyn();
  • Clarendon: @include clarendon();
  • Earlybird: @include earlybird();
  • Gingham: @include gingham();
  • Hudson: @include hudson();
  • Inkwell: @include inkwell();
  • Lark: @include lark();
  • Lo-Fi: @include lofi();
  • Mayfair: @include mayfair();
  • Moon: @include moon();
  • Nashville: @include nashville();
  • Perpetua: @include perpetua();
  • Reyes: @include reyes();
  • Rise: @include rise();
  • Slumber: @include slumber();
  • Toaster: @include toaster();
  • Walden: @include walden();
  • Willow: @include willow();
  • X-pro II: @include xpro2();

Slumber

28 Jan 15:35
@una una
Compare
Choose a tag to compare

Slumber is added!

screen shot 2016-01-28 at 9 34 51 am

Rise!

27 Jan 22:28
@una una
Compare
Choose a tag to compare

✨ New Filter Alert -- Rise ✨

screen shot 2016-01-27 at 4 27 35 pm

screen shot 2016-01-27 at 4 27 42 pm

Clarendon and Willow!

19 Dec 05:42
@una una
Compare
Choose a tag to compare

Two new filters for the family!

Moon & Clarendon

30 Nov 16:09
@una una
Compare
Choose a tag to compare

New Filters Added!