Serious CSS Frameworks

• Bootstrap
• Foundation
• Blaze UI
• PatternFly
• UIKit
• Numl - A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System
• Bonsai CSS
• Shoelace
• Tailwindcss
• Weightless
• Foundation

Drop-in CSS Frameworks

• Spectre.css
• 2014 HN
• 100 bytes of css to look great nearly everywhere

Fun CSS Frameworks

• LaTeX.css
• Office 97 clipart in svg format
• Commodore 64 CSS
• a2k
• Geocities Bootstrap theme
• Metalmorphism - quality metallic UI kit
• NES.css - style(8bit-like) CSS Framework.
• PSone.css
• React95
• 98.css
• XP.css
• 7.css
• System.css - inspired UI
• Puppertino
• BOOTSTRA.386
• Text UI CSS
• Commodore 64 CSS
• New Dawn
• Metalmorphism - quality metallic UI kit

No Framework

• consider not using one

CSS Resets

• Chris Coyier comments

React Component Libraries

• Recent comparison/discussion
• Radix UI
• Mantine
• Fancy Components

• wickedblocks
• wickedblocks

Responsive Layout Breakpoints

• Tailwind's breakpoints
• Tailwind's breakpoints

2D Spacing

• Double your whitespace

Other Layout Tools and tips

• github

Fonts

• System Font Stacks
• what are these?
• VS Code Autocomplete - family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
• `font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;`
• `font-family: ‘system-ui’, sans-serif;`
• 'system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink
• StackOverflow almost-system-font stack
• Some systems come with good premium fonts - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`
• Modern Font Stacks - [discussion](https://news.ycombinator.com/item?id=35168652)
• `Freight Text` - garamond), [`PT Serif`](https://fonts.google.com/specimen/PT+Serif)
• `Proxima Soft`
• `Freight Sans` - nova)
• `DIN`
• discussion
• 14 free programming fonts
• use a Uniwidth font (not monospace) for interface design
• fashions/trends
• @edadams
• 40 best google fonts by Typewolf
• 50 selections of google fonts
• Fira Sans - related to [Fira Code](https://github.com/tonsky/FiraCode) for devvy stuff
• Raleway
• Open Sans
• Recursive - 1 variable font that can handle both monospace and UI usecases, very versatile
• Erik Kennedy picks from these
• Lato
• Libre Franklin
• IBM Plex Sans - example: https://thesephist.com/posts/inc/
• Atkinson Hyperlegible
• Inter
• Jetbrains Mono - Monospace font for devvy stuff
• by Gontijo
• Steve Schoger uses it
• Font variants and oldstyle numbers
• example
• 6 ways to justify font choices in your designs
• statistical data on font usage
• Dank Mono
• Harry Roberts
• may be good
• see Kilian Valkhof
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• Sanitize.css
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• Dank Mono
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• VS Code Autocomplete - family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
• use a Uniwidth font (not monospace) for interface design
• use a Uniwidth font (not monospace) for interface design
• see Harry Roberts on Google Font loading perf - you should [self host this](https://wicki.io/posts/2020-11-goodbye-google-fonts/))
• use a Uniwidth font (not monospace) for interface design
• `font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;`
• `font-family: ‘system-ui’, sans-serif;`
• 'system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink
• Some systems come with good premium fonts - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`
• 14 free programming fonts
• use a Uniwidth font (not monospace) for interface design
• fashions/trends
• @edadams
• Erik Kennedy picks from these
• Clear Sans
• Atkinson Hyperlegible
• by Gontijo
• 6 ways to justify font choices in your designs
• use a Uniwidth font (not monospace) for interface design
• Lato
• Steve Schoger uses it
• example
• Harry Roberts

Line Width

• Note on the `ch` unit not being EXACTLY 60 chars

Kerning and char spacing

• https://hottips.imgix.net/2020/07/044-tracking-animation.gif
• Example from Steve Schoger

Font Sizing

• `clamp` - size: clamp(1.125rem, 1rem + 2vw, 1.5rem)`
• CSS Tricks - size: clamp(2rem, calc(2rem + 1.2vw), 3rem);`
• `font-size: calc(1rem + 2px + ((100vw - 550px) / 250))` - you can [fit text to screen width](https://twitter.com/shshaw/status/1240647643388395521?s=20)
• Inter/Tailwind font-size combo
• BAD, SLOW fontsize calc
• Sara Soueidan - size: calc(16px + .3vw);`
• Complete font-size notes
• `font-size: calc(1rem + 2px + ((100vw - 550px) / 250))` - you can [fit text to screen width](https://twitter.com/shshaw/status/1240647643388395521?s=20)
• Inter/Tailwind font-size combo
• BAD, SLOW fontsize calc
• Sara Soueidan - size: calc(16px + .3vw);`

Other Typography Resources

• explained - US/docs/Web/CSS/font-smooth)
• FlowType.js
• FitText
• Majuscule
• leading-trim
• FlowType.js
• Majuscule

Other Typography Resources

• DO NOT OVERUSE IT.
• Examples
• Never use black
• more complete primer on color personalities
• yellowish palette
• Adam Wathan
• filters here
• DO NOT OVERUSE IT.
• Examples
• Adam Wathan
• filters here
• filters here

