CSS 资源大全

Posted by

CSS 资源大全

2015/12/25 · CSS · 1
评论 ·
CSS

本文由 伯乐在线 –
iLeo
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:github.com。欢迎加入翻译组。

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

【特别提醒】:伯乐在线已在 GitHub 上发起 CSS
资源大全中文版的整理,链接:。欢迎扩散和参与。

  • 目录
    • 预处理器
    • 框架
    • CSS结构
    • CSS规范化
    • 大型网站的CSS开发
    • 代码风格指南
    • 样式指南
    • 命名习惯和方式
    • 参考
  • 在线资源
    • 播客
    • Twitter
    • 视频

Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于
HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

预处理器

更快地编译 CSS

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

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

它由Twitter的设计师Mark Otto和Jacob
Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking
News都使用了该项目。

框架

  • 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 –
    适用于手机、平板以及电脑端的栅格系统。

国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

工具集

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

课程目标

CSS结构

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

掌握前端框架Bootstrap的使用

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

参考

  • 可扩展CSS阅读清单

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注