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都使用了该项目。

对于 Web 工程师来说做好和最糟糕的事都是 Web
技术的日新月异。这也意味着作为一个 Web
开发者来说一定要不断的学习,适应变化。
因此,作者列举出了自己开发和学习过程中遇到的好工具和资源,在这里分享给大家:

框架

  • 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源码进行性能优化而来。

JavaScript Libraries

  • jQuery:最知名的
    JavaScript 库。
  • BackBoneJS:为复杂
    WEB 应用程序提供 MVP 结构。
  • D3.js:最流行的
    Javascript 可视化图形库之一。
  • React:Facebook
    开源的 JavaScript 库。
  • jQuery
    UI:以
    jQuery 为基础的开源 JavaScript 网页用户界面代码库。
  • jQuery
    Mobile:jQuery
    框架的一个组件,提供完整统一的移动 UI 框架。
  • Underscore.js:提供了一整套函数式编程的实用功能,但是没有扩展任何
    JavaScript 内置对象。
  • Moment.js:一个JavaScript
    日期处理类库,用于解析、检验、操作、以及显示日期。
  • Lodash:一个具有一致接口、模块化、高性能等特性的
    JavaScript 工具库。

工具集

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

课程目标

前端框架

  • Bootstrap:著名的快速开发响应式
    Web 应用程序的前端工具包。
  • Foundation:一个易用、强大而且灵活的前端框架,用于构建基于任何设备上的
    Web 应用。
  • Semantic
    UI:全语义化的前端界面开发框架。
  • uikit:一款轻量级开源的前端框架。

CSS结构

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

掌握前端框架Bootstrap的使用

数据库

  • MySQL:最流行的关系型数据库管理系统。
  • MariaDB:由
    MySQL 早期员工开发,属于 – MySQL 的一个分支。
  • MongoDB:基于分布式文件存储的数据库。
  • Redis:一个开源、支持网络、基于内存、键值对存储数据库。
  • PostgreSQL:开源的对象 –
    关系型数据库管理系统,Uber 早期就是用得这个。

Task Runners / Package Managers

  • Grunt:JavaScript
    世界的构建工具。
  • Gulp:基于流的自动化构建工具。
  • Bower:Web
    包管理器,包括 HTML,CSS,JavaScript,字体、甚至图片资源。
  • NPM:Node
    包管理器。

CSS标准化

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

适合人群

CSS 预处理器

  • Sass:一个强大、成熟、稳定的
    CSS 扩展。
  • Less:作为一个
    CSS 的扩展,其兼容性非常好,学习成本很低。
  • Stylus:提供更有效、优雅的方式来生成
    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.

前端开发者

Markdown 编辑器

  • StackEdit:一个开放源码免费使用的
    MarkDown 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存储,并支持
    HTML5,PDF 等多种导出格式。
  • Mou:Mac
    OS X 上一款出色的 Markdown 编辑器。
  • Texts:同时支持
    Windows 和 Mac OS X。

发表评论

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