Yo 0,0,3,0 Bower gulp npm

Lightweight, easy-to-use, configurable, and extensible mobile front-end development framework.

Yo

master 分支为 Yo v3.0.0 开发版本

Yo 是基于 Mobile First 的策略而设计,并使用 Sass 开发的 CSS Framework,具备轻量,易用,可配置,强扩展等特性,同时也适应于PC端的高级浏览器。

在使用之前,请先确保你的机器有能够编译 Sass 的环境并开始去了解一些 Sass 相关的知识(当然,这非常简单)。

与其它框架不同的是,实际上我们并不计划对外提供打包好的 yo.min.css 来供使用,而是推荐直接在 Yousage 目录下进行开发。这样你将能体会到 Yo 的众多功能和方法为开发所带来的便利,并感受到它的魅力。

好了,请仔细看下面的步骤,这可以帮你快速搞定一切:

内容

环境搭建

基础环境

请确保你已经安装过下述环境:

  • Bower
  • Node.js
  • npm

使用gulp构建

  • 安装: bower install yo
  • 安装gulp: npm install gulp -g --registry=https://registry.npm.taobao.org
  • 安装依赖: npm install --registry=https://registry.npm.taobao.org
  • 在Yo根目录下运行:
    • gulp watch: 如果你想监听所有文件的变更
    • gulp build: 如果你只是想build一次该项目

如何开始

通过上述的 环境搭建Yo 就已经可以在你的机器上跑起来了,在 Yo 根目录下运行 gulp test,会在 usage/test 目录生成一个 test.css,这表示一切OK(当然,项目中你可以将test文件夹移除)。

工程约束

真正的编码之前,先看一下 Yo 的目录结构是非常重要的,这有助于理解并更好的使用它:

  • lib 目录是 Yo 框架的底层代码,不要改动它,避免日后升级时遇到麻烦;
  • usage 目录正是你的舞台,在这做业务的样式编码;
    • usage/core 目录下的都是配置文件,比如你想改变某些设定的初始值;
    • 需要编译使用的文件(一般来说都是page级别的文件),放在 usage/page 目录下,编译后,会输出到 usage/export 目录;
    • usage 下的其它目录和 lib 里的目录一一对应,用于放置扩展文件;

示例代码

我们可以开始真正的使用 Yo 来进行编码了,下面将会展示一段最简单的代码,我们要做一个列表页,其对应的样式表文件为:list.scss

@charset "utf-8";
@import "../core/reset";
@import "../fragment/yo-flex";
@import "../fragment/yo-header";
@import "../element/yo-list";

// 下面这段模块化的代码,请新建一个 `m-xxx` 的文件并将代码移过去,然后 `@import` 到这里
// 为了方便演示,所以下述代码直接写在了这里
.m-xxx {
    // 由于这里所需要的`list`和默认展示不同,所以使用 `yo-list` 进行扩展
    @include yo-list(
        $margin: .1rem,
        $border-width: 1px,
        $border-color: #ccc,
        $radius: .1rem
    );
}

首先,我们将 reset 引入 list.scss,这是必须的;该列表页由一个 yo-headeryo-list 组成,于是引入与之相关的2个元件;同时,我们想要使用 flex 布局,所以引入了 yo-flex 元件。

在页面上请使用 list.scss 编译后的 list.css 文件。

注意

Yo 做了一些全局的定义,这些定义也让设计变得意思。

文档模式

为了能够让你的样式得到完整的解析,我们推荐你使用 HTML5 doctype

<!DOCTYPE html>

视窗viewport

Yo 采用 Mobile First 的策略设计,首先要保证移动设备上的体验,至于不同的终端,可以配合 响应式 来做适配:

<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

如果应用需要考虑手动缩放的情况,可以将 maximum-scale=1, user-scalable=no 移除;但不建议移除 minimum-scale=1,因为页面可能会被缩小到难以阅读的程度。

单位

Yo 约束了2种项目所使用的长度单位

  • 所有涉及到 border 的长度单位都是用 px
  • border 外,所有的长度设置都是用 rem 单位;

盒模型

为了让计算变得简单,我们改变了所有元素的盒模型,将其重置为 border-box。当然,也包括常用的伪元素 ::before::after

*,
::before,
::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

