当前位置 : IT培训网 > Web前端 > Web培训 > 前端工程师必须收藏的CSS资源大全

前端工程师必须收藏的CSS资源大全

时间:2016-08-31 13:47:41  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
我想很多程序员应该记得 GitHub 上有一个 Awesome:XXX 系列的资源整理。awesome-css 是 sotayamashita 发起维护的 CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等

之前看了很多技术大牛分享的技术贴,其中有很多从未接触过的前端学习资源,总结的了一些,希望可以帮助到大家的同时也可以进监督自己学习!

更快地编译 CSS

GCSS:一个用GO语言编写的CSS预处理器。

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

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

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

PostCSS:通过JS插件来转换CSS。PostCSS

Sass:成熟、稳定且强力的专业CSS扩展语言。

Stylus:用于nodejs的直观、强健、极具特色的CSS语言。

YACP:另一种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

如何精简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

我想很多程序员应该记得 GitHub 上有一个 Awesome:XXX 系列的资源整理。awesome-css 是 sotayamashita 发起维护的 CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

这些前端开发都要用到的CSS开发资源,在之后的开发道路上肯定能用到很多。一样想在前端上深入学习,努力想从菜鸟变大牛的前端工程师们收藏起来吧。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容