CSS framework about spect

[dy]

?mb call it mods.css?

• mods ~ tachyons

! fontions, typions, spacions, stylions

[dy]

! figma/google-fonts pairings & theme basics

• good font pairing is not necessary sans/serif. Meaningful font-set is display, handwriting, monospace, paragraph (serif/sans).

[dy]

! CSS allow special characters like :./@ etc.
This way special utility classes can be added:

<a class="black hover:red visited:black">
<i class="ml-1.5">
<main class="s:col-1 m:col-1/2 l:col-1/3">

That can be handled with spect perfectly. Although that'd require big initial table of all tachyons to register bunch of mods.

[dy]

!do values as natural semicolon: <div class="radius:2 color:#aaa"></div>

!mb narrow breakpoints to sizes only: s:1 m:1/2 l:1/4

[dy]

!property-modifiers(filters) as radius:4|tl, border:2|t|solid or something similar

[dy]

! custom selectors in classes <div class="next-child:class-props"></div>
! pseudos in classes <div class="after:b-3"></div>

[dy]

! w:100%, w:50% omg obvious
! a better media-queries gate: w-100%@s

[dy]

Typographic scale generators: https://www.gridlover.net/try, https://archetypeapp.com/#, https://type-scale.com/

[dy]

!units in css-rules: w-120px, default fallback w-3 is 8px grid, w-3 === 24px
!change 8px-grid size via root variables --step: 8px and calc the rest
!no need to define too many variants or redefine base: just add corresponding tachyon to fast-edit.

[dy]

• font-less props are still useful: bold, italic - no need to specify.

[dy]

See maya