人生在世，看得透，又看得远者prevail everywhere.

ppt.cc/fRZTnx ppt.cc/fSZ3cx ppt.cc/fLOuCx ppt.cc/fE9Nux ppt.cc/fL5Kyx ppt.cc/fVjECx ppt.cc/fIr1ax ppt.cc/fEnHsx ppt.cc/f71Yqx tecmint.com linuxcool.com linux.die.net linux.it.net.cn ostechnix.com unix.com runoob.com man.linuxde.net bit.ly/2EzoUDo bit.ly/2v6jGJi bit.ly/2tW6eYT bit.ly/2X6vadl bit.ly/2viLpHU linuxprobe.com linuxtechi.com linuxstory.org systutorials.com ghacks.net linuxopsys.com reurl.cc/NpzMWe reurl.cc/WrgYdx reurl.cc/Yv4Yvo reurl.cc/Lmy90K reurl.cc/Rr5aeG

Tuesday 23 August 2016

Awesome CSS

A curated list of awesome frameworks, style guide and other cool nuggets for the amazing CSS

Preprocessors

Build CSS faster

LESS - Backwards compatible with CSS and the extra features it adds use existing CSS syntax.
PostCSS - Transforming CSS with JS plugins.
Sass - Mature, stable, and powerful professional grade CSS extension language.
Stylus - Expressive, robust, feature-rich CSS language built for nodejs.

Find more CSS preprocessors on wiki

Frameworks

960 Grid System - An effort to streamline web development workflow.
Blueprint - CSS framework who gives you an easy-to-use grid system, sensible typography, useful plugins and stylesheet for printing.
Bootstrap - Most popular HTML, CSS, and JS framework.
inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
Foundation - advanced responsive front-end framework.
Material Design Lite - Great framework to make cool Material Design websites.
Materialize - A modern responsive front-end framework based on Material Design.
Pure.css - A set of small, responsive CSS modules that you can use in every web project.
Scooter - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
Semantic UI - Powerful framework that use friendly-human html.
Skeleton - A dead simple, responsive boilerplate.
UIkit - A lightweight and modular front-end framework.
unsemantic - Fluid grid for mobile, tablet, and desktop.

Toolkits

Basscss - a lightweight collection of base element styles and immutable utilities.
Bourbon - simple and lightweight mixin library for Sass.
Corpus - Yet another CSS toolkit.
Susy - Responsive layout toolkit for Sass.

CSS Structure

RSCSS - Reasonable Standard for CSS Stylesheet Structure.
ITCSS - A sane, scalable, managed CSS architecture for large UI projects.

Reset and Normalize

Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
Reset - A set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
sanitize.css - A set of CSS rules that style with today’s best practices out-of-the-box
unstyle.css - Specialised stylesheet for removing user agent styles, style the web with your baseline

CSS Development at Large-Scale Websites

GitHub's CSS by Mark Otto.
CodePen's CSS by Chris Coyier.
Lonely Planet by Ian Feather.
CSS at Groupon by Mike Aparicio.
CSS AT HOOTSUITE by Steve Mynett.
Refining The Way We Structure Our CSS At Trello by Bobby Grace.
Bugsnag's CSS Architecture by Max Luster.
How we do CSS at Ghost by Paul Davis.
Medium’s CSS is actually pretty f***ing good. by Jacob Thornton.

Code Style Guideline

idiomatic CSS by Nicolas Gallagher.
CSS Styleguide by Guilherme Rv Coelho.
CSS Guidelines by Harry Roberts.
Sass Guidelines by Hugo Giraudel.
Code Guide by Mark Otto.
ThinkUp CSS Style Guide by ThinkUp.
Google HTML/CSS Style Guide by Google.
WordPress CSS Coding Standards by WorldPress.

Style Guide

AUI by Atlassian Design.
Design Elements by lonely planet.
Dropbox (S)CSS Style Guide by Dropbox
GitHub CSS Style Guide by Github.
Official Trello CSS Guide by Bobby Grace.
Solid by BuzzFeed.
Patterns by MailChimp.
Lighting Design System by Salesforce.
Walmart Web Style Guide
SASS Style Guide by Sass team.
Style Guide by Starbucks.
Website Style Guide Resources by Awesome people.

