Design

[nichoth]

design

• I like this modal window

---

• Making CRDTs 98% More Efficient -- I like the fonts here.

  • headings -- Peachi
  • body -- Rumiko

• set.studio — "we make stunning websites"

• Every Layout — Learn to write better, resilient CSS

[nichoth]

CSS

css framworks

• picocss

grid

• CSS subgrid
• use CSS grid for masonry style
• CSS Grid. One layout method not the only layout method — Rachel Andrew blog post
• Cheatsheets/grid

---

• Use lightning CSS with Vite

---

• Fluid typography with CSS clamp — Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

• Use the ch unit for line length

• Responsive Type and Zoom — Typography that responds to viewport width (‘fluid’ or ‘responsive’ typography) can be useful when you want to ensure text does not get clipped or spill out of some design elements.

• A (more) Modern CSS Reset — I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well.

• * { Box-sizing: Border-box } FTW

• Happy international box sizing awareness day

---

• Flexible typography with CSS locks
• Responsive Type and Zoom
• Use CSS Clamp to create a more flexible wrapper utility
• Masonry layout, MDN docs

[nichoth]

fonts

keepachangelog

Good font, illustration

---

jackcheng.com/the-slow-web

• font is effra
• typewolf.com/effra
• fontsinuse.com/effra

helpful articles

• The joy of Variable Fonts: getting started on the Frontend

notes.hyperlink.academy/about

body {
    font-family: Quattro;
}

[nichoth]

CSS line-height

We want a line-height that is relative the the line length (the number of character in a line).

There is not a way to observe the line length in CSS. So set a line-height based on the max-width of the element, then refine it with media queries as necessary.

[nichoth]

CSS

The buttons when you hover

https://year-one.hyperlink.academy/library

.css-1oe1dts:hover, .css-1oe1dts:active, .css-1oe1dts:focus {
    cursor: pointer;
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px #272727;
    color: inherit;
}