CSS Awesome

核心规范

• CSS Box Sizing Module Level 4

Awesome

• Framework
  • picocss/pico
    • MIT, CSS
  • lowlighter/matcha
    • MIT, CSS
    • Drop-in semantic styling library in pure CSS.
• Toolchain
  • esbuild
  • cssnano
  • parcel-bundler/lightningcss
    • MPLv2, Rust
    • CSS parser, transformer, bundler, and minifier
• background-attachment: local
  • Overflow 显示阴影
• CSS Layout Workshop
• Layout Patterns
• ethantw/Han
  • 汉子注音排版
• Things I Wish I’d Known About CSS
• Reset/remove CSS styles for element only
• Library
  • voxel.css
  • peterramsing/lost
    • LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
  • mojotech/jeet
    • The most advanced, yet intuitive, grid system available for Sass or Stylus
  • kumailht/gridforms
    • Data entry can be beautiful
  • dogfalo/materialize
    • Materialize
    • Materialize, a CSS Framework based on Material Design
  • google/material-design-lite
    • Get MDL
    • Material Design Components in HTML/CSS/JS
• PostCSS.parts
  • A searchable catalog of PostCSS plugins
• CSS Tricks Snippets
• Loaders Loading!
• CSS Portal Ring ✨
• Animation
  • jolaleye/cssfx
• Color
  • ghosh/uiGradients

• CSS 参考手册

  • Codrops CSS Reference
  • CSS-Tricks Almanac
  • cssreference
    • HN
    • 可视化的方式解释 CSS 属性
  • htmlreference.io

• scss

  • long shadow codepen.io/danieltott/pen/AjKay

System Look

• codedgar/Puppertino
  • based on Human Guidelines from apple
• sakofchit/system.css
  • retro Apple
• jdan/98.css
  • Windows 98
  • contra.io/windows_98.css
• botoxparty/XP.css
  • Windows XP
• khang-nd/7.css
  • Windows 7
  • Demo
• nostalgic-css/NES.css
• micah5/PSone.css
  • PS1
• RoelN/c64css3
  • CSS3 C64, a Commodore 64 demo in your browser
  • Demo
• vinibiavatti1/TuiCss
• Text-based UI
• npjg/classic.css
  • Classic Mac interface
• bryanbraun/after-dark-css
  • After Dark screensavers
• divshot/geo-bootstrap
  • Demo
• renkman/Renkbench
  • Amiga Workbench
• ritenv/retro-desktop
  • Retro Desktop UI
• andersevenrud/retro-css-shell-demo
  • AnderShell 3000
  • crt.no
• kristopolous/BOOTSTRA.386
  • Demo
• demo.themesberg.com/windows-95-ui-kit
  • Windows 95 UI Kit
• arturbien/React95
  • Windows 95
  • react95.io
  • storybook.react95.io
• lolstring/window98-html-css-js
• jianzhongli/csswin10
• magiblot/tvision
  • Turbo Vision 2.0
• temoji.me
• vincentdoerig/latex-css
  • look like a LaTeX document
  • Demo

Defaults

HTML 默认样式

• andybrewer/mvp
• kognise/water.css
• tbolt/boltcss
• xz/new.css
• vladocar/Basic.css
• oxalorg/sakura
• igoradamenko/awsm.css
• hawkz/gdcss
• emareg/classlesscss
• kevquirk/simple.css
• Pico CSS Preview

Tricks

• Orientation Lock
• Aspect Ratio Boxes
• CSS-Only Carousel

学习

• CSS Diner
  • CSS Selector 游戏
• Selectors Explained
• Guide to Advanced CSS Selectors - Part One
• Every Layout
• Inclusive Components
• Axiomatic CSS and Lobotomized Owls

Loader

• vineethtrv/css-loader
• gaoryrt/minimal-loading

Codepen

• Grid Rotation Concept codesandbox.io/s/grid-rotation-concept-lnuld6?file=/src/index.tsx

.input {
  background:
    linear-gradient(canvas, canvas) padding-box,
    linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%)) border-box;
}

Patterns & Modules

• bansal-io/pattern.css
• Show HN: Pattern.css

CSS Frameworks

• pure-css/pure
• NPM Trends: frameworks
• CSS in 2020
• Foundation
• Semantic UI
• Tailwind CSS Examples