一个好的CSS框架--YAML

YAML 

官方网址： http://www.yaml.de/

它是一个开源的模块化的CSS框架，完全支持当前主流的浏览器，能很好的实现跨浏览器页面设计。主要分为三个模块：布局模块（Layout）、表单模块(Form)、基本元素模块（Typography）。当前版本4.0.1，可在这里下载。

主要特征：

1、灵活实用的布局设计（ym-wrapper, ym-grid）

2、灵活方便的form元素css集，可定制元素的颜色样式。

3、致力于网页设计的标准化和统一兼容。

4、优化了各标准元素的样式。（table、h*、a等）

5、用了样式名空间，避免冲突。如（ym-grid）;

6、能很好的适应HTML5和CSS3；

7、代码核心小巧优雅。

当前支持的浏览器：

• Latest Google Chrome
• Mozilla Firefox 3.6+
• Opera 10+
• Apple Safari 4+
• Internet Explorer 6+

下面主要讲一下它的主要元素：

• 布局相关的 ym-wrapper  ym-grid
• 表单相关的 ym-form
• 基本元素     typography.css
  

1、布局相关样式

yaml的布局有一个共同的特点，就是一个父类元素负责css box的宽度和高度，内部用 ym-*box来指定该区域的margin和padding。

A） ym-wrapper

ym-wrapper     该样式主要指定页面整体的宽度和高度，是一个全局容器样式，用于页面的全局整体设计。

ym-wbox           该样式主要负责ym-wrapper指定区域内的边框距离和填充。 margin， padding相关。

yaml提供的已经设计好的布局方式主要有下面几个：

yaml/screen/screen-PAGE-layout.css    这是一个内容主要在中间区域的布局方式，见下图左侧；

yaml/screen/screen-FULLPAGE-layout.css   这是一个全页面的布局方式，见下图右侧；

yaml/screen/grid-960-16.css        这是yaml兼容当前流行的另一个css框架960 grid system 的 container_16 的样式。

yaml/screen/grid-960-12.css       这是yaml兼容当前流行的另一个css框架960 grid system的 container_12 的样式。

 当然，框架提供的默认实现不满足你的需求的话，可以自己override已经提供的样式。

布局效果图如下：

 

B) ym-grid

ym-grid    这个样式是用在ym-wrapper内部的布局样式，是一个内部容器样式。它通常表示区域宽度占用100%；

ym-g*      这里的ym-g* 表示 ym-g20, ym-g25, ym-g33,ym-g50等所有ym-g百分比长度的ym-grid内部的长度布局容器。

ym-gbox   这个样式是用来指定在ym-grid容器及子容器内的margin和padding的样式。

用法和效果图如下：

<div class="ym-grid">
  <div class="ym-g50 ym-gl">
    <div class="ym-gbox">
      <!-- content -->
      ...
    </div>
  </div>
  <div class="ym-g50 ym-gr">
    <div class="ym-gbox">
     <!-- content -->
     ...
    </div>
  </div>
</div>

我们这里只是总结性介绍，更详细的用法和规则，参看 官网document。

2、表单元素相关样式

ym-form           这是yaml针对表单元素样式的容器样式，主要设定form相关的样式。

ym-fbox-text    这是ym-form的一个子样式，用来指定form表单中的<input type="text" />和<textarea></textarea>元素的样式。

ym-fbox-select 这是ym-form的一个子样式，用来指定form表单中的<select>元素的样式。

ym-fbox-check  这是ym-form的一个子样式，用来指定form表单中的<input type="radio" /> 和 <input type="checkbox" />元素的样式。

ym-fbox-button  这是ym-form的一个子样式，用来指定form表单中的<input type="button" /> 和 <input type="submit" />等元素的样式。

这是演示代码和效果图：

<form class="ym-form">
  <div class="ym-grid">
    <div class="ym-g50 ym-gl">
      <div class="ym-gbox ym-fbox-select">
        <label for="select-1">Select Field</label>
        <select name="select-1" id="select-1" size="1"> ... </select>
      </div>
      ...
    </div>
    <div class="ym-g50 ym-gl">
      <div class="ym-gbox ym-fbox-text">
        <label for="input-1">Input Field</label>
	      <input type="text" name="input-1" id="input-1"/>
        ...
      </div>
    </div>
  </div>
</form>

3、 基本元素样式

基本样式没用使用ym-作为前缀的名空间，而是直接命名的。主要包括：

table相关的样式  .bordertable  .narrow

box相关的样式   .box        .info      .warning     .error

h1~ h7 , 以及 a 相关的样式，具体内容参看 typography.css。

下面展示一下效果图：

至此基本的框架中基本常用的css样式已讲完，我们只是总结性的讲解一下，需要具体细节的可以参看官网文档。

http://www.yaml.de/docs/index.html

最后欣赏一下，它的几个demo主页设计：

网址分别为：

http://www.yaml.de/demos/flexible-grid.html

http://www.yaml.de/demos/flexible-columns.html

http://www.yaml.de/demos/custom-grid.html

http://www.yaml.de/demos/rtl-support.html