借用 PHPCMS 设计风格开发的管理后台 UI。[GitHub][下载]
- Chrome (Mac, Windows)
- Firefox (Mac, Windows)
- Safari (Mac, Windows)
- Opera (Mac, Windows)
- IE (IE 6+)
强烈推荐安装 EditorConfig 的编辑器插件并使用当前 .editorconfig 配置编写统一风格的代码。
backstage/
├── dist/ ----------------------------------- 构建目录
│ ├── images/ ----------------------------- 已构建图片目录
│ ├── scripts/ ---------------------------- 已构建 JavaScript 脚本目录
│ ├── styles/ ----------------------------- 已构建 CSS 样式目录
│ ├── index.html -------------------------- 首页
├── images/ --------------------------------- 图片目录
├── node_modules/ --------------------------- Node.js 模块目录
│ ├── *.* --------------------------------- Node.js 模块
├── scripts/ -------------------------------- JavaScript 脚本目录
│ ├── app/ -------------------------------- Backstage JavaScript 模块目录
│ │ ├── main/ --------------------------- 各个 Page 主入口 JavaScript目录
│ │ │ ├── common.js ------------------- 主入口 JavaScript 中的通用代码
│ │ │ ├── *.js ------------------------ 主入口 JavaScript
│ │ ├── *.js ---------------------------- JavaScript 模块
│ ├── lib/ -------------------------------- 第三方 JavaScript 目录
│ │ ├── *.* ----------------------------- 第三方 JavaScript 模块
│ ├── config.js --------------------------- RequireJS 全局配置文件
├── styles/ --------------------------------- CSS 样式目录
│ ├── backstage.css ----------------------- CSS 主文件
│ ├── *.css ------------------------------- CSS 模块
│ ├── shame.css --------------------------- CSS 补丁
└── templates/ ------------------------------ 示例模版目录
│ ├── *.html ------------------------------ 示例模版文件
├── .editorconfig --------------------------- EditorConfig 编辑器插件配置文件
├── Gruntfile.js ---------------------------- Grunt 任务配置文件
├── index.html ------------------------------ 首页
├── package.json ---------------------------- Node.js 包描述文件
└── readme.md ------------------------------- 项目简介
请参考文件 templates/template.html 。
<form>
</form> <!-- / form -->
<div id="wrapper">
</div> <!-- / #wrapper -->
<div class="module">
</div> <!-- / .module -->
遵守 KSS，建立 Live StyleGuide 。
/*
[description] || Experimental: [description] || Deprecated: [description] YYYY-MM-DD
.class - [description]
:pseudo-class - [description]
Styleguide 0.0.0. || No styleguide reference.
*/
遵守 JSDoc 。
/**
* [description]
* @param {[type]} param [description]
* @return {[type]} [description]
*/
详细的标签使用建议参考 Google JavaScript Style Guide 中的 Comments 章节。
为了合理划分组件并分离内容、样式、行为，建议采用如下设计模式。
<div class="component" data-attribute="value">
<div class="component_module">
...
</div>
</div><!-- / .component -->
<div class="component component-modifier" data-attribute="value">
<div class="component_module is-state">
...
</div>
</div><!-- / .component-modifier -->
.component --------------------------------- 组件
.component_module -------------------------- 组件子模块
.component-modifier ------------------------ 组件派生类
.is-state ---------------------------------- 组件状态
.js-hook ----------------------------------- JavaScript 专属钩子
.shame-classname --------------------------- 补丁（统一放在 styles/shame.css 中，详细注释并定期修复）
由于 IE 6 不支持部分常用选择器（如：子选择器 .foo > .bar ，链式选择器 .foo.bar 等），导致无法使用 .component_module.is-state，因此采用.is-component_module-state命名约定来填补不足。
参照 Bootstrap 的 Data-API 模式。
(function($) {
// Module Public Class Definition
// ==============================
var Module = function(element, options) {
this.$element = $(element);
this.options = options;
};
Module.prototype.method = function() {
// do something...
};
// Module Default Options
Module.DEFAULTS = {
'key': 'value'
};
// Module jQuery Plugin Definition
// ===============================
var old = $.fn.module;
$.fn.module = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('module'),
options = $.extend(
{},
Module.DEFAULTS,
$this.data(),
typeof option == 'object' && option
);
if (!data) $this.data('module', (data = new Module(this, options)));
if (typeof option == 'string') data[option]();
});
};
$.fn.module.Constructor = Module;
// Module No Conflict
// ==================
$.fn.module.noConflict = function() {
$.fn.module = old;
return this;
};
// Module Data-API
// ===============
$(document).on('event.module.data-api', '[data-toggle="module"]', function(e) {
e.preventDefault();
$(this).module('method');
// do something...
});
})(jQuery);
在终端中切换至项目目录，然后根据任务运行如下命令：
-
项目初始化：
npm install0. 安装 NPM 模块 -
开发：
grunt0. 启动 Web 服务器 0. 在浏览器中打开源代码首页 0. 实时监测项目目录中的文件更新并刷新浏览器 -
构建发布版本：
grunt build0. 清空 dist 目录 0. 校验 CSS、JavaScript @todo 0. 合并压缩 CSS 模块 0. 合并压缩 JavaScript 模块 0. 复制 images 目录与 index.html 到 dist 目录 0. 启动 Web 服务器 0. 在浏览器中打开构建目录中的首页