CSS

[awesome-link]:https://github.com/sindresorhus/awesome [awesome-badge]:https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg [travis链接]:https://travis-ci.org/awesome-css-group/awesome-css [travis-徽章]:https://travis-ci.org/awesome-css-group/awesome-css.svg?branch=master

> / *精选的很棒的框架,样式指南和其他很棒的块的清单,用于编写出色的CSS. * /

Introduction

Motivation

该文档是精选的框架,样式指南和酷炫的信息清单,用于编写出色的CSS. 它不包含学习CSS的资源.

Complementary Resources

如果您在与CSS相关的问题上苦苦挣扎,请在以下资源中寻找答案:

CSS Working Group

CSS工作组创建并定义CSS规范. 这些规格已分配 maturity levels 随着他们在设计过程中的前进. 如果您想了解更多,请访问 CSS Working Group Page.

Editor's Draft ✒️

Parsers 🔍

  • CSSOM -用纯JavaScript实现的CSS对象模型.
  • CSSTree -具有语法验证器的详细CSS解析器.
  • Gonzales -快速的CSS解析器.
  • Gonzales PE -CSS解析器,支持预处理器.
  • mensch -不错的CSS解析器.
  • ParserLib -CSSLint / parser-lib.
  • PostCSS -使用JS插件转换样式.
  • Rework -Node.js中用于CSS预处理的插件框架.
  • Stylecow -适用于所有浏览器的现代CSS.

⇧ back to top

Preprocessors 💊

*更快地编写CSS *

  • LESS -向后兼容CSS,它所添加的额外功能使用现有CSS语法.
  • PostCSS -使用JS插件转换CSS.
  • Sass -成熟,稳定且功能强大的专业级CSS扩展语言.
  • STYLIS -轻量级CSS预处理器.
  • Stylus -为NodeJ构建的富有表现力的,健壮的,功能丰富的CSS语言.

⇧ back to top

Frameworks 🎨

  • awsm.css -用于语义HTML标记的简单CSS库.
  • Bootstrap -最受欢迎的HTML,CSS和JS框架.
  • Bulma -基于Flexbox的现代CSS框架. 还具有Sass导入以进行修改.
  • Butter Cake -现代轻量级前端CSS框架,可更快,更轻松地进行Web开发.
  • Chota -具有有用的实用程序和网格系统的响应式,可自定义的微框架(3kb).
  • Cirrus -具有精美控件和简单结构的完全响应和全面的CSS框架.
  • eFrolic -不使用JavaScript的CSS框架是交互式的且具有动画效果.
  • Foundation -先进的响应式前端框架.
  • inuit.css -强大,可扩展,基于Sass的BEM,OOCSS框架.
  • material-components-web -用于网络的模块化和可自定义的Material Design UI组件.
  • Materialize -基于Material Design的现代响应式前端框架.
  • Milligram -极简的CSS框架.
  • Pure.css -一组小型的自适应CSS模块,您可以在每个Web项目中使用.
  • Semantic UI -使用人类友好的HTML的强大框架.
  • Spectre.css -轻巧,响应迅速的现代CSS框架.
  • Strawberry -一组通用的flexbox实用程序,这些实用程序专注于使您的生活变得更加轻松和快捷.
  • Tachyons -适用于人类的功能CSS.
  • Tacit -平面设计零技能的虚拟人的CSS框架.
  • tailwindcss -实用程序优先的CSS框架,用于快速UI开发.
  • UIkit -轻巧的模块化前端框架.
  • unsemantic -手机,平板电脑和台式机的流体网格.
  • Wing -最小,轻巧,响应迅速的框架.

You can find more frameworks at "awesome-css-frameworks"

⇧ back to top

Toolkits 🔧

  • Bourbon -用于Sass的简单轻巧的mixin库.
  • Susy -适用于Sass的响应式布局工具包.

⇧ back to top

CSS Structure

  • RSCSS -CSS样式表结构的合理标准.
  • ITCSS -适用于大型UI项目的健全,可扩展的托管CSS体系结构.

⇧ back to top

