- objects are the cookie cutter, instances are the cookies
- navigation blindness
- separtation anxiety
- cogntive dissonance
- relearn
- shapeshift
- high-integrity modal => trustworthy
- intentional
- conservative
- research-based
π£
- earmark
box-shadowextends outside box, could compose withborder-left-noneorborder-left-transparent - earmark
insetbox-shadowinside box, could compose withborder-left-nonere:border-widthorborder-style - earmark
borderworks nicely if borders all around match color - earmark
border-imagedoesn't quite work as is because it cancels all the borders
- 24 ppl in css is a problem
- rebasing is really scary
- ppl will develop a resistance
- ux acceleration
- emerging patterns
- retrofit to implementations
- design system team reviews features
- dev ad, designs , content s, dev, des
- web components
- organized
- functional
- stimulae
- meaning
- scalabae
- systems
- challenges
- create and implement
- maintenance
- inventory
- JavaScript
- preprocessors
- nesting hard to refactor
- caution with outline
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .left-align { text-align: left } | |
| .right-align { text-align: right } | |
| .center-align { text-align: center } | |
| .start-align { text-align: initial; text-align: start } | |
| .end-align { text-align: end } | |
| .align-baseline { vertical-align: baseline } | |
| .align-top { vertical-align: top } | |
| .align-bottom { vertical-align: bottom } | |
| .align-middle { vertical-align: middle } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (orientation: portrait) { | |
| .width-vmax { width: 100vh } | |
| .width-vmin { width: 100vw } | |
| .height-vmax { height: 100vh } | |
| .height-vmin { height: 100vw } | |
| } | |
| @media (orientation: landscape) { | |
| .width-vmax { width: 100vw } | |
| .width-vmin { width: 100vh } |