澳门在线威尼斯官方 > 威尼斯澳门在线 > 资源大全,前端必备知识

原标题:资源大全,前端必备知识

浏览次数:138 时间:2019-11-24

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阅读清单

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:资源大全,前端必备知识

关键词:

上一篇:没有了

下一篇:没有了