xStyle alpha 1.0 发布

xstyle

xStyle 是一个非常简单的 css framwork,如果您是一名css老手那么简单看一下代码就可以立即用用到您的项目开发中去,即使是新手也只需要话5分钟看一下cheat sheet 即可使用,如果看了cheat sheet您都不会用的话,哪您最好找一本css入门教程看一下了。

   xStyle的特点:
   1、页面松耦合:xStyle 和其它css framework的最大的最大区别就是,完全和页面的结构没有关系,或者说是特别轻的相关性,大多数的属性都是一次性定义一个html元素即可。

   2、从新定义和封装:xStyle中封装了许多css现有的属性,譬如margin padding font 这些,从表面上来说是降低了灵活性,但是在实际项目开发中却提高了代码重用度和统一性,而且当程序员问你这里的要用什么字体颜色,什么样的边距的时候,你只需要告诉他加上一个xxxclass就行啦。

   3、快速部署:xStyle中包含了css项目开发中最常用的定义方法和一些小工具,您只需要稍微修改一下就可以快速的应用到你的项目开发中去。

   4、良好的扩展性:xStyle不仅仅是一个css framework,更是一种高效快速css开发方式,里面的代码您可以按照里面的方式自己进行随意更改和补充,然后修改成你公司或你自己的css framework。
 
   xStyle现在还是一个很简单的版本,由于时间仓促还有很多不足,如果有什么bug和意见希望大家通过 xwxwxw[at]gmail.com 与我联系。

下载地址:http://xstyle.d8in.com

收集的一些css framework

css Framework

YUI CSS库
http://developer.yahoo.com/yui/

YAML(Yet Another Multicolumn Layout)
http://www.yaml.de/en/

Content with Style: A CSS Framework
http://www.contentwithstyle.co.uk/Articles/17/

Blueprint
http://code.google.com/p/blueprintcss/

tripoli
http://monc.se/tripoli/

Elements
http://elements.projectdesigns.org/index.html

WYMstyle: a CSS framework
http://www.wymstyle.org/en/

taffy-css-framework
http://code.google.com/p/taffy-css-framework/

理解Web框架,和如何构建一个CSS框架[转][译]

framework

去年在网上看了这篇文章是英文的,最近找一些资料发现有人已经翻译成中文了,特此拿来给大家分享

近来,在Web开发中”框架”是一个相当时髦的词。比如JavaScript 框架 YUI、 JQuery和Prototype 都引起广泛的关注, Web应用框架Rails and Dojo 更是引人瞩目,仿佛所有人都使用某种框架来开发自己的网站。但究竟什么是框架?是不是框架仅仅是对程序员有用,设计师是否可以从中收益?

什么是框架?

为了便于沟通,我们给“框架”统一一个定义(至少在本篇文章中是统一的):一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。通常的讲,框架就是上面提到的JavaScript框架和Web应用框架。

需要强调说明的是,我们不必讨论构造、打包发布,相反,一个框架只为你或你的团队使用即可。
继续阅读“理解Web框架,和如何构建一个CSS框架[转][译]”

“少用继承,多用组合”之CSS篇

“少用继承,多用组合”之CSS篇

继承是 css中经常要用到的技术,好处是可以尽量让页面的代码减少重复利用,但是随时项目越来越大,需求的不断变化,css代码就会变得越来越臃肿,后期难以控制和维护。其实,css代码和普通程序代码在编写的时候有很多的相似之处,下面我们就用试试用组合的方式是不是能更好的解决这个问题。

下面是一段普通的代码:
css:

.box{
border:1px solid #ccc;
font-size:12px;
background:#f1f1f1;
padding:10px;
}

html:

this is a gray box


继续阅读““少用继承,多用组合”之CSS篇”

css 英文相关文章以及站点

css 英文相关文章以及站点
以下是http://veerle.duoh.com收藏的css相关文章以及站点,分门别类非常的全,如果能把下面的所有链接里面的内容都精通的话,绝对就已经是顶级css高手了。

Why CSS ? + CSS learning

继续阅读“css 英文相关文章以及站点”

什么是microformats

10_142352_microdiagram.gif

今天上网随便找一些资料偶然发现了microformats.cheatsheet.pdf,下载以后看不太明白。然后就搜索了一下关于microformats的资料,中文资料是甚少呀,不过看过一些以后还是终于明白了是啥意思。

微格(microformats)是一系列简单的开放资料格式,已人类第一位,机器其次的中心思想,已目前广泛采集的标准为基础。微格并非把今天的成果方在一旁,而是采取顺应目前使用行为模式(例如xhtml部分格式)的途径,尝试解决一些较为简单的问题。

继续阅读“什么是microformats”

短小精悍的 form代码

国外的一片文章,用css定义form但是里面几乎就是用了最精悍的代码

html





CSS

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

把label,input用float:left定义成一行,然后距离下面10px,lable单独定义边距和文字并复写宽度,最后用br{clear:left}来换行

原文地址:http://www.quirksmode.org/css/forms.html

import css OR link css

css在页面里面一般有三种引入方式
1.在页面里面直接写


2.用link进行引用

3.用import进行引用

第一种是直接在html页面上进行css书写,而第二种和第三种是采用外部引用样式单独提取文件。
问题1.到底link和@import有什么区别?
我们先来看看他们的定义
继续阅读“import css OR link css”

破解UX Magazine的自适应屏幕的三列和两列

UX Magazine.com是2006年度首届css大赛的冠军网站,呵呵既然是冠军网站肯定有他自己的特点
和得到冠军的法宝,其中一个就是采用了宽平和窄屏的两种不同显示模式,在屏幕>1024的时候采用
三列,当屏幕<1024的时候采用两列,而且设计的巧妙在于如果你不仔细观察根本发现不了它细节
上的变化,可以说利用了巧妙的css技巧让,让宽平和窄屏幕的用户都可以很好的浏览网站内容。

那么下面我们就来分析分析他是怎么做的,先来看看首页的源代码。(非常的整洁和干净)
先看头部找到关键部分:


………… …………….




………………….


…………………..


从上面的代码可以看出,整个页面引用了四个主要css:
1.uxm.base.css是整个页面的基础样式;
继续阅读“破解UX Magazine的自适应屏幕的三列和两列”