Reset and Normalize

  • Normalize -一组CSS规则,可在HTML元素的默认样式中提供更好的跨浏览器一致性.
  • Normalize-OpenType -向Normalize.css添加OpenType功能(连字,字距调整等).
  • MiniReset.css -小型的现代CSS重置.
  • sanitize.css -一组CSS规则,可立即使用当今的最佳做法.
  • unstyle.css -专门的样式表,用于删除用户代理样式,并以基线为网络样式.
  • reset.css -CSS工具:重置CSS.

⇧ back to top

CSS Development at Large-Scale Websites

⇧ back to top

Code Style Guidelines 📖

⇧ back to top

Style Guide

查看更多样式指南,网址为 Website Style Guide Resources

⇧ back to top

Style Guide Generators 🎰

⇧ back to top

Naming conventions & Methodologies 💡

⇧ back to top

CSS in JS

这里有一个 CSS in JS techniques comparison

⇧ back to top

CSS Polyfills

  • polyfill.js -一个使创建CSS polyfills更容易的库.
  • prefixfree -摆脱CSS前缀地狱的束缚.
  • fixed-sticky -CSS位置:粘性polyfill.
  • selectivizr -一个JavaScript实用程序,可在Internet Explorer 6-8中模拟CSS3伪类和属性选择器.
  • PIE -允许Internet Explorer识别和呈现各种CSS3框装饰属性.

⇧ back to top

