View earmark.md
View notes.md
  • 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
View notes.md
  • organized
  • functional
  • stimulae
  • meaning
  • scalabae
  • systems
  • challenges
  • create and implement
  • maintenance
  • inventory
View css-barriers.md
  • JavaScript
  • preprocessors
  • nesting hard to refactor
  • caution with outline
View align.css
.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 }
View playbook.md

CSS refactor playbook

  1. Class all selectors
  2. Flatten all selectors
  3. Decouple layout rules from component rules
  4. Abstract repetition into patterns that favor composition
View fallback.css
@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 }
View span.html
<span class="modal-dialog-title-close" role="button" tabindex="0" aria-label="Close"></span>