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 [HitCounter-link]:http://hits.dwyl.io/awesome-css-group/awesome-css [HitCounter-徽章]:http://hits.dwyl.io/awesome-css-group/awesome-css.svg
Awesome CSS [![Awesome][awesome-badge]][awesome-link] [![Travis Build Status][travis-badge]][travis-link] [![HitCount][HitCounter-badge]][HitCounter-link]¶
> / *精选的令人敬畏的框架,样式指南和其他很棒的块的清单,用于编写出色的CSS. * /
Introduction¶
Motivation¶
该文档是精选的框架,样式指南和酷炫的信息清单,用于编写出色的CSS. 它不包含学习CSS的资源.
Complementary Resources¶
如果您在与CSS相关的问题上苦苦挣扎,请在以下资源中寻找答案:
CSS Working Group¶
CSS工作组创建并定义CSS规范. 这些规格已分配 maturity levels 随着他们在设计过程中的前进. 如果您想了解更多,请访问 CSS Working Group Page.
Editor's Draft
¶
-
CSS规范的编辑草稿*
-
w3c/csswg-drafts -CSS WG编辑器草稿存储库的镜像.
- w3c/css-houdini-drafts -Houdini WG编辑器存储库的镜像.
Parsers
¶
- CSSOM -用纯JavaScript实现的CSS对象模型.
- CSSTree -具有语法验证器的详细CSS解析器.
- Gonzales PE -CSS解析器,支持预处理器.
- mensch -不错的CSS解析器.
- ParserLib -CSSLint / parser-lib.
- PostCSS -使用JS插件转换样式.
- Rework -Node.js中用于CSS预处理的插件框架.
- Stylecow -适用于所有浏览器的现代CSS.
Preprocessors
¶
*更快地编写CSS *
- LESS -向后与CSS兼容,并且它添加的其他功能使用现有CSS语法.
- PostCSS -使用JS插件转换CSS.
- Sass -成熟,稳定且功能强大的专业级CSS扩展语言.
- STYLIS -轻量级CSS预处理器.
- Stylus -为NodeJ构建的富有表现力的,健壮的,功能丰富的CSS语言.
Frameworks
¶
- awsm.css -用于语义HTML标记的简单CSS库.
- Bonsai -完整的Utility First CSS框架,少于50kb.
- Bootstrap -最受欢迎的HTML,CSS和JS框架.
- Bulma -基于Flexbox的现代CSS框架. 还具有Sass导入以进行修改.
- Butter Cake -现代轻量级前端CSS框架,可更快,更轻松地进行Web开发.
- Charts.css -CSS数据可视化框架.
- Chota -具有有用的实用程序和网格系统的响应式,可自定义的微框架(3kb).
- Cirrus -完全响应的,全面的CSS框架,具有精美的控件和简单的结构.
- eFrolic -不使用JavaScript的CSS框架是交互式的且具有动画效果.
- Foundation -先进的响应式前端框架.
- Gralig -适度的灰色CSS库.
- Halfmoon -具有内置暗模式的响应式前端框架.
- Hasser CSS -轻量级(12k,未缩减),但有用的CSS框架以及灵活的Grid,Hero等.
- inuit.css -强大,可扩展,基于Sass的BEM,OOCSS框架.
- material-components-web -用于网络的模块化和可自定义的Material Design UI组件.
- Materialize -基于Material Design的现代响应式前端框架.
- Milligram -极简的CSS框架.
- Numl - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.
- Pure.css -一组小型的自适应CSS模块,您可以在每个Web项目中使用.
- Semantic UI -使用人类友好的HTML的强大框架.
- Shorthand Framework -面向新十年的功能丰富的CSS框架.
- Spectre.css -轻巧,响应迅速的现代CSS框架.
- Strawberry -一组通用的flexbox实用程序,这些实用程序专注于通过嵌套flexbox来使您的生活更轻松,更快.
- Tachyons -适用于人类的功能CSS.
- Tacit -平面设计技能为零的假人的CSS框架.
- tailwindcss -实用程序优先的CSS框架,用于快速UI开发.
- UIkit -轻巧的模块化前端框架.
- unsemantic -手机,平板电脑和台式机的流体网格.
- Wing -最小,轻巧,响应迅速的框架.
You can find more frameworks at "awesome-css-frameworks"
Toolkits
¶
CSS Structure¶
Reset and Normalize¶
- Normalize -一组CSS规则,可在HTML元素的默认样式中提供更好的跨浏览器一致性.
- Normalize-OpenType -向Normalize.css添加OpenType功能(连字,字距调整等).
- MiniReset.css -小型的现代CSS重置.
- sanitize.css -一组CSS规则,可立即使用当今的最佳做法.
- unstyle.css -专门的样式表,用于删除用户代理样式,并以基线为网络样式.
- reset.css -CSS工具:重置CSS.
CSS Development at Large-Scale Websites¶
- Bugsnag's CSS Architecture 通过 Max Luster
- CSS at BBC Sport 由Shaun Bent
- CSS AT HOOTSUITE 史蒂夫·迈内特(Steve Mynett)
- GitHub's CSS 通过 Mark Otto
- How we do CSS at Ghost 保罗·戴维斯(Paul Davis)
- Lonely Planet 通过 Ian Feather
- Medium’s CSS is actually pretty good. 通过 Jacob Thornton
- scalable-css-reading-list
- Refining The Way We Structure Our CSS At Trello 通过 Bob通过 Grace
Code Style Guidelines
¶
- idiomatic CSS 通过 Nicolas Gallagher
- CSS Styleguide 通过 Guilherme Rv Coelho
- CSS Guidelines 通过 Harry Roberts
- Sass Guidelines 通过 Hugo Giraudel
- Code Guide 通过 Mark Otto
- ThinkUp CSS Style Guide 通过ThinkUp
- Google HTML/CSS Style Guide 由Google
- WordPress CSS Coding Standards 通过WorldPress
Style Guide¶
- AUI 由Atlassian Design设计
- Design Elements 由孤独的星球
- Dropbox (S)CSS Style Guide 通过Dropbox
- Fluent UI 由Microsoft
- GitHub CSS Style Guide 通过Github
- Official Trello CSS Guide 由Bobby Grace
- Solid 通过BuzzFeed
- Patterns 通过MailChimp
- Lighting Design System 通过Salesforce
- SASS Style Guide 由Sass团队
- Style Guide 星巴克
- Website Style Guide Resources 很棒的人
查看更多样式指南,网址为 Website Style Guide Resources
Style Guide Generators
¶
Naming conventions & Methodologies
¶
- Atomic OOBEMITSCSS
- BEM
- Point North
- ITCSS
- OOCSS
- Title CSS
- idiomatic-css
- Atomic Design
- SUIT CSS
- Kickoff CSS
- MaintainableCSS
- NCSS
- RSCSS
CSS in JS¶
- aphrodite
- babel-plugin-css-in-js
- classy
- csjs
- css-loader
- JSS
- react-styled
- react-with-styles
- styled-jsx
- styled-components
这里有一个 CSS in JS techniques comparison
CSS Polyfills¶
- polyfill.js -一个使创建CSS polyfills更容易的库.
- prefixfree -摆脱CSS前缀地狱的束缚.
- fixed-sticky -CSS位置:粘性polyfill.
- selectivizr -一个JavaScript实用程序,可在Internet Explorer 6-8中模拟CSS3伪类和属性选择器.
- PIE -允许Internet Explorer识别和呈现各种CSS3框装饰属性.
Miscellaneous¶
- Single Div Project -一`. 许多可能性.
- Can I use -浏览器对CSS,HTML5和其他前端Web技术的支持.
- Live editor for CSS and LESS -适用于Chrome,Firefox和Edge的Magic CSS扩展.
- You Might Not Need JS -通用JS UI组件的CSS替代品.
- RevengeCSS -一个CSS小书签,使用选择器查找错误的标记,无论您在何处编写错误的HTML,它都在喜剧无衬线中显示难看的粉红色错误消息
- xpath-to-selector -将xpath转换为CSS选择器.
Podcasts
¶
编程时要听的东西.
- CSS Podcast -来自Google的开发者倡导者Una Kravets和Adam Argyle轻松地将CSS的复杂方面分解为易于理解的章节,涵盖了从可访问性到z-index的所有内容.
- 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开发人员的“美味佳肴”播客.
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 - CSS goblin & Sass hacker at @edenspiekermann.
- 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 -研究助理@ MIT_CSAIL,@ CSSWG IE,@ OReillyMedia作者,例如@ W3C员工.
- Manoela Ilic -... aka Mary Lou @codrops ༶ CSS和HTML是我的蜡笔༶对认知科学,人工智能,人机交互,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工作组邀请的专家.
Videos
¶
*来自CSS Must Watch视频的优质学习视频. 某些项目引用自 AllThingsSmitty/must-watch-css.
I told him on Twitter . 我感谢他的宝贵努力.*
2019¶
- Next-Generation Web Styling -Una Kravets和Adam Argyle @ Chrome开发者峰会2019.
2016¶
- Component-Based Style Reuse :page_face_up: transcript :watch:
37:24
-Pete Hunt @ CSS conf 2016. - CSS4 Grid: True Layout Finally Arrives :page_face_up: transcript :watch:
29:27
-Jen Kramer @ CSS conf 2016. - Houdini: Demystifying the Future of CSS :watch:
36:58
@ Google I / O 2016.
2015¶
- mdo-ular CSS :watch:
30:06
-Mark Otto @ jQuery UK. - CSS Architecture with SMACSS :watch:
30:15
-Caleb Meredith @ DevTips频道. - CSS Workflow from the Ground Up :watch:
46:06
-Jonathan Snook @ Generate conf 2015.
Books
¶
- CSS Secrets –更好地解决日常Web设计问题
- CSS: The Missing Manual –真正有助于将您的设计技能提升到一个全新的水平
- CSS: The Definitive Guide, 4th Edition -Web的视觉呈现
- Every Layout: Relearn CSS Layout –使用算法设计解决响应式布局问题.
Tutorials
¶
- CSS Diner –用于学习CSS选择的交互式游戏化教程.
- CSS Grid PlayGround -简单的教程,可从Mozilla学习CSS网格.
- Work With Animations -检查动画.
- Community Curated CSS Resources -热门推荐资源.
- 30 Seconds of CSS -精选的有用CSS片段集合,您可以在30秒或更短的时间内理解.
- Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS -深入介绍OOCSS,BEM,SMACSS,并提供示例.
- Flexbox video tutorial -Wes Bos提供的免费视频课程,用于学习flexbox.
- CSS Grids videos tutorial -Wes Bos提供的免费视频课程,用于学习CSS网格.
Maintainers¶
[sotayamashita]:https://github.com/sotayamashita [Rishabh04-02]:https://github.com/Rishabh04-02
[@sotayamashita] [sotayamashita],[@ Rishabh04-02] [Rishabh04-02]和您!
Contribute¶
[contributor-covenant]:https://www.contributor-covenant.org/version/1/3/0/code-of-conduct/
随时潜入! 打开一个问题或提交PR.
很棒的CSS遵循[贡献者契约] [contributor-covenant]行为准则.