您的位置:首页 > Web前端 > CSS

CSS 资源大全中文版

2017-03-07 13:32 253 查看


预处理器

更快地编译 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,英文


代码风格指导

编写符合语言习惯的
CSS by Nicolas
Gallagher.

CSS
指南 by Harry
Roberts.

Sass
指南 by Hugo
Giraudel.

Mark
Otto 编写的风格指南,受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发 by Mark
Otto.

ThinkUp
的 CSS 风格指导,作者ThinkUp

Google
的 HTML/CSS 风格指导

WordPress的CSS代码标准官网


风格指导

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工作流


2014

What
Is a CSS Framework Anyway? | 究竟什么是CSS框架?: Harry Roberts, Industry Conf 
48:48
.

CSS
Is a Mess | 乱七八糟的CSS: Jonathan Snook, Beyond Tellerand 
53:49
.

10
Commandments for Efficient CSS Architecture | 高效CSS结构十诫: Kushagra Gour, CSSConf.Asia 
35:55
.

Slaying
the Dragon: How to Refactor CSS for Maintainability | 杀掉巨龙:从可维护性方面考虑如何重构CSS: Alicia Liu, Front-Trends 
33:21
.

CSS
in Your Pocket:Mobile CSS Tips from the Trenches | 口袋中的CSS-移动端CSS开发要点: Angelina Fabbro, CSSConf.US 
34:19
.

Styling
and Animating Scalable Vector Graphics with CSS | 用CSS制作可扩展的矢量图动画: Sara Soueidan, CSSConf.EU 
29:16
.

Play
Nice With CSS Tools and Methodologies | 学会使用CSS工具和方法: Brad Westfall, HTML5DevConf 
42:47
.

CSS
and the Critical Path | CSS以及关键路径: Patrick Hamann, CSSConf.EU 
33:42
.

All
the Right Moves: How to Put Your UI in Motion | 走好每一步:如何让你的UI动起来: Val Head, Multi-Mania 
45:49
.

Present
and Future of CSS Layout | CSS布局的发展: Tab Atkins, CSS Day 
49:31
.

Thinking
Beyond "Scalable CSS" | 关于可扩展CSS的思考: Nicolas Gallagher, dotCSS 
28:46
.

Web
Components & the Future of CSS | WEB组件以及CSS的将来: Philip Walton, SFHTML5 
40:02
.

CSS
Performance Tooling | CSS性能工具: Addy Osmani, CSSConf.EU 
46:27
.

3.14
Things I Didn’t Know About CSS3 | 关于CSS,我所不知道的14件事: Mathias Bynens, CSS Day 
45:35
.

Effortless
Style | 轻松的样式: Heydon Pickering, CSS Day 
49:51
.

CSS:
Yawn to Yay! | CSS:从无聊到精彩 Kyle Simpson, Front-Trends 
39:04
.


2013

When
Bootstrap Attacks | 当Bootstrap开始发力: Pamela Fox, CSSConf.US 
28:48
.

CSS
in the 4th Dimension | CSS是第四维: Lea Verou, JSConf.Asia 
44:49
.

Automated
CSS Testing | 自动化CSS测试: Jakob Mattsson, JSConf.Asia 
42:07
.

CSSConf.EU
Keynote | CSSConf.EU的基调: Nicole Sullivan, CSSConf.EU 
20:57
.

CSS
Application Architecture | CSS的应用架构: Nicolas Gallagher, SmashingConf 
38:36
.

Realigning
& Refactoring UI | UI的调整和重构: Jina Bolton, SassConf 
48:08
.

Normalizing
Designs for Better Quality CSS | 提高CSS质量的规范化设计: Harry Roberts, CSSConf.EU 
43:40
.

Automating
the Removal of Unused CSS | 自动清除无用的CSS: Addy Osmani, Velocity Europe Conference 
5:57
.

The
Humble Border-Radius | 低调的Border-Radius: Lea Verou, Future of Web Design 
37:07
.

The
Mind-blowing Power of Sass 3.3 | Sass那印象深刻的力量: 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 | Maths-创建3D图形的强力转换器: Ana-Maria Tudor, CSSConf.EU 
30:27
.

Sass
and OOCSS Sitting in a Tree K-I-S-S-I-N-G | Sass和面向对象CSS完美搭配: Nicole Sullivan, TXJS 
27:50
.

CSS
Levels Up | 提升CSS等级: Angelina Fabbro, CSSConf.EU 
31:38
.

Architecting
Scalable CSS | 搭建可扩展的CSS: Harry Roberts, Beyond Tellerand 
41:57
.

More
CSS Secrets: Another 10 Things You May Not Know about CSS | 更多的CSS秘密:CSS不为人知的另外10件事: 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 | GitHub的CSS表现: Jon Rohan, CSS Dev Conf 
40:50
.


2010

Handcrafted
CSS | 手写CSS: Dan Cederholm, Build Conference 
44:29
.

The
Top 5 Mistakes of Massive CSS | 大规模CSS中最容易出现的5个错误: Nicole Sullivan, Build Conference 
37:53
.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: