七、制作主题（七） UI guidelines for theme authors

本文介绍了推荐的编码、HMTL标记格式、CSS，有助于你的主题的组织。

General Guidelines

Browser Testing

应该在下面浏览器中都进行测试。

  • Microsoft Internet Explorer
  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Opera

File Names

  • 包含文件使用下划线做为前缀
  • .cshtml,HTML,CSS文件应该用camel命名方法

HTML doctype Directive

使用html5文档类型声明

<!DOCTYPE html>

HTML Elements

Orchard假设使用html5,下面列出了html5常用的标签

  • <section>
  • <article>
  • <aside>
  • <hgroup>
  • <header>
  • <footer>
  • <nav>
  • <figure>
  • <figcaption>
<figure>
      <video src="tgif.vid"></video>
      <figcaption>Example</figcaption>
</figure>

 

JavaScript and jQuery

Orchard内置了JQuery。

 

Images

使用适当的图片格式：

  • Photos and gradients should use the jpeg format.
  • Graphical elements should use the png format.
  • Use alpha transparency via the 24-bit png format.
  • Use sprites where possible to improve load time and to reduce the number of requests made to the server.

 

Accessibility

Your HTML and CSS templates should pass the accessibility tests provided by Wave the web accessibility evaluation tool. Your templates should satisfy the requirements of WCAG 2.0 level AA.

Markup Validation

We recommend that you always strive for standards compliance. Ensure that your templates pass validation by using the W3C Markup Validation Service.

 

CSS Organization

To help you abide by the CSS standards, keep the following guidelines in mind:

  • Do not use workarounds like conditional if statements in stylesheets.
  • CSS markup should be valid CSS 2.1 or higher. You can also use optional progressively enhanced CSS 3 markup.

CSS Format Rules

The following list contains guidelines for formatting CSS markup.

  • 使用4个空格缩进
  • Use a hyphen (-) between words in selectors.
  • 移除不能使用的选择器 (except for reset styles).
  • 颜色定义使用小写
  • Use shorthand notation where possible, such as for color codes; use collapsed properties when practical.
  • 尽可能用ID替换class. Using IDs for template elements makes it easy to identify the important selectors in CSS and HTML.
  • 每行定义一个属性
  • Use "tab-nested" selectors. For more information, see CSS DIY Organization.

CSS File Structure

  1. Info - 一个解析部分，与作者、网页、任何版权等的信息
  2. Color Palette - A commented section that defines the overall color scheme for the theme. It provides a single place to define colors and makes it easy for users to find, replace, and modify color definitions.
  3. Reset - Definitions that are used to normalize settings across browsers.
  4. Clearing Floats - Definitions that are used to clear parent items that contain children that float.
  5. Typography - (Optional) Contains CSS code or a reference to a typography reset framework (such as YUI Fonts) that normalizes font sizes across browsers.
  6. General - Definitions for global HTML elements such as <body>, headings, links, and any other elements where you want to apply a different style and override the reset. This can include styles for elements like <ul>, <p>, etc.
  7. Structure - Layout definitions for major structural components of your templates, such as containers, headers, footers, etc. This section can be subdivided with comments into sections such as navigation, header, etc.
  8. Main - Main styles related to your theme. This can contain definitions for blog posts, tags, etc.
  9. Secondary - Secondary styles related to your theme for things like stylized text, errors, etc.
  10. Forms - All styling related to form items.
  11. Misc - Miscellaneous definitions that are needed to render the look of your template.

 

Typography

使用相对字体大小和设置一个基本的大小确保能跨浏览器。

记住相对大小是渐增的。例如：设置一个div为2em，然后你嵌入一个div,再在这个div里嵌入一个div,这样最内层的div将是8em。

下面列举了能增强可读性的方法

  • 方法1：使用em，在body元素上设置基本字体大小。所有浏览器的默认字体大小是16px，首先，降低全部元素字体大小，在body元素上设置62.5%.
  • 方法2：使用framework，如YUI
posted @ 2012-03-23 17:38  commanderss  阅读(349)  评论(0)  编辑  收藏  举报