Here is also great resource to understand. Website style guide resource

Naming conventions & Methodologies

CSS in JS

Here is CSS in JS techniques comparison

CSS Polyfills

polyfill.js - A library to make creating CSS polyfills much easier.
prefixfree - Break free from CSS prefix hell!
fixed-sticky - A CSS position:sticky polyfill.
selectivizr - selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
PIE - A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties.

References

scalable-css-reading-list

Resources

Podcasts

Something to listen to while programming.

Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front end web design, development, and UX.
Style Guide Podcast - A small batch series of interviews on Style Guides, hosted by Anna Debenham and Brad Frost.
The Big Web Show - topics like web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters.
The Web Ahead - Conversations with world experts on changing technologies and future of the web.
Non Breaking Space Show - Seeking out the best, brightest, and smartest creative people on digital art, design, and development.
The Changelog - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast, and the accompanying blog, is all about keeping you updated with the latest in Open Source Technology.

Twitter

Active accounts to follow.

CSS Animation
Andrey Sitnik - Author of @Autoprefixer, http://easings.net and @PostCSS.
Evangelina Ferreira - Web Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator.
Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
Hugo Giraudel - CSS goblin & Sass hacker at @edenspiekermann.
Guy Routledge - Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.
Heydon Pickering - Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.
Adam Morse - Advocate for users and open-source.
Donovan Hutchinson - Designer, developer, writer. Occasionally blogs at http://Hop.ie , and currently building @cssanimation.
CSS Commits - Latest commits to @CSSWG’s public Mercurial repository.
Scott Jehl - Author of @responsiblerwd, now on sale from @abookapart.
Dudley Storey - Web development writer, teacher, and speaker.
Zoe M. Gillenwater - Web designer/developer specializing in CSS, RWD, UX, & accessibility.
Ben Briggs - Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.
Paul Lewis - Googler who noodles with code and design.
Thierry Koblentz - CSSer @ Yahoo Only Tweeting Tech.
Nicolas Gallagher - Software Engineer at @twitter.
Harry Roberts- Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.
Phil Walton - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.
Lea Verou - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.
Manoela Ilic - ...aka Mary Lou @codrops ༶ CSS & HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design & Astrophysics ༶ Digital nomad.
Una Kravets - Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things!
Chris Coyier - Designer @CodePen. Writer @Real_CSS_Tricks.
Nicole Sullivan - GEEK!
Eric Bidelman - Engineer at Google working on Chrome, web components, and Polymer.
Patrick Hamann - Lover of mountains, craft beers and discovering new food.
Dave McFarland - Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.
L. David Baron - Mozilla developer, CSS and W3C standards diplomat.
Daniel GlazmanW3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.
The Chris Eppstein - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.
앗킨스 탭 - Literally Jenn Schiffer's Mom.
Natalie Weizenbaum - Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.
Brad Frost - Web designer, speaker, writer, consultant, musician.
Maxime Thirouin - Freelance front-end vigilante, UI/UX developer.
Mark Otto - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.
Simon - UI designer, CSS doodler.
Connor Sears - Designer at GitHub.
Remy Sharp - All about CSS sizing units.
Jonathan Snook - Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.

Videos

A useful list of must-watch videos. This list was taken from AllThingsSmitty/must-watch-css of 908a28. I told him on Twitter. Thank you so much.

2015

mdo-ular CSS: Mark Otto, jQuery UK 30:06.
CSS Architecture with SMACSS: Caleb Meredith, DevTips channel 30:15.
CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015 46:06.

2014