Miscellaneous

  • Single Div Project -一
    `. 许多可能性.
  • Can I use -浏览器对CSS,HTML5和其他前端Web技术的支持.
  • cssfx -精美简单的点击复制CSS效果
  • Live editor for CSS and LESS -适用于Chrome,Firefox和Edge的Magic CSS扩展.
  • You Might Not Need JS -通用JS UI组件的CSS替代品.
  • RevengeCSS -使用选择器查找错误标记的CSS小书签,无论您在何处编写错误的HTML,它都在喜剧无衬线中显示难看的粉红色错误消息

⇧ back to top

Podcasts 📻

编程时要听的东西.

  • Shop Talk Show -与Chris Coyier和Dave Rupert进行的有关前端Web设计,开发和UX的实时播客.
  • Style Guide Podcast -由Anna Debenham和Brad Frost主持的关于风格指南的一小批访谈.
  • The Web Ahead -与世界专家就不断变化的技术和网络的未来进行对话.
  • Non Breaking Space Show -在数字艺术,设计和开发中寻找最优秀,最聪明,最聪明的创造力人士.
  • The Changelog -Changelog的标语说明了一切:“开源快速发展. 保持播报.”此播客以及随附的博客都是关于使您了解最新的开源技术的信息.
  • Syntax -Web开发人员的“美味佳肴”播客.

⇧ back to top

Twitter 📡

要跟踪的活跃帐户.

  • CSS Animation
  • Andrey Sitnik -@ Autoprefixer,http://easings.net和@PostCSS的作者.
  • Evangelina Ferreira - 网页设计师. @multimedial_utn HTML5和CSS Freak教授. 临时翻译.
  • Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
  • Hugo Giraudel -@edenspiekermann的CSS妖精和Sass黑客.
  • Guy Routledge -前端开发人员,@ GA_London老师,http://www.atozcss.com上的Screencaster,房地产势利者,Foodie.
  • Heydon Pickering -大米消费量适中. 还是UX设计师,作者,@ smashingmag编辑器和程序员.
  • Adam Morse -倡导用户和开源.
  • Donovan Hutchinson -设计师,开发人员,作家. 偶尔在http://Hop.ie上发布博客,目前正在构建@cssanimation.
  • CSS Commits -最新提交到@CSSWG的公共Mercurial存储库.
  • Scott Jehl -@responsiblerwd的作者,现已从@abookapart出售.
  • Dudley Storey -网络开发作家,老师和演讲者.
  • Zoe M. Gillenwater -专门从事CSS,RWD,UX和辅助功能的Web设计人员/开发人员.
  • Ben Briggs -最后一年的网络技术专业学生. node.js,javascript,开源模块,客户端优化,网络性能.
  • Paul Lewis -熟悉代码和设计的Googler.
  • Nicolas Gallagher -@twitter的软件工程师.
  • Harry Roberts-顾问前端架构师:@ google,@ Etsy,@ kickstarter,@ BBC,@ Deloitte,@ FT等.
  • Phil Walton -Google的工程师•开源倡导者•开发人员•设计人员•作家.
  • Lea Verou - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.
  • Manoela Ilic -... aka Mary Lou @codrops ༶ CSS和HTML是我的蜡笔༶对认知科学,AI,HCI,UI设计和天体物理学感兴趣༶数字游牧.
  • Una Kravets -前端@IBMDesign. 鼓吹,社区建设者和手工匠. STEMinist :)开源所有事物.
  • Chris Coyier -设计器@CodePen. 作家@Real_CSS_Tricks.
  • Nicole Sullivan - 极客.
  • Eric Bidelman -Google的工程师,负责Chrome,Web组件和Polymer.
  • Patrick Hamann -山区,手工啤酒和发现新食物的恋人.
  • Dave McFarland -Web开发人员,CSS的作者:The Missing Manual,JavaScript和jQuery.
  • L. David Baron -Mozilla开发人员,CSS和W3C标准外交官。
  • Daniel Glazman -W3C CSS工作组联合主席,企业家,软件工程师,极客,两个孩子的父亲,通晓多国语言的人,爱鸭子的人. 没事 推文严格是我的.
  • The Chris Eppstein -爱. 讨厌恨. 有一个踢屁股的家庭. 编写代码. 领导样式表技术@LinkedIn.
  • 앗킨스 탭 -从字面上看,詹恩·希弗(Jenn Schiffer)的妈妈.
  • Natalie Weizenbaum -转码器小姐. @SassCSS的首席设计师/开发人员,在@dart_lang上为@google工作.
  • Brad Frost -网页设计师,演讲者,作家,顾问,音乐家.
  • Maxime Thirouin -自由职业者前端警戒,UI / UX开发人员.
  • Mark Otto -GitHub和Bootstrap. 以前在Twitter. 巨大的书呆子.
  • Simon -UI设计师,CSS涂鸦者.
  • Connor Sears -GitHub上的设计师.
  • Remy Sharp -所有关于CSS尺寸调整单位的信息.
  • Jonathan Snook -设计师,开发人员,作家,演讲者. 我在网上制作东西. 我写了SMACSS.
  • Rachel Andrew -Web开发人员,@ grabaperch CMS的一半,CSS工作组邀请的专家.

⇧ back to top

Videos 📺

*来自CSS Must Watch视频的优质学习视频. 某些项目引用自 AllThingsSmitty/must-watch-css.

I told him on Twitter . 我感谢他的宝贵努力.*

2016

  1. Component-Based Style Reuse :page_face_up: transcript :watch:37:24-Pete Hunt @ CSS conf 2016.
  2. CSS4 Grid: True Layout Finally Arrives :page_face_up: transcript :watch:29:27-Jen Kramer @ CSS conf 2016.
  3. Houdini: Demystifying the Future of CSS :watch:36:58 @ Google I / O 2016.

2015

  1. mdo-ular CSS :watch:30:06-Mark Otto @ jQuery UK.
  2. CSS Architecture with SMACSS :watch:30:15-Caleb Meredith @ DevTips频道.
  3. CSS Workflow from the Ground Up :watch:46:06-Jonathan Snook @ Generate conf 2015.

⇧ back to top

Books 📚

⇧ back to top

Tutorials 🎬

⇧ back to top

Maintainers

[sotayamashita]:https://github.com/sotayamashita [Rishabh04-02]:https://github.com/Rishabh04-02 [troxler]:https://github.com/troxler

[@sotayamashita] [sotayamashita],[@ troxler] [troxler],[@ Rishabh04-02] [Rishabh04-02]和您!

Contribute

[contributor-covenant]:https://www.contributor-covenant.org/version/1/3/0/code-of-conduct/

随时潜入! 打开一个问题或提交PR.

很棒的CSS遵循[贡献者契约] [contributor-covenant]行为准则.

}