Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS框架研究<br />CSS框架的介绍、研究及项目实用性的探讨<br />余果<br />
第一部分<br />CSS框架是什么?<br />
什么是框架?<br />框架实现了对具体实现细节的反向控制,实现者无需考虑框架已经实现好的细节<br />框架是一组组件,供你选用完成自己的系统<br />框架就是别人搭好的舞台,你来做表演<br />一般来说,框架是成熟的、不断升级的<br />
JS框架<br />我们对于CSS框架这个词比较陌生,但对于JS库就比较熟悉了<br />JavaScript library 就是JavaScript framework<br />比如:常用的JavaScript库:jQuery<br />
jQuery是什么<br />jQuery是一种以方便开发者的编码为主要目的的库,比如原生的JavaScript代码写Ajax就需要一大坨代码,要考虑浏览器兼容性、语言本身的粒子性<br />用jQuery的话往往一句链式代码就能完成大量工作<...
CSS框架是什么<br />与JavaScript框架类似,CSS框架是一些原生的CSS代码,然后给用户一些接口(类名),用户操作类名而无需理会实现细节,通过操作类名来改变页面样式和结构<br />
为什么CSS框架没有像JS框架一样流行起来?<br />
为什么CSS框架没有像JS框架一样流行起来?<br />CSS框架没有被大家接受的一个重要原因是:<br />JavaScript是基于逻辑的,JavaScript框架能简化逻辑中的琐碎细节,给开发者带来方便<br />CSS是基于设计的,每个...
本PPT的目的是分析现阶段著名的、被广泛使用的CSS框架<br />选取其中适合的部分用在自己的项目中<br />
本次研究涉及的CSS框架<br />
第二部分 <br />CSS框架能做什么?<br />
Reset<br />其实我们常用的CSS reset就是一种框架,只不过这种框架是不提供接口的,它就在那儿,我们将它引用到页面中,就会重置浏览器差异<br />最有名的reset是YUI的reset,几乎已经成为业界标准<br />
NEWset<br />Newset是我发明的一个词,表示reset的一个还原操作<br />Reset把一切归于0,newset文件再把元素还原到一个很美观的程度<br />While Reset removes and neutralize...
NEWset+<br />
NEWset++<br />既然需要把reset的文件再重新定义一遍,那为什么不定义得更好看一些呢?<br />Bluetrip:<br />
NEWset++<br />Bluetrip:<br />由上到下分别是success、error、notice<br />
布局<br />所有的CSS框架都提供了布局的功能,一般叫做grids.css存在在include文件中,基于布局原理的不同分为两大类:<br />1.基于自适应的<br />2.基于栅格的<br />
自适应<br />Yahoo!首页<br />
自适应<br />通过Firebug修改最外层宽度为100%<br />
自适应<br />Oocss把布局分为大的布局(template.css)和小范围布局(grids.css)<br />Oocss把页面分为head、body和foot<br />Body中分为边栏和主内容<br />Template是用来定边...
Oocss中的grids.css<br />Grids.css用来定义小栏目,它跟template最大的不同是它是利用百分比来布局的。<br />
Oocss的自适应<br />So……修改oocss布局的container宽度的时候:<br />1.边栏宽度固定或随之被修改,这取决与你的边栏宽度单位是%还是px/em<br />2.主内容区域随之被修改,内部unit按比例放大或缩小<br />
布局上的自适应不是那么实用<br />为什么我认为大型网站在页面布局上(而非模块)自适应不实用:<br />1.项目改版不会只改变宽度<br />2.每一个栏目都做到自适应成本较大<br />
Yahoo!的边栏被拉宽之后的效果<br />Awful, isn’t it?<br />
基于栅格(网格)的布局系统!<br />
为什么是960像素?<br />几乎所有大型网站都是950像素和960像素宽的,为什么?<br />原因1:苹果电脑1027x768分辨率下打开Firefox,自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的...
950像素呢?<br />
950像素呢?<br />因为习惯性的把Gutter设定为10px,所以,margin就是Gutter的一半:5px<br />960-5-5=950<br />
彪叔算出的950px……<br />
栅格化设计的好处<br />1.一致、规范、严谨<br />2.美观?(持怀疑态度)<br />3.方便<br />
Blueprint的栅格真方便啊<br />无嵌套,自由定宽度,简单,通过Firebug就能改变布局<br />24格,相对灵活<br />功能齐全,包括<br />提供了一个很好的栅格思路<br />http://yuguo.us/weblo...
神马思路?<br />.span-n即为n个单位宽,比如span-3为3单位宽(40*3-10=110px;其中10是右边距);<br />.colborder为1个单位宽(栏目中的border,很好记),因为栏目间有分割条的时候,分割条离左右...
这不就是table了么?<br />
Blueprint布局比table更好的三个理由:<br />1.修改更方便,用table的话,不可能通过Firebug就修改布局<br />2.作为布局,span-3是有语义化的,table不是<br />3.div能加上role属性,语义化...
欢迎关注 chandleryu<br />
栅格系统不实用<br />
如果栅格系统可以用……<br />那么使用Blueprint的框架,会让代码更多还是更少呢?<br />项目越大,代码相对更少!<br />用一种恒定的方法为所有页面布局,CSS布局文件的大小不会增大。<br />
完美兼容<br />这些框架能兼容所有的A级浏览器<br />这对于设计师或者对CSS不熟悉的人来说是很方便的事情,不用调试IE bug<br />
Print.css<br />很多框架还提供了打印版本的css,如果不需要,简单地去掉它就好了<br />
第三部分<br />实用性<br />
无法直接应用CSS框架的理由<br />主要是栅格化<br />1.设计稿不是基于24网格<br />2.项目太大型,容易出现复杂布局的衍生物<br />2.学习成本较高,设计师和重构都要学习规则<br />另一个原因<br />http请求一...
不能直接使用<br />那就学习它们的优点~<br />
优点一:组织良好<br />框架是open给全世界网站使用的,所以它们一般是由组织良好的文件组成,方便一个新手去修改或者层叠样式<br />大部分框架都会把样式分成以下三个:<br />Reset 这个是不需要修改的<br />Newset(T...
CSS合并<br />项目组css只能保正两个HTTP请求,在目前没有样式文件合并系统的情况下,只能合并css<br />每个页面引入两个样式文件:一个base.css为全局/公共样式,所有的页面中都有引用;另一个是页面单独的文件。<br />...
Base.css<br />
模块化<br />终于要说到oocss最重要的特点:模块化<br />
比oocss做的更好!<br />Oocss的注释:<br />我在项目中的注释<br />via @ghostzhang<br />
比oocss做的更好:强注释<br />为什么要加强注释?<br />oocss有一个单独的mod.css和mod_skins.css来定义基类和扩展类,但我们的项目中不允许这么分离,都放在同一个文件中,所以需要注释表明是一个模块,加上一些更多...
比oocss做的更好:规范命名<br />Oocss中有一个基类名叫mod,这是因为sample太小,在大项目中会有很多模块,mod是一种常态,所以把它作为前缀<br />
比oocss做的更好:区分容器和内容<br />Oocss没有区分可嵌套的模块和不可嵌套的模块<br />可嵌套的模块采用这样的命名:<br />.mod_box .mod_box_more {}<br />
比oocss做的更好:区分容器和内容<br />不可嵌套的模块由于不需要考虑内部会有其它模块,所以命名可以更加简单一些,甚至可以直接用元素标签而不用入侵其他的模块内部:<br />.mod_pagenavula {}<br />.mod_pag...
Newset<br />开始一个新项目的时候,我们不会忘记reset,但往往不记得newset。<br />项目开始的时候,尽量先写公共样式common,再具体到细节,善用css的层叠性<br />但在涉及模块的时候,尽量先在单独的样式文件中写...
一起使用<br />用blueprint优秀的24格布局,然后用oocss写优美的模块,有何不可?<br />
自动工具:YUI的grids builder<br />
YUI的文件配置器<br />
960grids的生成工具<br />
我们也可以做自己的自动工具!<br />
我们也可以做自己的自动工具!<br />
Thank you!<br />鸣谢@ghostzhang<br />
Upcoming SlideShare
Loading in …5
×

css框架研究

3,138 views

Published on

CSS框架介绍以及可行性研究。

Published in: Education
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

css框架研究

  1. 1. CSS框架研究<br />CSS框架的介绍、研究及项目实用性的探讨<br />余果<br />
  2. 2. 第一部分<br />CSS框架是什么?<br />
  3. 3. 什么是框架?<br />框架实现了对具体实现细节的反向控制,实现者无需考虑框架已经实现好的细节<br />框架是一组组件,供你选用完成自己的系统<br />框架就是别人搭好的舞台,你来做表演<br />一般来说,框架是成熟的、不断升级的<br />
  4. 4. JS框架<br />我们对于CSS框架这个词比较陌生,但对于JS库就比较熟悉了<br />JavaScript library 就是JavaScript framework<br />比如:常用的JavaScript库:jQuery<br />
  5. 5. jQuery是什么<br />jQuery是一种以方便开发者的编码为主要目的的库,比如原生的JavaScript代码写Ajax就需要一大坨代码,要考虑浏览器兼容性、语言本身的粒子性<br />用jQuery的话往往一句链式代码就能完成大量工作<br />何乐而不为?<br />优点:方便;不用例会跨浏览器的细节;操作粒度更大,专注于主要逻辑<br />缺点:性能不是最佳;依赖API,无法像原生一样灵活<br />
  6. 6. CSS框架是什么<br />与JavaScript框架类似,CSS框架是一些原生的CSS代码,然后给用户一些接口(类名),用户操作类名而无需理会实现细节,通过操作类名来改变页面样式和结构<br />
  7. 7. 为什么CSS框架没有像JS框架一样流行起来?<br />
  8. 8. 为什么CSS框架没有像JS框架一样流行起来?<br />CSS框架没有被大家接受的一个重要原因是:<br />JavaScript是基于逻辑的,JavaScript框架能简化逻辑中的琐碎细节,给开发者带来方便<br />CSS是基于设计的,每个设计都完全不相同,所以可复用程度很小<br />
  9. 9. 本PPT的目的是分析现阶段著名的、被广泛使用的CSS框架<br />选取其中适合的部分用在自己的项目中<br />
  10. 10. 本次研究涉及的CSS框架<br />
  11. 11. 第二部分 <br />CSS框架能做什么?<br />
  12. 12. Reset<br />其实我们常用的CSS reset就是一种框架,只不过这种框架是不提供接口的,它就在那儿,我们将它引用到页面中,就会重置浏览器差异<br />最有名的reset是YUI的reset,几乎已经成为业界标准<br />
  13. 13. NEWset<br />Newset是我发明的一个词,表示reset的一个还原操作<br />Reset把一切归于0,newset文件再把元素还原到一个很美观的程度<br />While Reset removes and neutralizes the inconsistent default styling of HTML elements, Base applies a consistent style foundation for common HTML elements across A-grade browsers【YUIbase.css】<br />OOCSS:content.css<br />Blueprint:Typography.css<br />
  14. 14. NEWset+<br />
  15. 15. NEWset++<br />既然需要把reset的文件再重新定义一遍,那为什么不定义得更好看一些呢?<br />Bluetrip:<br />
  16. 16. NEWset++<br />Bluetrip:<br />由上到下分别是success、error、notice<br />
  17. 17. 布局<br />所有的CSS框架都提供了布局的功能,一般叫做grids.css存在在include文件中,基于布局原理的不同分为两大类:<br />1.基于自适应的<br />2.基于栅格的<br />
  18. 18. 自适应<br />Yahoo!首页<br />
  19. 19. 自适应<br />通过Firebug修改最外层宽度为100%<br />
  20. 20. 自适应<br />Oocss把布局分为大的布局(template.css)和小范围布局(grids.css)<br />Oocss把页面分为head、body和foot<br />Body中分为边栏和主内容<br />Template是用来定边栏宽度,然后内容区会自由伸缩<br />边栏和主内容在html中出现顺序无关<br />边栏可以有0~2个<br />
  21. 21.
  22. 22. Oocss中的grids.css<br />Grids.css用来定义小栏目,它跟template最大的不同是它是利用百分比来布局的。<br />
  23. 23. Oocss的自适应<br />So……修改oocss布局的container宽度的时候:<br />1.边栏宽度固定或随之被修改,这取决与你的边栏宽度单位是%还是px/em<br />2.主内容区域随之被修改,内部unit按比例放大或缩小<br />
  24. 24. 布局上的自适应不是那么实用<br />为什么我认为大型网站在页面布局上(而非模块)自适应不实用:<br />1.项目改版不会只改变宽度<br />2.每一个栏目都做到自适应成本较大<br />
  25. 25. Yahoo!的边栏被拉宽之后的效果<br />Awful, isn’t it?<br />
  26. 26. 基于栅格(网格)的布局系统!<br />
  27. 27. 为什么是960像素?<br />几乎所有大型网站都是950像素和960像素宽的,为什么?<br />原因1:苹果电脑1027x768分辨率下打开Firefox,自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为 960 x 650.<br />原因2:960是很多数的公分母<br />简单的说,960能被整分成6份、8份、12份、16份、20份、24份……报纸的栏目就是按这些比例来排版的<br />
  28. 28. 950像素呢?<br />
  29. 29. 950像素呢?<br />因为习惯性的把Gutter设定为10px,所以,margin就是Gutter的一半:5px<br />960-5-5=950<br />
  30. 30.
  31. 31. 彪叔算出的950px……<br />
  32. 32. 栅格化设计的好处<br />1.一致、规范、严谨<br />2.美观?(持怀疑态度)<br />3.方便<br />
  33. 33. Blueprint的栅格真方便啊<br />无嵌套,自由定宽度,简单,通过Firebug就能改变布局<br />24格,相对灵活<br />功能齐全,包括<br />提供了一个很好的栅格思路<br />http://yuguo.us/weblog/css-framework-blueprint/<br />
  34. 34. 神马思路?<br />.span-n即为n个单位宽,比如span-3为3单位宽(40*3-10=110px;其中10是右边距);<br />.colborder为1个单位宽(栏目中的border,很好记),因为栏目间有分割条的时候,分割条离左右两遍的距离margin都会增大。blueprint把1个单位也就是40像素加上原来的10像素边距分给这个border两边,完美了。<br />.prepend-x为x个单位宽,代表左边空出n个单位的距离。<br />.append-y为y个单位宽,代表右边空出y个单位的距离。<br />.border 为0个单位,代表在右边加上一个竖条间隔border。这里没有使用多余的空间,它把原来的10px margin变成4px padding和5px margin。<br />所有的class都会为元素设定一个单位宽<br />
  35. 35. 这不就是table了么?<br />
  36. 36. Blueprint布局比table更好的三个理由:<br />1.修改更方便,用table的话,不可能通过Firebug就修改布局<br />2.作为布局,span-3是有语义化的,table不是<br />3.div能加上role属性,语义化++<br />
  37. 37. 欢迎关注 chandleryu<br />
  38. 38. 栅格系统不实用<br />
  39. 39. 如果栅格系统可以用……<br />那么使用Blueprint的框架,会让代码更多还是更少呢?<br />项目越大,代码相对更少!<br />用一种恒定的方法为所有页面布局,CSS布局文件的大小不会增大。<br />
  40. 40. 完美兼容<br />这些框架能兼容所有的A级浏览器<br />这对于设计师或者对CSS不熟悉的人来说是很方便的事情,不用调试IE bug<br />
  41. 41. Print.css<br />很多框架还提供了打印版本的css,如果不需要,简单地去掉它就好了<br />
  42. 42. 第三部分<br />实用性<br />
  43. 43. 无法直接应用CSS框架的理由<br />主要是栅格化<br />1.设计稿不是基于24网格<br />2.项目太大型,容易出现复杂布局的衍生物<br />2.学习成本较高,设计师和重构都要学习规则<br />另一个原因<br />http请求一定要少<br />需要合并CSS+良好的注释分开功能<br />
  44. 44. 不能直接使用<br />那就学习它们的优点~<br />
  45. 45. 优点一:组织良好<br />框架是open给全世界网站使用的,所以它们一般是由组织良好的文件组成,方便一个新手去修改或者层叠样式<br />大部分框架都会把样式分成以下三个:<br />Reset 这个是不需要修改的<br />Newset(Typography) 基本的元素样式、表单样式、甚至通用的notice样式等<br />Grids 用于布局<br />
  46. 46.
  47. 47. CSS合并<br />项目组css只能保正两个HTTP请求,在目前没有样式文件合并系统的情况下,只能合并css<br />每个页面引入两个样式文件:一个base.css为全局/公共样式,所有的页面中都有引用;另一个是页面单独的文件。<br />Index.html中就引入base.css和index.css<br />
  48. 48. Base.css<br />
  49. 49. 模块化<br />终于要说到oocss最重要的特点:模块化<br />
  50. 50.
  51. 51.
  52. 52.
  53. 53. 比oocss做的更好!<br />Oocss的注释:<br />我在项目中的注释<br />via @ghostzhang<br />
  54. 54. 比oocss做的更好:强注释<br />为什么要加强注释?<br />oocss有一个单独的mod.css和mod_skins.css来定义基类和扩展类,但我们的项目中不允许这么分离,都放在同一个文件中,所以需要注释表明是一个模块,加上一些更多的信息<br />
  55. 55. 比oocss做的更好:规范命名<br />Oocss中有一个基类名叫mod,这是因为sample太小,在大项目中会有很多模块,mod是一种常态,所以把它作为前缀<br />
  56. 56. 比oocss做的更好:区分容器和内容<br />Oocss没有区分可嵌套的模块和不可嵌套的模块<br />可嵌套的模块采用这样的命名:<br />.mod_box .mod_box_more {}<br />
  57. 57. 比oocss做的更好:区分容器和内容<br />不可嵌套的模块由于不需要考虑内部会有其它模块,所以命名可以更加简单一些,甚至可以直接用元素标签而不用入侵其他的模块内部:<br />.mod_pagenavula {}<br />.mod_pagenav .now {}<br />可嵌套还是不可嵌套,在注释中写明<br />
  58. 58. Newset<br />开始一个新项目的时候,我们不会忘记reset,但往往不记得newset。<br />项目开始的时候,尽量先写公共样式common,再具体到细节,善用css的层叠性<br />但在涉及模块的时候,尽量先在单独的样式文件中写,有更多相同样式出现时,提取到base.css中<br />
  59. 59. 一起使用<br />用blueprint优秀的24格布局,然后用oocss写优美的模块,有何不可?<br />
  60. 60. 自动工具:YUI的grids builder<br />
  61. 61. YUI的文件配置器<br />
  62. 62. 960grids的生成工具<br />
  63. 63. 我们也可以做自己的自动工具!<br />
  64. 64. 我们也可以做自己的自动工具!<br />
  65. 65. Thank you!<br />鸣谢@ghostzhang<br />

×