Github
文档
Easy ways to add design flair, user delight, and whimsy to your product!
The Spark Joy philosophy is explained in further detail in my book, check it out if you'd like to explore how this approach applies to a lot more than design utilities.
Table of Contents
- Web Design in 4 minutes
- CSS/UI Templates
- Layout
- Typography
- Colors
- Backgrounds
- Icons and Favicons
- Diagramming
- Graphics and SVG Illustrations
- Individual HTML Elements
- Pure CSS Tricks
- Animations & Transitions
- Ideas for Improving UX
- Design Software
- Non-DOM Browser Technologies
- Interaction/Design Inspo
- Random Stuff That Doesn't Fit Anywhere
Web Design in 4 minutes
Keep it simple: https://jgthms.com/web-design-in-4-minutes/
CSS/UI Templates
HTML/CSS nice templates
- 🆕 https://shuffle.dev/ tailwind/bootstrap/materialui randomly generated templates
- https://www.free-css.com/
- https://www.creative-tim.com/
- https://wickedtemplates.com using Tailwind v2 (and wickedblocks) and https://wickedbackgrounds.com/
- https://www.tailwind-kit.com/ free tailwind component kit
- https://daisyui.com/ tailwind theme
- https://themeselection.com/
- https://html5up.net/
- https://frontendor.com/ using bootstrap
- https://preview.tabler.io/# using bootstrap
- https://cruip.com/ HTML, React, Vue.js, and Tailwind templates
- https://open-props.style/ design tokens using CSS variables
Serious CSS Frameworks
Professional Design Systems
- https://designsystemsrepo.com/
- Government
- G10
- The UK: https://design-system.service.gov.uk/
- New Zealand is heavily based https://design-system-alpha.digital.govt.nz/
- The US: https://designsystem.digital.gov/
- Canada: https://www.canada.ca/en/government/about/design-system.html
- Russia: http://gov.design/
- Australia: https://designsystemau.org/
- France: https://www.systeme-de-design.gouv.fr/
- Germany: https://produkt.gsb.bund.de/DE/Home/home_node.html and https://styleguide.bundesregierung.de/sg-de/
- The UK: https://design-system.service.gov.uk/
- Other
- Argentina: https://argob.github.io/poncho/
- Greece: https://guide.services.gov.gr/
- Netherlands: https://www.rijkshuisstijl.nl/
- Italy: https://designers.italia.it/
- Singapore: https://www.designsystem.tech.gov.sg/
- Europe
- Estonia: https://brand.estonia.ee/
- Czech Republic: https://designsystem.gov.cz/
- Ukraine: https://diia.fedoriv.com/
- G10
Heavier CSS Frameworks
bigger learning curve, may have js, but more OOTB)
- 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
- Utility CSS
- Web Components
Drop-in CSS Frameworks
lighter, no js. preview some of these with https://sites.yax.com/, https://www.cssbed.com/, https://dohliam.github.io/dropin-minimal-css/ and https://github.com/dbohdan/classless-css
- No CSS Classes - Pure HTML
- 🌟 https://andybrewer.github.io/mvp/ mvp.css
- https://yegor256.github.io/tacit/
- https://github.com/alvaromontoro/almond.css has thin fonts
- https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
- https://simplecss.org/demo 4kb incl dark mode
- https://watercss.kognise.dev/ Small size (< 2kb)
- https://github.com/xz/new.css (https://newcss.net/) 4.8kb
- https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming.
- https://github.com/susam/spcss
- https://neat.joeldare.com/ https://github.com/codazoda/neatcss
- https://concrete.style/ Tiny (< 1kb)
- https://github.com/zichy/fieber (new, wants feedback)
- https://mikemai.net/typesettings/index.html (new)
- https://css.winterveil.net/ magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.
- https://github.com/neocities/element (inactive now)
- Spectre.css lightweight (10kb), responsive and modern CSS framework for faster and extensible development.
- https://purecss.io/ A set of small (3.7kb), responsive CSS modules that you can use in every web project.
- https://gdcss.netlify.app/ (inspired by UK design system)
- https://ajusa.github.io/lit/ lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework.
- https://luxacss.com/
- https://jenil.github.io/chota/ good looking, lots of classes and utilities yet small
- https://chr15m.github.io/DoodleCSS/ hand drawn look
- https://codepen.io/web-dot-dev/pen/abpoXGZ the base classes for web.dev/learn/csss
- https://open-props.style/ css variables framework - "tailwind without tailwind"id=30497165).
- https://latex.vercel.app/ style your website like a LATEX document - (original version https://github.com/davidrzs/latexcss)
- https://picnicss.com/ - lightweight bootstrap alternative (2014 HN)
- https://github.com/gduverger/screen (inactive now)
- Collections of even more:
Superlight: 100 bytes of css to look great nearly everywhere
html {
max-width: 60ch;
padding: 1.5rem;
margin: auto;
line-height: 1.5rem;
font-size: 24px;
}
see also http://bettermotherfuckingwebsite.com/
Fun CSS Frameworks
focus is fun
- https://www.getpapercss.com/ (handrwritingey css similar to roughjs)
- https://terminalcss.xyz/
focus is brutalism
- https://secretgeek.github.io/html_wysiwyg/html.html This page is a truly naked, brutalist html quine.
- https://mrcoles.com/demo/markdown-css/ CSS to make HTML markup look like plain-text markdown.
focus is fun/nostalgia
- NES.css: NES.css is a NES-style(8bit-like) CSS Framework.
- PSone.css: PS1 style CSS Framework, inspired by NES.css.
- LaTeX.css
- Operating System CSS
- React95
- 98.css: A Windows 98 inspired framework for building faithful recreations of old UIs.
- XP.css: A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
- 7.css
- System.css Retro Apple-inspired UI
- Puppertino meant to mimic the look of macOS. demo
- Commodore 64 CSS
- DOS: BOOTSTRA.386: A vintage 1980s DOS inspired Twitter Bootstrap theme
- a2k: A Windows 2000 inspired web component library
- Text UI CSS: bios like UI's
- New Dawn: A mac classic After Dark inspired stylesheet.
- Geocities Bootstrap theme
- Metalmorphism: High-quality metallic UI kit
- more https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj
focus in futurism
- Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps https://arwes.dev/
- http://augmented-ui.com/ - Futuristic, Sci-Fi shaping for any element
No Framework
Instead of using a framework, consider not using one.
CSS Resets
more control in exchange for more work on your part.
- eric meyer v2 https://meyerweb.com/eric/tools/css/reset/
- josh comeau reset https://www.joshwcomeau.com/css/custom-css-reset/ - Chris Coyier comments
- https://github.com/jensimmons/cssremedy css working group's reset if it didnt have to worry about tech debt
- https://github.com/tiaanduplessis/nanoreset
- https://nicolas-cusan.github.io/destyle.css/
- https://hankchizljaw.com/wrote/a-modern-css-reset/
- https://gist.github.com/DavidWells/18e73022e723037a50d6
- http://necolas.github.io/normalize.css/ (yes, technically does more than a reset)
- https://github.com/sindresorhus/modern-normalize is a smaller version that just supports latest Chrome, Firefox, and