What Is a CSS Framework Anyway?: Harry Roberts, Industry Conf 48:48.
CSS Is a Mess: Jonathan Snook, Beyond Tellerand 53:49.
10 Commandments for Efficient CSS Architecture: Kushagra Gour, CSSConf.Asia 35:55.
Slaying the Dragon: How to Refactor CSS for Maintainability: Alicia Liu, Front-Trends 33:21.
CSS in Your Pocket - Mobile CSS Tips from the Trenches: Angelina Fabbro, CSSConf.US 34:19.
Styling and Animating Scalable Vector Graphics with CSS: Sara Soueidan, CSSConf.EU 29:16.
Play Nice With CSS Tools and Methodologies: Brad Westfall, HTML5DevConf 42:47.
CSS and the Critical Path: Patrick Hamann, CSSConf.EU 33:42.
All the Right Moves: How to Put Your UI in Motion: Val Head, Multi-Mania 45:49.
Present and Future of CSS Layout: Tab Atkins, CSS Day 49:31.
Thinking Beyond "Scalable CSS": Nicolas Gallagher, dotCSS 28:46.
Web Components & the Future of CSS: Philip Walton, SFHTML5 40:02.
CSS Performance Tooling: Addy Osmani, CSSConf.EU 46:27.
3.14 Things I Didn’t Know About CSS: Mathias Bynens, CSS Day 45:35.
Effortless Style: Heydon Pickering, CSS Day 49:51.
CSS: Yawn to Yay! Kyle Simpson, Front-Trends 39:04.

2013

When Bootstrap Attacks: Pamela Fox, CSSConf.US 28:48.
CSS in the 4th Dimension: Lea Verou, JSConf.Asia 44:49.
Automated CSS Testing: Jakob Mattsson, JSConf.Asia 42:07.
CSSConf.EU Keynote: Nicole Sullivan, CSSConf.EU 20:57.
CSS Application Architecture: Nicolas Gallagher, SmashingConf 38:36.
Realigning & Refactoring UI: Jina Bolton, SassConf 48:08.
Normalizing Designs for Better Quality CSS: Harry Roberts, CSSConf.EU 43:40.
Automating the Removal of Unused CSS: Addy Osmani, Velocity Europe Conference 5:57.
The Humble Border-Radius: Lea Verou, Future of Web Design 37:07.
The Mind-blowing Power of Sass 3.3: Chris Eppstein, CSSConf.EU 38:54.
Front-End Tools for the Young Developer: Christian Vuerings, SF HTML5 User Group 14:16.
Maths-Powered Transforms for Creating 3D Shapes: Ana-Maria Tudor, CSSConf.EU 30:27.
Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G: Nicole Sullivan, TXJS 27:50.
CSS Levels Up: Angelina Fabbro, CSSConf.EU 31:38.
Architecting Scalable CSS: Harry Roberts, Beyond Tellerand 41:57.
More CSS Secrets: Another 10 Things You May Not Know about CSS: Lea Verou, W3Conf 60:39.
Atomic Cascading Style Sheets: Renato Iwashima, HTML5DevConf 52:33.

2012

Open Source Tools and Libraries for Designers: Julie Ann Horvath, HTML5DevConf 29:39.
GitHub's CSS Performance: Jon Rohan, CSS Dev Conf 40:50.

2010

Handcrafted CSS: Dan Cederholm, Build Conference 44:29.
The Top 5 Mistakes of Massive CSS: Nicole Sullivan, Build Conference 37:53.

from https://github.com/sotayamashita/awesome-css

------------------

我们要做什么？

基于 awesome-css 列表，我们将对其中的各个资源项进行编译整理。此外还将从其他来源补充好资源。
整理后的内容，将收录在伯乐在线资源频道。可参考已整理的内容：：《BEM：前端命名方法论》：《Sass：CSS预处理器》：《YUI Compressor：JS/CSS压缩工具》

sotayamashita 发起维护的 CSS 资源大全，包括：预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

预处理器

更快地编译 CSS

GCSS：一个用GO语言编写的CSS预处理器。官网
LESS：向下兼容CSS并为当前的CSS增加额外的功能。官网
Myth：只用写纯CSS而不用担心浏览器加载缓慢。官网
PCSS：一个用Python语言编写的CSS预处理器。官网
PostCSS：通过JS插件来转换CSS。PostCSS
Sass：成熟、稳定且强力的专业CSS扩展语言。官网
Stylus：用于nodejs的直观、强健、极具特色的CSS语言。官网
YACP：另一种CSS预处理器。官网

