Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS最佳实战 #51

Open
moocss opened this issue Nov 6, 2015 · 5 comments
Open

CSS最佳实战 #51

moocss opened this issue Nov 6, 2015 · 5 comments

Comments

@moocss
Copy link
Contributor

moocss commented Nov 6, 2015

https://github.com/jgthms/css-reference/ (可视化CSS 属性 👍 💯 )
https://github.com/jgthms/html-reference (可视化 HTML👍 💯 )

https://fvsch.com/code/css-locks/ (The math of CSS locks, CSS 数学计算函数)
http://www.zcfy.cc/article/all-the-generic-css-data-types-2526.html (CSS通用数据类型)
http://qianduan.guru/2016/04/17/How-to-work-with-SVG-icons/ (SVG 图标制作指南)
https://fvsch.com/code/svg-icons/how-to/

https://github.com/teambition/standard/blob/master/css-style-guide.md ( 👍 💯 )

https://github.com/ayqy/CSS2-1 (W3C - CSS 2.1中文版 👍 💯 )

https://github.com/macbre/analyze-css (CSS选择器的复杂性和性能分析工具 👍 💯 )

http://rscss.io/index.html (CSS 样式表逻辑,能够帮助你撰写出一份易于维护修改的CSS, 条理清楚的样式结构 💯 👍 👍 , 推荐使用)

http://slides.com/colinhan/deck-2-3#/2 (深入CSS 👍 💯 )
http://slides.com/colinhan/deck#/ (HTML & CSS WORKSHOP 1)
http://slides.com/colinhan/deck-1#/ (HTML & CSS WORKSHOP 2 )

https://github.com/TVVT/commonless/blob/master/common.less

https://github.com/benfrain/app-reset

重构

https://juejin.im/post/5ba234c85188255c38535a47 (探索 SMACSS:可扩展的模块化 CSS 框架)

https://www.sky.com/toolkit (👍 💯)
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ (工具类与关注点分离 👍 💯👍 💯)
http://hao.jobbole.com/mediu-css/ (Medium的CSS 方案:简直完美)
https://github.com/suitcss/suit (Style tools for UI components)
https://gist.github.com/fat/a47b882eb5f84293c4ed ( Medium 的 CSS 写得真他妈的好 👍 💯 )

架构

https://github.com/shorthandcss/shorthand (Feature rich CSS framework for the new decade 👍 💯 推荐)
https://tailwindcss.com/ (A utility-first CSS framework for
rapidly building custom designs. 👍 💯推荐)

https://www.w3cplus.com/css/combining-the-powers-of-sem-and-bio-for-improving-css.html (结合SEM和BIO来改进CSS 👍 💯)
https://github.com/iotacss/iotacss
https://github.com/inuitcss/inuitcss
https://github.com/suitcss/suit

https://github.com/trowel

深入理解CSS:font metrics, line-height 以及 vertical-align

http://www.zcfy.cc/article/deep-dive-css-font-metrics-line-height-and-vertical-align-vincent-de-oliveira-2616.html#user-evaluation-modal

原子类优先的库

https://github.com/tachyons-css/tachyons/ (postcss 👍 💯 )

https://github.com/basscss/basscss/ (postcss)

https://github.com/turretcss/turretcss ((postcss 👍 💯 )

https://github.com/tailwindcss/tailwindcss

https://github.com/monarkee/beard

https://github.com/daiyanze/rotala ( 基于tailwindcss 👍 💯 )

@moocss
Copy link
Contributor Author

moocss commented Dec 12, 2015

Modular CSS

https://github.com/rangle/intro-to-modular-css (学习:+1: :100: )

css module 和 postcss

http://elemefe.github.io/postcss-salad/index.html (沙拉是一个基于 PostCSS 的 CSS 解决方案,它提供了一系列快捷的 at-rule 和默认语法声明来帮助你快速地搭建项目样式与类库,它只在调用时才输出代码,而不是直接提供 CSS 类库。 👍 💯 )

zhouwenbin/blog#1 (我们如何在项目中使用sass)
zhouwenbin/blog#11 (目录结构和模块的一些思考)
zhouwenbin/blog#3 (sketch导出的svg如何用在网页上, inlinesvg图标如何兼容所有浏览器的)
zhouwenbin/blog#4 (使用postcss搭建面向未来的静态开发环境)
zhouwenbin/blog#12 (搭建css module和cssnext自动刷新开发环境 )
zhouwenbin/blog#5 (如何写一份样式指南)
zhouwenbin/blog#6 (使用posthtml实现html和css模块化)
zhouwenbin/blog#15 (css modules的几种技术方案 )

http://codepen.io/zhouwenbin/pen/MKgoBm , http://www.fengqu.com/index.html (@styleguide , inlinesvg图标, b2c 网站 和 登录实战 👍 💯 )

http://boke.io/tan-tan-css-modules/ (谈谈 CSS Modules)

https://github.com/zhouwenbin/css-modules-vue-demo

@moocss
Copy link
Contributor Author

moocss commented Feb 28, 2016

icon font

http://ionicons.com/ (Ionic Framework. 默认字体图标库)

@moocss
Copy link
Contributor Author

moocss commented Mar 11, 2016

CSS 技巧小库

http://mixinsless.com/ (基于 Less 的 CSS 代码片段复用和混入库 👍 💯 )

https://jonsuh.com/hamburgers/ (Tasty CSS-animated hamburgers)
http://kazzkiq.github.io/balloon.css/ (Simple tooltips made of pure CSS)

https://github.com/chinchang/hint.css/ (css, accessible tooltips )

@moocss
Copy link
Contributor Author

moocss commented Jul 12, 2016

@moocss
Copy link
Contributor Author

moocss commented Sep 24, 2016

CSS3 高级用法

http://razvancaliman.com/css-for-decoration/#/1 (CSS Shapes,CSS Regions,CSS Masking,CSS,Blend Modes,tools & prototypes 👍 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant