首页 > 网站建设 > 蓝韵观点 > 前端开发 > 年终总结 css资源整合分享
年终总结 css资源整合分享

作者:公输子来源:lanyunwork时间:2018.01.12

预处理器

更快地编译 CSS

  • GCSS – 一个用GO语言编写的CSS预处理器

  • LESS – 向下兼容CSS并为当前的CSS增加额外的功能。

  • Myth – 只用写纯CSS而不用担心浏览器加载缓慢

  • PCSS – 一个用Python语言编写的CSS预处理器。

  • PostCSS – 通过JS插件来转换CSS

  • 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方案 by Mark Otto.

  • 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.

  • 我们是如何精简 Trello 的 CSS 架构的 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

 

播客

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

  • 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

  •  
    1. mdo-ular CSS: Mark Otto, jQuery UK 30:06.

    2. CSS Architecture with SMACSS: Caleb Meredith, DevTips channel 30:15. 用SMACSS搭建CSS结构

    3. CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015 46:06. 从头开始学习CSS工作流

2014

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2013

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

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

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

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

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

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

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

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

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

    10. The Mind-blowing Power of Sass 3.3 | Sass那印象深刻的力量: Chris Eppstein, CSSConf.EU 38:54.

    11. Front-End Tools for the Young Developer | 年轻开发者的前端工具: Christian Vuerings, SF HTML5 User Group 14:16.

    12. Maths-Powered Transforms for Creating 3D Shapes | Maths-创建3D图形的强力转换器: Ana-Maria Tudor, CSSConf.EU 30:27.

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

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

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

    16. More CSS Secrets: Another 10 Things You May Not Know about CSS | 更多的CSS秘密:CSS不为人知的另外10件事: Lea Verou, W3Conf 60:39.

    17. Atomic Cascading Style Sheets: Renato Iwashima, HTML5DevConf 52:33.

2012

  •  
    1. Open Source Tools and Libraries for Designers | 设计师的开源工具以及资源库: Julie Ann Horvath, HTML5DevConf 29:39.

    2. GitHub’s CSS Performance |  GitHub的CSS表现: Jon Rohan, CSS Dev Conf 40:50.

2010

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

    2. The Top 5 Mistakes of Massive CSS | 大规模CSS中较容易出现的5个错误: Nicole Sullivan, Build Conference 37:53.

 

 

与蓝韵项目经理通话

请输入正确的手机号码格式

信息保护中请放心填写

在线咨询
 
提交成功
关闭浮窗