🏠
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 | 63 | 77 | 2 |
item-1 | 45 | 48 | 16 |
item-2 | 86 | 44 | 0 |
item-3 | 93 | 0 | 12 |
item-4 | 31 | 85 | 0 |
item-5 | 97 | 8 | 10 |
item-6 | 27 | 52 | 19 |
item-7 | 50 | 47 | 10 |
item-8 | 40 | 78 | 5 |
item-9 | 46 | 42 | 8 |
item-10 | 62 | 35 | 14 |
item-11 | 99 | 43 | 17 |
item-12 | 43 | 35 | 11 |
item-13 | 88 | 32 | 5 |
item-14 | 83 | 91 | 11 |
item-15 | 20 | 84 | 7 |
item-16 | 67 | 33 | 1 |
item-17 | 62 | 18 | 19 |
item-18 | 52 | 92 | 12 |
item-19 | 14 | 4 | 5 |
index | value |
---|---|
0 | 11 |
1 | 5 |
2 | 1 |
3 | 53 |
4 | 96 |
5 | 7 |
6 | 4 |
7 | 17 |
8 | 90 |
9 | 59 |
10 | 71 |
11 | 16 |
12 | 71 |
13 | 73 |
14 | 34 |
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]