如果你长时间工作在 PC 平台上,这个设定可能需要一个适应的过程,但可以肯定的是,你一定会喜欢上它。

浏览器支持

  • iOS6.0+
  • Android4.0+
  • Latest Stable: Chrome, Safari, Opera, IE10+

实例和文档

版本

Yo 的版本方针遵循 SemVer 规范,版本号采用 主版本号.次版本号.修订号 的格式。版本发布周期是透明的,并尽可能保证向前向后兼容,您可以根据我们的语义化版本方针进行版本控制。

master 分支为开发版本,稳定版本都发布在 releases tag 中。

最新稳定版: v2.1.4

开发中版本: v2.1.5

如想查看更多版本变更历史,请查看 ChangeLog

问题及反馈

如果您的项目正在使用Yo,过程中发现了任何问题,或者有任何帮助Yo更完善的想法和建议,请直接给我提IssuesPull Requests

作者

杜瑶,我目前居住在北京,就职于 Qunar,您可以在 Github 或者 Weibo 看到我的最近动态。当然,也可以通过我的个人站点,博客:CSS探索之旅CSS参考手册Web前端实验室 等信息了解更多。

版本和许可

源码和文档版权属于 doyoe.com。源码发布基于 the MIT license 开源协议。文档发布基于 Creative Commons 开源协议。

Related Repositories

yo

yo

CLI tool for running Yeoman generators ...

wbench

wbench

It benchmarks websites, YO! ...

flixel

flixel

flixel is a free Actionscript (Flash) library that I distilled from a variety of Flash games that I've worked on over the last couple years, including Gravity Hook, Fathom and Canabalt. It's primary function is to provide some useful base classes that yo ...

yo-yo

yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals ...

generator-hottowel

generator-hottowel

Yo generator that creates an Angular app via HotTowel ...


Top Contributors

doyoe EdwonLim

Dependencies

package version
babel-polyfill ^6.9.1
classnames ^2.2.5
copy-dir ^0.3.0
lodash ^4.16.4
normalize-path ^2.0.1
prop-types ^15.5.10
react ^15.3.0
react-addons-css-transition-group ^15.3.1
react-addons-pure-render-mixin ^15.3.1
react-addons-shallow-compare ^15.3.1
react-dom ^15.3.0
react-tap-event-plugin ^2.0.0
dev babel-core ^6.10.4
babel-eslint ^7.0.0
babel-jest ^19.0.0
babel-loader ^6.2.4
babel-preset-es2015 ^6.9.0
babel-preset-react ^6.11.1
babel-preset-stage-0 ^6.5.0
classnames ^2.2.5
css-loader ^0.23.1
enzyme ^2.7.1
eslint ^2.9.0
eslint-config-airbnb ^9.0.1
eslint-plugin-import ^1.8.0
eslint-plugin-jsx-a11y ^1.2.0
eslint-plugin-react ^5.2.2
ghooks ^1.3.2
gulp 3.9.0
gulp-connect ^4.0.0
gulp-plumber 1.0.1
gulp-ruby-sass ^2.0.6
gulp-sass-china 2.3.1
gulp-util 3.0.6
immutable ^3.8.1
jest ^19.0.2
node-notifier 4.2.3
node-sass 3.8.0
node-sass-import-once ^1.2.0
optimist ^0.6.1
react-addons-test-utils ^15.4.2
regenerator-runtime ^0.10.3
rmdir-recursive 0.0.1
sass-loader ^4.0.0
style-loader ^0.13.1
through2 2.0.0
validate-commit-msg ^2.12.2
webpack ^1.13.1

Releases

-   v2.1.4 zip tar
-   v2.1.3 zip tar
-   v2.1.2 zip tar
-   v2.1.1 zip tar
-   v2.1.0 zip tar
-   v2.0.0 zip tar
-   v1.8.7 zip tar
-   v1.8.6 zip tar
-   v1.8.5 zip tar
-   v1.8.4 zip tar
-   v1.8.3 zip tar
-   v1.8.2 zip tar
-   v1.8.1 zip tar
-   v1.8.0 zip tar
-   v1.7.0 zip tar
-   v1.6.0 zip tar
-   v1.5.0 zip tar
-   v1.4.0 zip tar
-   v1.3.1 zip tar
-   v1.2.0 zip tar
-   v1.1.0 zip tar
-   v1.0.0 zip tar