这里有一个 CSS 预处理器汇总。

框架

960 Grid System：简化了web开发工作流程。官网
Blueprint：这个CSS框架为你提供易用的栅格系统、符合直觉的排版功能、有用的插件以及可打印的样式官网
Bootstrap：最流行的HTML、CSS、JS框架官网
inuit.css ：强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架官网
Foundation：一个高级响应式前端框架。官网
Material Design Lite：很好的用于制作Material Design风格网站的框架。官网
Materialize：基于Material Design的现代响应式前端框架。官网
Pure.css：一套可用于所有web项目的小型响应式CSS模块。官网
Semantic UI：使用人性化html的强力框架。官网
Skeleton：一个超简单的响应式模板。官网
UIkit：适用于手机、平板以及电脑端的栅格系统。官网

工具集

Basscss：一个基本元素样式与不可修改工具轻量级集合。官网
Bourbon：用于Sass的简单且轻量的混合库。官网
Corpus：另一个CSS工具集。官网
Susy：用于Sass的响应式工具集。官网

CSS结构

RSCSS：CSS样式结构的合理标准。官网
ITCSS：用于大型UI项目的稳定、可扩展、可控制的CSS架构。官网

CSS标准化

Normalize：一套提供较好的多浏览器默认样式一致性的CSS规范。官网
Normalize OpenType：为Normalize.css添加了OpenType特性，如连字、字间距等等。官网
Reset：一套CSS标准，将全部的HTML元素调整到一致的基准线。官网
sanitize.css：一套可立即使用的，符合当今最优实践的CSS规范。官网

大型网站的CSS开发

