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