Color Theory

• Justin Baker on Color Theory
• A Beginner’s Guide to Applying Color in UI Design
• Sarah Drasner on Color
• Louisa Barret on Color
• Erik Kennedy on HSB
• JustinMezzell on Color - advanced stuff on picking color tone/temperature. [Basic version by Steve Schoger](https://twitter.com/steveschoger/status/1502318105124646924)
• Convertkit on Color Theory
• Josh Comeau on Color Palettes
• Stripe - Designing accessible color systems
• How to do Dark Mode right
• Inventorying and naming a Color Palette at UXPin
• Reasoning about Color
• Numeric systems of color palettes explained
• Monochromatic color scheme guide
• Canva's color wheel has a color theory guide
• history of primary colors
• RGM to Lab color space math
• Justin Baker on Color Theory
• Erik Kennedy on color variations
• Refactoring UI on Building Your Color Palette
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• How to do Dark Mode right
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• Justin Baker on Color Theory
• A Beginner’s Guide to Applying Color in UI Design
• Erik Kennedy on HSB
• Convertkit on Color Theory
• Reasoning about Color
• Numeric systems of color palettes explained
• Monochromatic color scheme guide

Palette Generators

• HSLuv
• chroma.js color palette helper
• HN
• darker/lighter color variations

Color Gradients

• example - gradients/) in future.
• the "gray zone" problem
• argyleink - You can [really take this to the extreme](https://twitter.com/argyleink/status/1216815958917992450?s=20)!
• example - gradients/) in future.
• argyleink - You can [really take this to the extreme](https://twitter.com/argyleink/status/1216815958917992450?s=20)!

Color Theory for Data Visualization

• Teej's thread
• How to pick the least wrong colors - An algorithm for creating color palettes for data visualization - ([HN](https://news.ycombinator.com/item?id=31639009))
• Paul Tol's INTRODUCTION TO COLOUR SCHEMES
• How to pick more beautiful colors for your data visualizations
• Colorbrewer schemes
• Matplotlib colormaps
• Storytelling with Data
• Art + Data: A Collection of Tableau Dashboards
• A Dictionary of Color Combinations
• Visualize This: The FlowingData Guide to Design, Visualization, and Statistics
• Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017.
• Color Use Guidelines for Data Representation - Cynthia A. Brewer
• Somewhere Over the Rainbow: An Empirical Assessment of Quantitative Colormaps. Yang Liu, Jeffrey Heer. ACM CHI 2018.
• Teej's thread
• How to pick more beautiful colors for your data visualizations. Lisa Charlotte Rost
• Storytelling with Data
• D3 Color scales
• Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017.

Background Gradients and Patterns

• https://philcoffman.com/
• https://css-tricks.com/
• https://hottips.imgix.net/2020/07/063-burst.jpg?w=1200&auto=compress
• https://hottips.imgix.net/2020/07/063-burst.jpg?w=1200&auto=compress

Misc Backgroundy Stuff

• True Grit Texture Supply
• now native in iOS/macOS

Favicons

• How to Favicon in 2021
• the 6 favicon types you need
• Real Favicon generator - pop in an image, get back a favicon! The most comprehensive one for all platforms (Windows, iOS, Android)
• Favicon.io - Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
• FontIcon - Generate favicons and images from Font Awesome icons
• Favicon Generator - another one
• SVG Favicon maker - supports emojis and 2 letter favicons with custom fonts
• Favicon InBrowser.App - A modern pure-frontend favicon generator. Support SVG, maskable and dark mode. Optimize PNG and SVG outputs.
• Favicon InBrowser.App - A modern pure-frontend favicon generator. Support SVG, maskable and dark mode. Optimize PNG and SVG outputs.
• Favicon Generator - another one

Icons

• icon accessibility - using-icon-fonts/)
• Aria roles
• Lucide
• OK without attribution, don't sell it
• Free Fundamentals of Icon design in 1 hour course by MDS
• Glide Apps
• Feather Icons
• rauchg feature
• OK without attribution, don't sell it
• Free Fundamentals of Icon design in 1 hour course by MDS
• Glide Apps

Icons

• more from Simon
• How to Draw Architecture Diagrams

General Purpose Diagramming

• shifted - has [VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
• Microsoft Visio
• see hn thread
• shifted - has [VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)

Entity Relationship Diagrams

• Databasediagram.com – Private, Text to Entity-Relationship Diagram Tool
• Mocodo - flavored ERD, aka Merise MCD, where the layout is constrained to a grid
• Mocodo - flavored ERD, aka Merise MCD, where the layout is constrained to a grid

Device Mocks

• Screenstab
• Facebook Design Devices
• Shotsnapp
• Device Mock-Up Inspiration
• Lstore Graphics
• Creative Market
• Creative Market
• depth of field
• Screenstab
• Pika

ASCII Art

• HN discussion
• list
• list

Stock Photos and Videos

• NASA collection
• NASA collection

Video creation tools

• story
• see demo
• see demo

Tables

• A table with both a sticky header and a sticky first column
• A table with both a sticky header and a sticky first column

Nice React Components

• Folding the DOM
• React-Designer
• Folding the DOM
• React-Designer

Misc Weird fun stuff

• Variable Fonts by Mandy
• mentioned here
• Codepen
• 2min video
• Gooey Effect with SVG and Filters
• SVG filters
• Backdrop Filters and Multiple Inner Shadows
• CSS motion blur on css tricks
• Instagram filters created with CSS filters, by Una
• CSS only hover effect with Headers
• SVG iPhone mock and animated notification transition
• Backdrop Filters and Multiple Inner Shadows
• Instagram filters created with CSS filters, by Una
• 2min video

Avatars

• everything with an `id`
• niche tip on tooltips js perf
• everything with an `id`

Lightweight Charts/Dataviz

• example
• example

Misc Weird fun stuff

• codepen
• use Background-origin + transparent borders
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• `background-blend-mode` color-burn, lighten, multiply are cool
• use Background-origin + transparent borders
• apple has a private css property - apple-visual-effect: -apple-system-glass-material`

SVG/Canvas Masking

• Codepen
• really good for SVG icons, with hover

SVG/Canvas Masking

• css tricks

Loading Spinners

• Codepen

Empty states

• Photopea
• Pagereview.io
• more alternatives

WebGL

• Curtains.js - enhanced-drag-slider-tutorial-with-curtains-js-part-3))
• Polygonjs - source, node-based WebGL design tool, to create 3D scenes procedurally.

3D

• Minimal Gallery
• Godly.website
• Hoverstat.es
• Really Good Emails
• SaaSFrame
• Dribbble
• Landingfolio
• App Fuel
• Refero
• Read.cv
• Codrops
• Httpster
• Product Hunt
• Read.cv

Useful big datasets

• Graphext collection
• Data.world
• NYC taxi dataset - up and drop-off dates/times, pick-up and drop-off locations, trip distances, itemized fares, rate types, payment types, and driver-reported passenger counts.
• GitHub Activity data - datasets/github-on-bigquery-analyze-all-the-open-source-code)) This 3TB+ dataset comprises the largest released source of GitHub activity to date. It contains a full snapshot of the content of more than 2.8 million open source GitHub repositories including more than 145 million unique commits, over 2 billion different file paths, and the contents of the latest revision for 163 million files, all of which are searchable with regular expressions.
• Los Alamos cybersecurity data
• Numerai v4 - 1191 features and targets for the entire history of the @numerai tournament. 2.4 million rows and 574 eras. One of the hardest tabular dataset competitions on the planet.
• Enron email - got-enron-mail/))
• ICIJ Offshore Leaks db
• GDELT Project
• Hex's Horoscope
• BigQuery global daily weather data
• 241mb - [writeups](https://medialab.github.io/bhht-datascape/), [globe viz](https://tjukanovt.github.io/notable-people)
• SF Tree dataset
• Auckland Transport data
• Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam
• GeoNet earthquake catalog
• Correlates of War datasets
• r/dadjokes dataset
• Flight delays
• NFL play by play data - by-play data back to 1999. Includes completion probability (cp), completion percentage over expected (cpoe), and expected yards after the catch (xyac_epa and xyac_mean_yardage) in play-by-play going back to 2006. Includes drive information, including drive starting position and drive result. Includes series information, including series number and series success. Features models for Expected Points, Win Probability, Completion Probability, and Yards After the Catch
• 241mb - [writeups](https://medialab.github.io/bhht-datascape/), [globe viz](https://tjukanovt.github.io/notable-people)
• spark + iceberg quickstart - [blog](https://tabular.io/blog/docker-spark-and-iceberg/))
• Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam
• Graphext collection
• Disney world wait times
• Trashnet

Helpful podcasts/talks/articles

• How do I learn design?
• Design foundations for developers
• Design tips for developers
• Tactical design advice for developers
• UI Design for Developers
• Learning How to Design
• You can create a great looking website while sucking at design
• Laws of UX
• 100 Things I Know About Design
• Design Principles
• 7 Gestalt Principles of Design
• Visual design rules you can safely follow
• infographic
• MDS
• Simple Layout checklist
• Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc
• little details of visual ui design
• Buffer Design tips
• Notion
• UI Common Mistakes Checklist
• Hey designer
• Tracy Osborn Checklist
• Design Details: Principles of Design - Design Details' most downloaded episode of all time!
• How to design great keyboard shortcuts
• The self taught UI/UX designer roadmap
• 7 Rules for Creating Gorgeous UI
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• UI Density in Time and Space
• The self taught UI/UX designer roadmap
• The self taught UI/UX designer roadmap
• You can create a great looking website while sucking at design
• The self taught UI/UX designer roadmap
• 7 Gestalt Principles of Design
• infographic
• MDS
• Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc
• little details of visual ui design
• Buffer Design tips
• UI Common Mistakes Checklist
• Hey designer
• Refactoring UI
• Notion
• Tracy Osborn Checklist

More Free Stuff

• Canva Design School
• Degreeless.design
• The Design Newsletter
• The Design Newsletter