🏠
Dynamic CSS Live Code!
Dynamic CSS Live Code!
Design 4 Drupal — June 27, 2019
Ceci n’est pas une SLIDE DECK
Just a series of links and images and ideas…
Client Day Planner
Intrinsic Design
truly fluid, meaningful, mixed-approach
Dynamic CSS
styles based on dynamic parameters
AG Grid Nesting Test from OOCSS [permalink / source]
Susy, scribbled out
Please Don’t Use It
2000 | |
---|---|
2001 | |
2002 | |
2003 | |
2004 | |
2005 | |
2006 | |
2007 | |
2008 | |
2009 |
One does not simply “learn” JavaScript
1
2
3
4
5
6
7
8
9
10
name | x value | y value | size == z value |
---|---|---|---|
item-0 | 96 | 88 | 2 |
item-1 | 2 | 88 | 5 |
item-2 | 89 | 86 | 20 |
item-3 | 72 | 97 | 24 |
item-4 | 24 | 8 | 7 |
item-5 | 9 | 34 | 16 |
item-6 | 79 | 45 | 10 |
item-7 | 55 | 83 | 19 |
item-8 | 82 | 68 | 24 |
item-9 | 8 | 11 | 21 |
item-10 | 36 | 76 | 9 |
item-11 | 87 | 99 | 0 |
item-12 | 32 | 42 | 3 |
item-13 | 95 | 45 | 1 |
item-14 | 26 | 31 | 5 |
item-15 | 32 | 57 | 21 |
item-16 | 75 | 88 | 10 |
item-17 | 53 | 69 | 12 |
item-18 | 25 | 23 | 15 |
item-19 | 94 | 37 | 7 |
index | value |
---|---|
0 | 7 |
1 | 15 |
2 | 86 |
3 | 93 |
4 | 8 |
5 | 74 |
6 | 77 |
7 | 39 |
8 | 53 |
9 | 26 |
10 | 28 |
11 | 37 |
12 | 5 |
13 | 4 |
14 | 0 |
Hue is Radial
* {
--complement: calc(var(--h) - 180);
background: hsl(var(--complement), var(--s), var(--l));
}
Lightness is “Clamped”
* {
--threshold: 55;
--contrast: calc((var(--l) - var(--threshold)) * -100%);
color: hsl(var(--h), var(--s), var(--contrast));
}
Complement
Inspired by Facundo Corradini [permalink / source]
Levitated Toy Factory at Beyond Tellerand
Animated sprites from Monster Slayer by Krystal Campioni [permalink / source]
A box with text inside that says ‘InDesign is’ and then has a small + icon to indicate overset text
¯\_(ツ)_/¯ what were you hoping for?
Declarative Syntax
!=
Static Results
CSS is Awesome
Inspired by Stacy Kvernmo [permalink / source]