UNPKG

sassyons

Version:

Inspired by Tachyons

github.com/qodesmith/sassyons

qodesmith/sassyons

61 lines (52 loc) • 6.96 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# Shades You can achieve shades of black or white for any multiple of 5 between 5 - 95: * Example = the `bg-white-20` class name will produce `background-color: #333` * Example = the `black-45` class name will produce `color: #8c8c8c` ## Black Shades - color The below styles also apply for background colors. You would simply append the class name with `bg-`, such as `bg-black-55`. | Class | Properties | Color Example | | ----- | ---------- | :-----------: | | black-5 | #f2f2f2 | ![f2f2f2](https://placehold.it/20/f2f2f2?text=+)![f2f2f2](https://placehold.it/20/f2f2f2?text=+)![f2f2f2](https://placehold.it/20/f2f2f2?text=+) | | black-10 | #e6e6e6 | ![e6e6e6](https://placehold.it/20/e6e6e6?text=+)![e6e6e6](https://placehold.it/20/e6e6e6?text=+)![e6e6e6](https://placehold.it/20/e6e6e6?text=+) | | black-15 | #d9d9d9 | ![d9d9d9](https://placehold.it/20/d9d9d9?text=+)![d9d9d9](https://placehold.it/20/d9d9d9?text=+)![d9d9d9](https://placehold.it/20/d9d9d9?text=+) | | black-20 | #ccc | ![ccc](https://placehold.it/20/ccc?text=+)![ccc](https://placehold.it/20/ccc?text=+)![ccc](https://placehold.it/20/ccc?text=+) | | black-25 | #bfbfbf | ![bfbfbf](https://placehold.it/20/bfbfbf?text=+)![bfbfbf](https://placehold.it/20/bfbfbf?text=+)![bfbfbf](https://placehold.it/20/bfbfbf?text=+) | | black-30 | #b3b3b3 | ![b3b3b3](https://placehold.it/20/b3b3b3?text=+)![b3b3b3](https://placehold.it/20/b3b3b3?text=+)![b3b3b3](https://placehold.it/20/b3b3b3?text=+) | | black-35 | #a6a6a6 | ![a6a6a6](https://placehold.it/20/a6a6a6?text=+)![a6a6a6](https://placehold.it/20/a6a6a6?text=+)![a6a6a6](https://placehold.it/20/a6a6a6?text=+) | | black-40 | #999 | ![999](https://placehold.it/20/999?text=+)![999](https://placehold.it/20/999?text=+)![999](https://placehold.it/20/999?text=+) | | black-45 | #8c8c8c | ![8c8c8c](https://placehold.it/20/8c8c8c?text=+)![8c8c8c](https://placehold.it/20/8c8c8c?text=+)![8c8c8c](https://placehold.it/20/8c8c8c?text=+) | | black-50 | #808080 | ![808080](https://placehold.it/20/808080?text=+)![808080](https://placehold.it/20/808080?text=+)![808080](https://placehold.it/20/808080?text=+) | | black-55 | #737373 | ![737373](https://placehold.it/20/737373?text=+)![737373](https://placehold.it/20/737373?text=+)![737373](https://placehold.it/20/737373?text=+) | | black-60 | #666 | ![666](https://placehold.it/20/666?text=+)![666](https://placehold.it/20/666?text=+)![666](https://placehold.it/20/666?text=+) | | black-65 | #595959 | ![595959](https://placehold.it/20/595959?text=+)![595959](https://placehold.it/20/595959?text=+)![595959](https://placehold.it/20/595959?text=+) | | black-70 | #4d4d4d | ![4d4d4d](https://placehold.it/20/4d4d4d?text=+)![4d4d4d](https://placehold.it/20/4d4d4d?text=+)![4d4d4d](https://placehold.it/20/4d4d4d?text=+) | | black-75 | #404040 | ![404040](https://placehold.it/20/404040?text=+)![404040](https://placehold.it/20/404040?text=+)![404040](https://placehold.it/20/404040?text=+) | | black-80 | #333 | ![333](https://placehold.it/20/333?text=+)![333](https://placehold.it/20/333?text=+)![333](https://placehold.it/20/333?text=+) | | black-85 | #262626 | ![262626](https://placehold.it/20/262626?text=+)![262626](https://placehold.it/20/262626?text=+)![262626](https://placehold.it/20/262626?text=+) | | black-90 | #1a1a1a | ![1a1a1a](https://placehold.it/20/1a1a1a?text=+)![1a1a1a](https://placehold.it/20/1a1a1a?text=+)![1a1a1a](https://placehold.it/20/1a1a1a?text=+) | | black-95 | #0d0d0d | ![0d0d0d](https://placehold.it/20/0d0d0d?text=+)![0d0d0d](https://placehold.it/20/0d0d0d?text=+)![0d0d0d](https://placehold.it/20/0d0d0d?text=+) | ## White Shades The below styles also apply for background colors. You would simply append the class name with `bg-`, such as `bg-white-55`. | Class | Properties | Color Example | | ----- | ---------- | :-----------: | | white-5 | #0d0d0d | ![0d0d0d](http://placehold.it/20/0d0d0d?text=+)![0d0d0d](http://placehold.it/20/0d0d0d?text=+)![0d0d0d](http://placehold.it/20/0d0d0d?text=+) | | white-10 | #1a1a1a | ![1a1a1a](http://placehold.it/20/1a1a1a?text=+)![1a1a1a](http://placehold.it/20/1a1a1a?text=+)![1a1a1a](http://placehold.it/20/1a1a1a?text=+) | | white-15 | #262626 | ![262626](http://placehold.it/20/262626?text=+)![262626](http://placehold.it/20/262626?text=+)![262626](http://placehold.it/20/262626?text=+) | | white-20 | #333 | ![333](http://placehold.it/20/333?text=+)![333](http://placehold.it/20/333?text=+)![333](http://placehold.it/20/333?text=+) | | white-25 | #404040 | ![404040](http://placehold.it/20/404040?text=+)![404040](http://placehold.it/20/404040?text=+)![404040](http://placehold.it/20/404040?text=+) | | white-30 | #4d4d4d | ![4d4d4d](http://placehold.it/20/4d4d4d?text=+)![4d4d4d](http://placehold.it/20/4d4d4d?text=+)![4d4d4d](http://placehold.it/20/4d4d4d?text=+) | | white-35 | #595959 | ![595959](http://placehold.it/20/595959?text=+)![595959](http://placehold.it/20/595959?text=+)![595959](http://placehold.it/20/595959?text=+) | | white-40 | #666 | ![666](http://placehold.it/20/666?text=+)![666](http://placehold.it/20/666?text=+)![666](http://placehold.it/20/666?text=+) | | white-45 | #737373 | ![737373](http://placehold.it/20/737373?text=+)![737373](http://placehold.it/20/737373?text=+)![737373](http://placehold.it/20/737373?text=+) | | white-50 | #808080 | ![808080](http://placehold.it/20/808080?text=+)![808080](http://placehold.it/20/808080?text=+)![808080](http://placehold.it/20/808080?text=+) | | white-55 | #8c8c8c | ![8c8c8c](http://placehold.it/20/8c8c8c?text=+)![8c8c8c](http://placehold.it/20/8c8c8c?text=+)![8c8c8c](http://placehold.it/20/8c8c8c?text=+) | | white-60 | #999 | ![999](http://placehold.it/20/999?text=+)![999](http://placehold.it/20/999?text=+)![999](http://placehold.it/20/999?text=+) | | white-65 | #a6a6a6 | ![a6a6a6](http://placehold.it/20/a6a6a6?text=+)![a6a6a6](http://placehold.it/20/a6a6a6?text=+)![a6a6a6](http://placehold.it/20/a6a6a6?text=+) | | white-70 | #b3b3b3 | ![b3b3b3](http://placehold.it/20/b3b3b3?text=+)![b3b3b3](http://placehold.it/20/b3b3b3?text=+)![b3b3b3](http://placehold.it/20/b3b3b3?text=+) | | white-75 | #bfbfbf | ![bfbfbf](http://placehold.it/20/bfbfbf?text=+)![bfbfbf](http://placehold.it/20/bfbfbf?text=+)![bfbfbf](http://placehold.it/20/bfbfbf?text=+) | | white-80 | #ccc | ![ccc](http://placehold.it/20/ccc?text=+)![ccc](http://placehold.it/20/ccc?text=+)![ccc](http://placehold.it/20/ccc?text=+) | | white-85 | #d9d9d9 | ![d9d9d9](http://placehold.it/20/d9d9d9?text=+)![d9d9d9](http://placehold.it/20/d9d9d9?text=+)![d9d9d9](http://placehold.it/20/d9d9d9?text=+) | | white-90 | #e6e6e6 | ![e6e6e6](http://placehold.it/20/e6e6e6?text=+)![e6e6e6](http://placehold.it/20/e6e6e6?text=+)![e6e6e6](http://placehold.it/20/e6e6e6?text=+) | | white-95 | #f2f2f2 | ![f2f2f2](http://placehold.it/20/f2f2f2?text=+)![f2f2f2](http://placehold.it/20/f2f2f2?text=+)![f2f2f2](http://placehold.it/20/f2f2f2?text=+) | </table> See also [Colors](./colors.md)