html / css框架,我绝对不应该错过什么?
我正在研究一个可以用于我的大部分网站的html / css框架,至less要有一个基础。 这是我迄今为止使用的:
CSS框架
- Reset.css – 我使用了Eric Meyer的www.meyerweb.com。
- Typography.css – 网站的所有主要版式(来自blueprintcss.org )
- Forms.css – 基本表单样式(来自blueprintcss.org)
- Wireframe.css – 在这里,我设置了一个,两个和三个列加上页眉和页脚的线框。 我使用了圣杯技术,并通过设置一个'onecolumn','twocolumns'或'threecolumns'类的容器div来实现它,我可以在三者之间切换。
基本的技术
一些技术,我有一些预制的例子,我可以在任何网站重新使用:
- Suckerfish下拉菜单 – 水平和垂直各种版本
- 滑动门选项卡 – 尽pipe我尝试尽可能使用CSS3
脚本
- jQuery – 我尽可能less地使用它(也就是说,如果有css解决scheme,就像Suckerfish下拉菜单与jQ菜单一样)
插件
还没有。 我昨天看了css3pie ,看起来很有希望。
然而,看看
到目前为止,我还没有使用过,但可能很有趣的是css和js的缩写。 另外,目前我包含了上面提到的5个CSS文件在@import的main.css中,也许我应该让他们在我上传之前自动合并?
当然也有CSS网格系统。 我从来没有得到那些,但也许我应该再试一次。 我知道960网格非常受欢迎,但我不确定是否纯粹用于标记类(grid_4,column_5等)。对我来说,它有点像<span class="red">
来制作文本红色,就像使用内联风格一样糟糕。
无论如何,这只是一个基本的设置,网站中还有很多问题尚未纳入这个框架。 那么, 我应该怎样检查以改善我的框架呢? (HTML5和CSS3的欢迎,请不要闪:P)
build议
我将在这里列出下面提出的build议,我会看看。
- HTML5 Boilerplate
- IE 7/8 / 9.js
- Modernizr的
我强烈推荐HTML5 Boilerplate
HTML5 Boilerplate是专业badass的基础HTML / CSS / JS模板,用于快速,强大且面向未来的网站。
经过两年多的迭代开发,您可以获得最佳实践:跨浏览器规范化,性能优化,甚至可选function(如跨域Ajax和Flash)。 a starter apache .htaccessconfiguration文件将caching规则与您的网站挂钩,以便为您的网站提供HTML5video,使用@ font-face并获取您的gzip zipple。
锅炉不是一个框架,也没有规定任何发展的哲学,只是有一些技巧,让你的项目迅速和右脚的地面。
你可以做的最好的事情就是使用它。 这是唯一的方法,你真的会build立一个框架,做你所需要的一切。 毕竟,在你真正需要它之前,你并不知道需要的一切。
在我工作的地方,我们有我们自己的PHP框架,它是一个变化很大的实体,当需要的时候它们被添加了,因为它们原来不是最初需要的。
只要你有一些适合你的第一个项目,你正在进行。 只要尝试一下,当你需要的时候添加它,并优化你的位置和时间!
如果您正在研究缩小器,您可能愿意在testing和部署之前通过某种构build脚本来运行代码。 如果是这样的话,我会build议寻找你的CSS的LESS: http : //lesscss.org/docs
很less是纯粹的迷人。
我不知道你的项目需要多less客户端脚本,但是如果它是广泛的,你可能需要考虑使用类似M4或C ++的预处理器来添加对include,ifdefs等的支持…这可以帮助保持组织代码,并允许您维护debugging代码,这些代码不会出现在生产版本中。 这篇文章把这个想法推向了极致,但它可能会给你一些想法。
出于好奇,你使用什么服务器端语言?
滴鱿鱼。
随着越来越多的只触摸设备(手机,平板电脑),使用基于hover的用户界面元素将会激怒用户。
我不能相信我忘了(没有人提到) 字体松鼠 。 我已经用它来embedded一些字体,它真的像一个魅力。
从性能的angular度来看,我会使用内置的BlueprintCSS框架的Compass和SASS ,它主要负责渲染同一个跨浏览器的所有重置需求,您可以使用mixins而不是内联类来处理您的网格。 最重要的是,你最终会得到一个很小的css文件,加载速度非常快。 我也使用modernizr,html5boilerplate,css浏览器select器只与serverside php,更快的渲染。 如果你在SASS和LESS之间撕裂,与Compass + SASS的蓝图整合是壮观的。 希望这可以帮助!
为什么还有那么多人创造一个。 如果您觉得有什么错误或遗漏,我宁愿build议您为您提到的框架做出贡献。 这样你也可以帮助所有已经在使用它的人。
我同意亚历克斯在这里你应该开始使用它,这将确保它拥有你想要的一切,
并让我知道什么时候可以让我们使用;)
在我看来,Blueprint CSS网格技术比960g更好。 我不喜欢960的事情是,列之间的排水沟是由每列左右两个“半排水沟”形成的。 这是奇怪的; 你在布局的左侧和右侧结束了半水槽。
还有CSS浏览器select器 jQuery插件。 这在你的CSS中使用一些简单的select器来告诉哪个浏览器做什么:
.ie .myClass { background-color: #f00; } .ff .myClass { background-color: #00f; }
我在我的网站上使用它,这是一个比CSS黑客或条件注释更好的解决scheme。