[Github的CSS方案](http://hao.jobbole.com/htmlcss-code-guide-by-mark-otto/） by [Mark Otto](https://twitter.com/mdo)，[英文](http://markdotto.com/2014/07/23/githubs-css/)
CodePen的CSS方案 by Chris Coyier，英文
Lonely Planet的CSS方案 by Ian Feather，英文
Groupon的CSS方案 by Mike Aparicio，英文
Buffer的CSS方案 by Brian Lovin，英文
HOOTSUITE的CSS方案 by Steve Mynett，英文
如何精简TrelloCSS架构 by Bobby Grace，英文
Bugsnag的CSS架构 by Max Luster，英文
Ghost的CSS方案 by Paul Davis，英文
Medium的CSS方案 by Jacob Thornton，英文

代码风格指导

风格指导

Atlassian 官方 UI 文档；
设计元素 by lonely planet.
GitHub 的 CSS 风格指导
Patterns by MailChimp 的风格指南.
Lighting Design System by Salesforce 的风格指南.
SASS 风格指南 by Sass team.
星巴克的风格指南 by Starbucks.
关于网站风格指导的一些资源 by Awesome people.

命名习惯和方式

Atomic OOBEMITSCSS：官网
BEM：官网
SMACSS：官网
Point North：官网
ITCSS：官网
OOCSS：官网
Title CSS：官网
idiomatic-css：官网
Atomic Design：官网
SUIT CSS：官网
Kickoff CSS：官网

参考

可扩展CSS阅读清单

其他资源

播客

编程时可以听的一些内容。

Shop Talk Show：Chris Coyier 和 Dave Rupert 的在线播客，涉及前端、UX的设计及开发。
Style Guide Podcast：由 Anna Debenham 和 Brad Frost 主持的一些访谈。
The Big Web Show：包含了几乎所有 Web 相关的话题，比如网络出版、艺术指导、内容策略、版面设计、Web技术等等。
The Web Ahead：与全世界的专家讨论 Web 技术的变化和发展。
Non Breaking Space Show：挖掘出那些在数字艺术、设计以及开发领域最好的、最知名的并且最聪明的创客们。
The Changelog：这个播客的口号是：“开源发展很快，快跟上”，致力于让你跟上最新的开源技术。

Twitter

值得关注的活跃用户

CSS Animation
Andrey Sitnik：@Autoprefixer, http://easings.net 和 @PostCSS 的作者
Evangelina Ferreira：web设计师，@multimedial_utn 的教授，HTML5 & CSS狂热爱好者，业余翻译者。
Sara Soueidan：@Codrops CSS Reference的作者，Smashing Book #5的合著者。
Hugo Giraudel：@edenspiekermann 的 CSS 怪才以及 Sass 黑客
Guy Routledge：前端开发者、@GA_London 的教师，http://www.atozcss.com 的视频作者，宅男，吃货。
Heydon Pickering：爱吃大米，同时也是一个UX设计师，作者，@smashingmag 编辑以及程序员。
Adam Morse：开源的粉丝和支持者
Donovan Hutchinson：设计师、开发者、作家。偶尔在http://Hop.ie上写博客，目前在建设@cssanimation
CSS Commits：最近忙于 CSSWG 的公共 Mercurial 库
Scott Jehl：responsiblerwd 的作者，现在 abookapart上面在打折
Dudley Storey：Web开发者、作者、老师以及演说者。
Zoe M. Gillenwater：Web设计师、开发者，专注于CSS、RWD、UX以及无障碍开发。
Ben Briggs：主要研究node.js、javascript、开源模块、客户端优化、web性能相关。
Paul Lewis：将代码与设计联系起来的谷歌员工。
Thierry Koblentz：Yahoo 的 CSS 开发者
Nicolas Gallagher：Twitter的软件工程师
Harry Roberts- @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT等的前端设计顾问
Phil Walton -谷歌工程师、开源拥护者、开发者、设计师、写手。
Lea Verou：MIT_CSAIL, @CSSWG IE, @OReillyMedia作者的研究助理，前W3C员工
Manoela Ilic：CSS和HTML是我的画笔，我对认知科学、AI、HCI、UI设计以及天体物理学很感兴趣，数码控。
Una Kravets：BMDesign以及Sassvocate的前端工程师，团队建设者以及手工艺者。座右铭：所有东西都应该开源！
Chris Coyier：CodePen的设计师，Real_CSS_Tricks作者
Nicole Sullivan：极客！
Eric Bidelman：谷歌的工程师，参与项目有Chrome、web组件、Polymer
Patrick Hamann：热爱爬山、啤酒以及美食。
Dave McFarland：Web开发者，《CSS: The Missing Manual》和《JavaScript & jQuery: The Missing Manual》的作者，
L. David Baron：Mozilla开发者，CSS以及W3C标准的「外交官」。
Daniel Glazman：W3C的CSS工作团队联合主席，企业家，软件工程师，极客，两个孩子的爸爸，通晓多国语言，喜欢鸭子。
The Chris Eppstein：爱恨分明，家庭美满，写代码，主导 LinkedIn 的样式。
Natalie Weizenbaum：女程序员，SassCSS 的主设计师和开发者，在谷歌做 Dart 语言相关工作。
Brad Frost：Web设计师、演讲者、写手、顾问、音乐家。
Maxime Thirouin：前端工程师，自由职业者，UI/UX开发者。
Mark Otto：在GitHub和Bootstrap工作，曾就职于Twitter，超级书呆子。
Simon：UI设计师，CSS开发者
Connor Sears：GitHub设计师
Remy Sharp：他的推都是关于CSS尺寸单元的
Jonathan Snook：设计师、开发者、写手、演讲者。我在网上做些东西，我写的SMACSS。

视频

一个很有用的必看视频清单，这个清单是从 908a28 的 AllThingsSmitty/must-watch-css 复制过来的，我已经在Twitter上跟他说了，非常感谢！

2015

mdo-ular CSS: Mark Otto, jQuery UK 30:06.
CSS Architecture with SMACSS: Caleb Meredith, DevTips channel 30:15. 用SMACSS搭建CSS结构
CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015 46:06. 从头开始学习CSS工作流