I Sparkle

Sparkle my ideas

960css 框架推出24列网格系统

今天在twitter上看到nathan smith说,960CSS已经有24列的了,颇为震惊,10个月前,我将960重构为sparkle 960的时候,建议他搞个24列,Nathan说会考虑的,然后就没有消息了。

不过虽然经过这么久,他终于将24列加入进来了,这是一件令人高兴的事情。

看一下demo先:http://960.gs/demo_24_col.html

官方的下载包里面也已经加入24列网格的相关信息了。感兴趣的童鞋快去下载吧:http://960.gs

css3系列教程

这是国外 zen elements写的一系列文章,写的非常到位,很系统,我春节前就已经盯上了,现在终于翻译完了。花了我一个多星期的时间。感兴趣的朋友可以看看。

如果IE8也支持这些CSS3特性,那么以后我们的前端开发工作会容易很多。 查看全文 »

NiceFormes V2.0中文版

emblematiq上个月发布了其大名鼎鼎的NiceForms 2.0版本,我对这个研究很久了,昨天将其汉化,现在分享出来,供大家学习。

niceforms2

NiceForms V2.0

Demo | 中文演示 查看全文 »

纯CSS圆角实现(except IEs)

Firefox特有的浏览器CSS功能之一就是”-moz-border-radius”属性集。-moz-border-radius属性允许你创建圆角元素——纯CSS。

这个border-radius属性是CSS3新增属性之一。Firefox的这个特性同时支持Firefox2和Firefox3。 查看全文 »

如果,IE,死了……

如果IE死了,我会不会失业?

呵呵,事实上,我是如此的讨厌IE,巴不得IE赶快死掉,这该死的IE…… 查看全文 »

Sparkle CSS 960 网格系统发布

960 CSS框架是一个很成熟的系统,它小巧灵活、易学易用。经过一段时间的学习和研究,我把960系统做了些优化,然后发布了《960 CSS框架解析及重构》。

前几天,一个网友问我,为什么960系统没有24列模块?我突然意识到这是一个问题。

在和他讨论之后,我意识到,在国内,其实应用最多的是24列网格,而12列网格和16列网格更适用于英文网站。而且,虽然从表面上来看,将页面分的列越多,看起来越复杂,但是事实上并不是这样的,列越多,可以组成的组合就越多,布局起来就越简单,更灵活。

经过研究,我在960系统上添加了24列模块。

同时,为了将960这个优秀的网格系统发扬光大,我将我的工作发布为一个新的衍生版本,它有以下改进和优点:

  1. 每一列的公用样式提炼分离出来,组成为一个通用的.column类,然后每一列的样式只需要控制宽度即可;
  2. 添加24列模块;
  3. 优化部分样式;

当然,这不是一个复杂的框架,任何有些CSS基础的人都可以很容易很快的学习它,并将其应用于自己的项目中。

希望大家喜欢,并欢迎提出批评。

同时,我将本项目发布为一个开源项目,项目地址:http://code.google.com/p/sparkle960/ 欢迎有兴趣的朋友加入本项目来完善这个框架。

最后特别感谢960的开发者Nathan Smith,他是一个很棒的前端开发人员,也是一个很和善的人,我多次和他讨论960系统,本框架也是在他的指导和授权下发布的。

Demo: http://www.isparkle.cn/show/960

源码下载地址:http://code.google.com/p/sparkle960/downloads/list 

同时,你也可以通过Google code的SVN功能获取最新的版本。

CSS最小高度解决方法

因为IE6不支持min-×,所以让某个div保持最小高度,并且当内容超出的时候自动增加该层的高度,一度是个比较头疼的问题,我也曾经尝试使用传说中的expression表达式,但是该表达式在IE6下也常常无效,后来证明,问题被我想象的过于复杂了。IE6当内容高于外部box的时候,会将其撑开的。所以,下面的这种方法是可以实现兼容性min-height的:
.myDiv {
    min-height:100px; 
    height:100px;     
 height:auto !important; 
    overflow:visible;
}

960 CSS框架解析及重构

960 css system

960 css system

960CSS框架是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。

960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。 查看全文 »

第1页/共 2页12