├── README.md
├── _mixins.styl
└── _mixins.scss


/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 |                                  ____
 3 |       ()                        (|   \
 4 |       /\  __   __ _|__|_  ,      |    | __    _   _
 5 |      /  \/    /  \_|  |  / \_   _|    |/  \_|/ \_|/
 6 |     /(__/\___/\__/ |_/|_/ \/   (/\___/ \__/ |__/ |__/
 7 |                                            /|
 8 |                                            \|
 9 |      ,__ __
10 |     /|  |  |  o       o
11 |      |  |  |              _  _    ,
12 |      |  |  |  |  /\/  |  / |/ |  / \_
13 |      |  |  |_/|_/ /\_/|_/  |  |_/ \/
14 | 
15 | 
16 | 
17 | ## v0.4
18 | 
19 | Now includes some Stylus stuff that I use a lot too!


--------------------------------------------------------------------------------
/_mixins.styl:
--------------------------------------------------------------------------------
 1 | /* Scott's Dope Mixins v0.4*/
 2 | 
 3 | 
 4 | // Objects 
 5 | 
 6 | z = {
 7 |     neg: -7,
 8 |     lowest: 1,
 9 |     low: 4,
10 |     mid: 5,
11 |     video: 7,
12 |     header: 8,
13 |     nav: 9,
14 |     modal: 10,
15 |     highest: 11
16 | }
17 | 
18 | social = {
19 |     twitter: #00aced,
20 |     facebook: #3b5998,
21 |     google: #dd4b39,
22 |     youtube: #bb0000
23 | }
24 | 
25 | 
26 | // Material Shadows
27 | shadow-level(l = 1)
28 |     if l == -1
29 |         box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
30 |     if l == 0
31 |         box-shadow: none;
32 |     if l == 1
33 |         box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
34 |     if l == 2
35 |         box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
36 |     if l == 3
37 |         box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
38 |     if l == 4
39 |         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
40 |     if l == 5
41 |         box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
42 | 
43 | // Common Transition
44 | trans($sec = 0.3s)
45 |     transition: all $sec ease
46 | 
47 | 
48 | /* Removes margin and padding and list style from lists */
49 | noList()
50 |     padding: 0
51 |     margin: 0
52 |     li
53 |         padding: 0
54 |         margin: 0
55 |         list-style: none
56 | 
57 | /* Lightens background color on hover */
58 | hovLight($color)
59 |     background: $color
60 |     &:hover
61 |         background: $color + 30
62 | 
63 | /* Darkens background color on hover */
64 | hovDark($color)
65 |     background: $color
66 |     &:hover
67 |         background: $color - 30
68 | 
69 | 
70 | /* A re-useable font mixin for whatever fonts you are using, allows for an optional color argument */
71 | serif($size)
72 |     font-family: 'Libre Baskerville', serif


--------------------------------------------------------------------------------
/_mixins.scss:
--------------------------------------------------------------------------------
 1 | /* Scott's Dope Mixins v0.4*/
 2 | 
 3 | 
 4 | /* A less configurable but more areodynamic transition mixin */
 5 | @mixin trans($sec: 0.2s) {
 6 |   -webkit-transition: all $sec ease-out;
 7 |      -moz-transition: all $sec ease-out;
 8 |       -ms-transition: all $sec ease-out;
 9 |        -o-transition: all $sec ease-out;
10 |           transition: all $sec ease-out;
11 | }
12 | 
13 | /* Removes margin and padding and list style from lists */
14 | @mixin noList {
15 |   padding: 0;
16 |   margin: 0;
17 |   li {
18 |     padding: 0;
19 |     margin: 0;
20 |     list-style: none;
21 |   }
22 | }
23 | 
24 | /* Lightens background color on hover */
25 | @mixin hovLight ($color) {
26 |     background: $color;
27 |     &:hover {
28 |         background: $color + 30;
29 |     }
30 | }
31 | 
32 | /* Darkens background color on hover */
33 | @mixin hovDark ($color) {
34 |     background: $color;
35 |     &:hover {
36 |         background: $color - 30;
37 |     }
38 | }
39 | 
40 | 
41 | /* A re-useable font mixin for whatever fonts you are using, allows for an optional color argument */
42 | @mixin serif($size, $color:"") {
43 |     color: $color;
44 |     font: italic normal $size 'Droid Serif';
45 | }
46 | 
47 | /* Cross browser opacity */
48 | @mixin opacity($opacity) {
49 |   opacity: $opacity;
50 |   $opacity-ie: $opacity * 100;
51 |   filter: alpha(opacity=$opacity-ie); //IE8
52 | }
53 | 
54 | 
55 | 
56 | /* REMS with a PX Fallback */
57 | @function calculateRem($size) {
58 |   $remSize: $size / 16px;
59 |   @return $remSize * 1rem;
60 | }
61 | 
62 | @mixin font-size($size) {
63 |   font-size: $size;
64 |   font-size: calculateRem($size);
65 | }
66 | 
67 | 
68 | 
69 | /* REQUIRES COMPASS */
70 | 
71 | /* Faster gradients, if a stop is not specified a -20 of the start
72 | is assigned for you this may be adjustable in the near future */
73 | @mixin gradient($start, $stop:false) {
74 |     @if $stop {
75 |         @include background-image(linear-gradient($start, $stop));
76 |     } @else {
77 |         @include background-image(linear-gradient($start, $start - 20));
78 |     }
79 | 
80 | }


--------------------------------------------------------------------------------