2018 May 24th Reading Ref

SASS, CSS

• CSS 專家密技 ★★★★★
• Foreword for CSS In Depth
• New CSS Features That Are Changing Web Design ★★
• A Strategy Guide To CSS Custom Properties
• Simple Web Layout with CSS Grid
• Custom List Number Styling
• Smart Home Temperature Slider
• Responsive tables, revisited ★★★
• The backdrop-filter CSS property
• The CSS Grid Layout vs CSS Frameworks Debate
• 滑向未来（现代 JavaScript 与 CSS 滚动实现指南）
• Decorating lines of text with box-decoration-break
• Learn This One Weird 🙊 Trick To Debug CSS
• line-clamp
• Math and front-end: Context is so much more important than degree of difficulty
• CSS CUSTOM PROPERTIES AND ACCESSIBILITY
• Developing the Star Wars opening crawl in HTML/CSS
• The Power of Flex-Grow
• Where Lines Break is Complicated. Here’s all the Related CSS and HTML.
• Grid Level 2 and Subgrid
• Intro to CSS 3D transforms
• CSS Grid — Responsive layouts and components
• A Guide To The State Of Print Stylesheets In 2018
• Editorial Design and CSS Grid: Inspiration and examples
• Solved With CSS! Dropdown Menus
• CSS Environment Variables
• CSS Grid: More flexibility with minmax()
• Responsive HTML Table Techniques & Examples
• Grid to Flex
• CSS at Scale: LinkedIn’s New Open Source Projects Take on Stylesheet Performance
• Tabindex
• Using pseudo-elements with CSS Grid
• Layers and how to force them
• Using the for Attribute on the output Element in HTML5
• Reusable, Maintainable, and Modular CSS

JS

• JavaScript is Good, Actually
• Compile Vue.js templates on the Fly with v-runtime-template
• Vue页面骨架屏注入实践

Front-End

• what’s wrong with css-in-js?
• CSS-IN-JS
• Webpack 4 configurator

Web Design / UX

• Plasma design system ★★★★★
• 7 typography trends in web design
• Design Systems ★★
• UI/UX case study: Dealsdate
• 7 Rules of Using Radio Buttons vs Drop-Down Menus
• Landing The Concept: Movie High-Concept Theory And UX Design
• Material Design + Figma Styles = 🔥
• Why You Should Never Use Pure Black for Text or Backgrounds ★
• How to Create a Case Study for your UX and Product Design Portfolio
• Charity website: a UX case study ★★★
• Eden — Design Process
• Why You Should Never Center or Right Align Your Logo
• Color Theory
• Font Sizes in UI Design: The Complete Guide
• Finger-friendly numerical inputs with inputmode
• The Best Place for Error Messages on Forms

Tools/Materials

• crunch
• LayoutIt
• Text Mask
• SMART CSS GRID
• cssgr.id
• CSS Blocks