css.md

css

/* locally override a variable*/
div {
    color: var(--main-color, blue);
}

/* responsiveness */

:root {
  --max-width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --max-width: 100%;
  }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

// global.d.ts
import React from "react";

declare module "react" {
  // augment CSSProperties here
  interface CSSProperties {
    "--value"?: string | number;
    "--size"?: string | number;
    "--thickness"?: string | number;
  }
}

<div className="radial-progress" style={{"--value":70}}>70%</div>

const style:React.CSSProperties = {
  padding:13,
  xxx: 13
};

getComputedStyle(document.documentElement)
  .getPropertyValue('--color-primary');

document.documentElement.style.setProperty(
  '--color-primary',
  'hsl(245deg, 100%, 40%)'
);

download files

• File Download

bem

• solving bem common problems
• bem namespaces
• more bem namespacing

form data api

• FormData API with react

css

• React CSS variables in components and CSS files
• visbug FireBug for designers
• vscode intellisense for css variables, including open-props
• css variable see above for some code
• css variables for react devs
• Barba page transition: really cool
• styleing buttons with css variables
• postcss deep dive
• use post-css with create-react-app
• Show and element for a period and then hide
• usability 2023
• FlexBox Interactive Guide
• pico.css classless styling for html elements
• modern css reset
• Josh Comeau Blog about CSS
• shadows
• smashing magazine 21-10-14

fonts

• computer-modern

• I'm also particularly impressed with the simplest of CSS that will make almost any webpage look good. ref

html {
  max-width:70ch;
  padding:2ch;
  margin:auto;
  color:#333;
  font-size:1.2em;
}

• flexbox tips
• turbo css
• masonry layouts
• css frameworks
• things you can do with css now
• just in case mindset
• custom css styles for form inputs
• myths of color contrast accessibility
• arrow type recursive mono & sans
• fixing font variability inheritance
• the evolution of material-design's text field
• grid cheatsheet
• lobotomised owl selectors for sensible margins -doesn't seem to work well with flex
• ascii emoticons ( ͡° ͜ʖ ͡°)
• unobtrusive scrollbar
• focus-within
• focus-within using flexbox
• smooth easings from david kouresh video and css-tricks article

.enter {
  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);)
}

.move {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);)
}

.exit {
  animation-timing-function: cubic-bezier(0.5, 0, 0, 1);)
}

.sinful-layout-animation {
  transition height: 0.3s ease-in-out;
  /* no layout reflow */
  contain: layout;
}

• Using easing for more than just CSS transitions
• printer friendly pages

style links

a[href$=".pdf"] {
  background: url('https://i.imgur.com/n8EHrrI.png')
  0 50% no-repeat;
  padding-left: 20px;
}

• grid layout techniques
• responsive tables with minimal css
• css grid demos and article
• more css grid
• clickable area
• theme-ui and theme-ui types
• more chrome devtools tips
• managing layers with css variables
• small css tips