余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

CSS开源项目资源大全(css开源项目资源大全)

xiyangw 2022-11-25 11:28 80 浏览 0 评论

CSS 资源大全内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

预处理器

更快地编译 CSS

  • GCSS:一个用GO语言编写的CSS预处理器。https://github.com/yosssi/gcss
  • LESS:向下兼容CSS并为当前的CSS增加额外的功能。http://lesscss.org/
  • Myth:只用写纯CSS而不用担心浏览器加载缓慢。https://github.com/segmentio/myth
  • PCSS:一个用Python语言编写的CSS预处理器。https://github.com/senko/pcss
  • PostCSS:通过JS插件来转换CSS。[PostCSS](https://github.com/postcss/postcss
  • Sass:成熟、稳定且强力的专业CSS扩展语言。http://sass-lang.com/
  • Stylus:用于nodejs的直观、强健、极具特色的CSS语言。http://learnboost.github.io/stylus/
  • YACP:另一种CSS预处理器。https://github.com/morishitter/YACP

这里有一个 CSS 预处理器汇总。

框架

  • 960 Grid System:简化了web开发工作流程。http://960.gs/
  • Blueprint:这个CSS框架为你提供易用的栅格系统、符合直觉的排版功能、有用的插件以及可打印的样式 http://www.blueprintcss.org/
  • Bootstrap:最流行的HTML、CSS、JS框架 http://getbootstrap.com/
  • inuit.css :强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架 http://inuitcss.com/
  • Foundation:一个高级响应式前端框架。http://foundation.zurb.com/
  • Material Design Lite:很好的用于制作Material Design风格网站的框架。http://www.getmdl.io/started/
  • Materialize:基于Material Design的现代响应式前端框架。http://materializecss.com/
  • Pure.css:一套可用于所有web项目的小型响应式CSS模块。http://purecss.io/
  • Semantic UI:使用人性化html的强力框架。http://semantic-ui.com/)
  • Skeleton:一个超简单的响应式模板。http://getskeleton.com/)
  • UIkit:适用于手机、平板以及电脑端的栅格系统。http://getuikit.com/

工具集

  • Basscss:一个基本元素样式与不可修改工具轻量级集合。http://www.basscss.com/
  • Bourbon:用于Sass的简单且轻量的混合库。http://bourbon.io/
  • Corpus:另一个CSS工具集。http://corpuscss.com/
  • Susy:用于Sass的响应式工具集。http://susy.oddbird.net/

CSS结构

  • RSCSS:CSS样式结构的合理标准。https://github.com/rstacruz/rscss
  • ITCSS:用于大型UI项目的稳定、可扩展、可控制的CSS架构。https://twitter.com/itcss_io

CSS标准化

  • Normalize:一套提供较好的多浏览器默认样式一致性的CSS规范。https://github.com/necolas/normalize.css
  • Normalize OpenType:为Normalize.css添加了OpenType特性,如连字、字间距等等。https://github.com/kennethormandy/normalize-opentype.css
  • Reset:一套CSS标准,将全部的HTML元素调整到一致的基准线。http://meyerweb.com/eric/tools/css/reset/
  • sanitize.css:一套可立即使用的,符合当今最优实践的CSS规范。https://10up.github.io/sanitize.css/

大型网站的CSS开发

  • [Github的CSS方案](http://markdotto.com/2014/07/23/githubs-css/
  • CodePen的CSS方案(http://codepen.io/chriscoyier/blog/codepens-css
  • Lonely Planet的CSS方案(http://ianfeather.co.uk/css-at-lonely-planet/
  • Groupon的CSS方案(http://mikeaparicio.com/2014/08/10/css-at-groupon/
  • Buffer的CSS方案(http://blog.brianlovin.com/buffers-css/
  • HOOTSUITE的CSS方案(http://code.hootsuite.com/css-at-hootsuite/
  • [如何精简TrelloCSS架构]http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/
  • Bugsnag的CSS架构 (https://bugsnag.com/blog/bugsnags-css-architecture
  • Ghost的CSS方案 (http://dev.ghost.org/css-at-ghost/
  • [Medium的CSS方案](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06

代码风格指导

  • [编写符合语言习惯的 CSS](https://github.com/necolas/idiomatic-css
  • [CSS 指南](http://cssguidelin.es/
  • [Sass 指南](http://sass-guidelin.es/
  • [Mark Otto 编写的风格指南,受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发](http://codeguide.co/
  • [ThinkUp 的 CSS 风格指导](https://github.com/ThinkUpLLC/ThinkUp/wiki/Code-Style-Guide:-CSS
  • [Google 的 HTML/CSS 风格指导](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
  • [WordPress的CSS代码标准](http://hao.importnew.com/wordpress-css-coding-standards/

命名习惯和方式

  • Atomic OOBEMITSCSS:http://www.sitepoint.com/atomic-oobemitscss/
  • BEM:https://en.bem.info/
  • SMACSS:https://smacss.com/
  • Point North:http://pointnorth.io/#base-browser-styling
  • ITCSS:http://itcss.io/
  • OOCSS:http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
  • Title CSS:http://www.sitepoint.com/title-css-simple-approach-css-class-naming/
  • idiomatic-css:https://github.com/necolas/idiomatic-css
  • Atomic Design:http://patternlab.io/resources.html
  • SUIT CSS:https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#u-utilityname
  • Kickoff CSS:https://trykickoff.github.io/learn/css.html#namingscheme

参考

  • [可扩展CSS阅读清单](https://github.com/davidtheclark/scalable-css-reading-list

相关推荐

数控系统常见术语详解,机加工人士必备资料
数控系统常见术语详解,机加工人士必备资料

增量编码器(Incrementpulsecoder)回转式位置测量元件,装于电动机轴或滚珠丝杠上,回转时发出等间隔脉冲表示位移量。由于没有记忆元件,故不能准...

2023-09-24 17:42 xiyangw

功、功率、扭矩的关系

功=功率×时间work=power×timeW=P×T功=力×距离work=force×lengthW=F×LP×T=F×LP=F×L/T=F×V(velocity)具体到电机输出轴上,圆...

Wi-Fi协议(802.11 )常见专业术语汇总
Wi-Fi协议(802.11 )常见专业术语汇总

Wi-Fi协议(802.11)常见专业术语汇总AP(Accesspoint的简称,即访问点,接入点):是一个无线网络中的特殊节点,通过这个节点,无线网络中的...

2023-09-24 17:41 xiyangw

不需要策略模式也能避免满屏if/else
不需要策略模式也能避免满屏if/else

满屏if/elsejava复制代码publicstaticvoidmain(String[]args){inta=1;if...

2023-09-24 17:41 xiyangw

喜极而泣,我终于干掉了该死的 if-else
喜极而泣,我终于干掉了该死的 if-else

推荐阅读:面试淘宝被Tomcat面到“自闭”,学习这份文档之后“吊打”面试官刷完spring+redis+负载均衡+netty+kafka面试题,再去面试BAT...

2023-09-24 17:40 xiyangw

Python中使用三元运算符简化if-else语句
Python中使用三元运算符简化if-else语句

Python是一种极简主义的编程语言,相比其他编程语言,在多个地方简化了代码的写法,可以让我们用更少的时间更简洁地完成工作。以赋值运算符为例:a=a+b简化...

2023-09-24 17:40 xiyangw

雅思课堂 | 雅思口语写作句型第二讲
雅思课堂 | 雅思口语写作句型第二讲

纯干货,无废话用最少的时间学最制胜的内容!泡图书馆泡不过学霸?碎片时间也能弯道超车!向着雅思8分行动起来吧!雅思口语写作句型1.Ipreferseeing...

2023-09-24 17:39 xiyangw

设计模式(三)——简单的状态模式代替if-else
设计模式(三)——简单的状态模式代替if-else

博主将会针对Java面试题写一组文章,包括J2ee,SQL,主流Web框架,中间件等面试过程中面试官经常问的问题,欢迎大家关注。一起学习,一起成长。前言大多数开...

2023-09-24 17:38 xiyangw

如何优化代码中大量的if/else,switch/case?

前言随着项目的迭代,代码中存在的分支判断可能会越来越多,当里面涉及到的逻辑比较复杂或者分支数量实在是多的难以维护的时候,我们就要考虑下,有办法能让这些代码变得更优雅吗?正文使用枚举这里我们简单的定义一...

优秀程序员早就学会用“状态模式”代替if-else了
优秀程序员早就学会用“状态模式”代替if-else了

2020年已经进入倒计时了,大家立好的flag完成了吗?2020实“鼠”不易,希望2021可以“牛”转乾坤。简介状态模式是行为型设计模式的一种。其设计理念是当对...

2023-09-24 17:37 xiyangw

用Select Case语句对执行多条件进行控制
用Select Case语句对执行多条件进行控制

今日的内容是"VBA之EXCEL应用"的第六章"条件判断语句(If...Then...Else)在VBA中的利用"。这讲是第三节...

2023-09-24 17:37 xiyangw

c#入门教程(四)条件判断if else

条件判断,是编程里常用的判断语句,比如某个代码如果满足条件就执行a代码块否则就执行b代码块。案例1:inti=2*5;if(a>0){执行a代码块}elseif(a<0){执行b代码块...

每日学编程之JAVA(十一)—条件语句(if……else)

一个if语句包含一个布尔表达式和一条或多条语句。如果布尔表达式的值为true,则执行if语句中的代码块,否则执行if语句块后面的代码。if语句后面可以跟else语句,当if语句...

不需要策略模式也能避免满屏if/else

除了使用策略模式以外,还可以使用其他设计模式来避免满屏if/else的问题。以下是一些可能的解决方案:工厂模式:将if/else语句移到工厂类中,由工厂类负责创建对象。这样可以将if/else语句从客...

围绕ifelse与业务逻辑的那些梗
围绕ifelse与业务逻辑的那些梗

ifelse很重要,几乎是程序员编程核心,业务逻辑与规则也通过ifelse体现出来,语句简单但是背后文章很大,先看几则幽默图:1.也许默认使用returnf...

2023-09-24 17:36 xiyangw

取消回复欢迎 发表评论: