All Projects → LukyVj → Accecss

LukyVj / Accecss

AcceCSS A Sass Mixin That debug & check the accessibility of your designs

Projects that are alternatives of or similar to Accecss

Juice
Mixins for Life
Stars: ✭ 274 (+107.58%)
Mutual labels:  mixins, scss, sass-mixins
Sassessentials
Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.
Stars: ✭ 167 (+26.52%)
Mutual labels:  mixins, scss, sass-mixins
manila-mixins
A bunch of really cool Sass Mixins
Stars: ✭ 15 (-88.64%)
Mutual labels:  mixins, sass-mixins
ionic-login-component
Free sample of Premium Ionic Login Component
Stars: ✭ 17 (-87.12%)
Mutual labels:  filter, sass-mixins
Mixins
sass mixins
Stars: ✭ 132 (+0%)
Mutual labels:  mixins, scss
Skeleton Sass
Skeleton Sass is a highly modular version of Skeleton CSS
Stars: ✭ 151 (+14.39%)
Mutual labels:  mixins, scss
Browser Hack Sass Mixins
Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
Stars: ✭ 170 (+28.79%)
Mutual labels:  mixins, scss
Sass Deprecate
Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers
Stars: ✭ 265 (+100.76%)
Mutual labels:  scss, sass-mixins
buttono
A flexible Sass mixin for creating BEM-style buttons.
Stars: ✭ 82 (-37.88%)
Mutual labels:  mixins, sass-mixins
Sassmagic
Collection best of Sass mixins and function
Stars: ✭ 795 (+502.27%)
Mutual labels:  scss, sass-mixins
Breakpoint Slicer
Slice media queries with ease
Stars: ✭ 332 (+151.52%)
Mutual labels:  scss, sass-mixins
Sassyfication
💅Library with sass mixins to speed up your css workflow.
Stars: ✭ 51 (-61.36%)
Mutual labels:  scss, sass-mixins
Sass Extras
Useful utilities for working with Sass
Stars: ✭ 179 (+35.61%)
Mutual labels:  scss, sass-mixins
Web Portfolio
Personal portfolio website made with the React
Stars: ✭ 207 (+56.82%)
Mutual labels:  mixins, scss
Css Vars
Sass mixin to use CSS Custom Properties with Sass
Stars: ✭ 164 (+24.24%)
Mutual labels:  scss, sass-mixins
Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (-9.85%)
Mutual labels:  scss, sass-mixins
Bourbon
Bourbon is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.
Stars: ✭ 9,065 (+6767.42%)
Mutual labels:  scss, sass-mixins
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-7.58%)
Mutual labels:  mixins, scss
Holmes
Fast and easy searching inside a page
Stars: ✭ 1,679 (+1171.97%)
Mutual labels:  filter
Ng Pi Admin
Angular admin http://treesflower.com/ng-pi-admin
Stars: ✭ 131 (-0.76%)
Mutual labels:  scss

AcceCSS

A Sass Mixin that debugs & checks the accessibility of your designs

Join the chat at https://gitter.im/LukyVj/accecss

This mixin will allow you to get an overview of all the zones of your layout, get a grayscaled version to check the contrast, as well as 8 different filters to emulate the most common coloblindness types

Simple API

What we can call "The API" is the few parameters you will be able to change or combine to use the AcceCSS mixin, it's composed of 4 paramters so far

@include accecss( false, false , false , false );
                   ^       ^        ^        ^
           selector | css zones | grayscale | colorblind filter

API PARAMETERS

PARAMETER POSSIBLE VALUE
selector You must use quotes ('), ex: '.selector'
CSS Zones Can be true or false
Grayscale Can be true or false
Colorblind filter Any of the filters on the list below, ex: deuteranopia

Browser compatibility

The AcceCSS mixin will work in any major evergreen brother :

  • Google Chrome
  • Safari
  • Mozilla Firefox
  • IE (partial)

For more informations, see Caniuse : SVG filters

How to use it

1 - Download

First, go on Github, and download the accecss.scss file along with the filter.svg

2 - @import

Now, you have to import the mixin into your main stylesheet.

To keep things clear, I recommand using a main.scss file, and import both your styles and accecss mixin into it

@import 'style.scss';
@import 'accecss.scss';

3 - Use it

Once 1 & 2 are done, you're ready to use the mixin, here is how looks an inactive Accecss mixin, note that by default, all the settings are set to false

@include accecss( 
  false,  // ELEMENT       | False
  false,  // CSS ZONE      | False
  false,  // GRAYSCALE     | False
  false   // COLORBLIND    | False
);

Let's say you want to debug your whole document, and, for example, let's say you want to get your elements outlined

@include accecss( 
  'html body',
  true,
  false,
  false
);

To add a grayscaled effect :

@include accecss( 
  'html body',
  false,
  true,
  false
);

And finally, add a blindness color filter :

@include accecss( 
  'html body',
  false,
  false,
  protanopia // You can use all filters listed over
);

You will have to give the proper path to your filter.svg, for this, use the $path-to-filter variable, in the accecss.scss file.

Informations about Colorblindness

This project was born essentially because of this article :

Designing For (and With) Color Blindness

After some researches I discovered this information :

Colour (color) blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain this means that there are approximately 2.7 million colour blind people (about 4.5% of the entire population), most of whom are male.

Thank you

  • A big thank you to @dervondenbergen for his precious help, and his advices.
  • Thank you to @bullgit for being awesome and provide me priceless feedbacks.
  • A huge thank you to thecatapi.com, for the awesome.. Cat API!

Question ?

For any further informations, feel free to ping me on twitter : @LukyVj

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].