doyoe / yo Goto Github PK

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

JavaScript 75.44% HTML 2.03% SCSS 22.53%

css scss es6 react frontend-framework scss-framework ui-components mobile-first mobile-web mobile-app

yo's Introduction

Yo

Yo 是一个纯粹的移动前端开发框架，专注为移动应用提供快速且专业的构建方式；她轻量，易用，可配置，并且具备超强的扩展能力。

v3 版本是 Yo 的一个新里程碑，我们将加入丰富的UI组件，让构建移动应用变得更简单。如果你对之前的 Yo 恋恋不舍，只想使用她的样式，v3及后续版本 仍然会满足，你只需要保持和之前的版本一样安装和使用即可，我们提供了与之对应的 pure 版本。

下面的内容可以帮你更好的了解 Yo：

简介
起步
浏览器支持
注意
实例和文档
版本
问题及反馈
作者
版权和许可

简介

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

起步

根据起步说明了解 Yo 的工作原理并开始构建标准的 Yo 项目；

浏览器支持

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

注意

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 平台上，这个设定可能需要一个适应的过程，但可以肯定的是，你一定会喜欢上它。

flex布局

为了让你的 flex 布局可以正常工作，请检查 flex子项 是否为块级元素（可以显式的通过 display 来定义），在较老的平台及浏览器上，如果 flex子项 是行内级元素，flex 布局将会解析错误。

实例和文档

如果你想在本地构建 Yo 的文档，只需要：

安装 ydoc：npm install ydoc -g --registry=https://registry.npm.taobao.org
在项目根目录下执行：ydoc build

此时，文档将会默认生成到 doc 目录下。

线上默认提供的只是最新版本的文档，如果你正在使用过往版本，则可以按照这种方式直接生成本地文档。

版本

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

你可以在 releases tag 中找到当前所有已发布的稳定版本。如想查看更多版本变更历史，请查看 ChangeLog

问题及反馈

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

作者

杜瑶

YMFE Team

https://github.com/YMFE

版本和许可

源码和文档版权属于 Yo 的所有开发者。源码发布基于 the MIT license 开源协议。文档发布基于 Creative Commons 开源协议。

yo's People

Contributors

Stargazers

Watchers

Forkers

zorayoyo sdtm1016 xiaoxian006 shirlyfe echolee0000 guhuina wyysf jsonxu horve shiyingxyl zypaul qiangck 14686039 740521985 jesse-he guozhiling sunorry arguseye xiaoweidotnet eonezhang blackmans achillesz xm94630 tonyxy wang508x102 lldddd sunbest imvvk zhilianbi520 xiaohan2013 mrkou47 haigecao lisongyu guyueyuqi sunriseshow vxzhong edwonlim cheung1984 zhanzhicai2 halfdogstudio ymfe wanghongyan panxuelin love-yoyo oxb0319 rainylengend lfaith youkuvip xuzicn jerroldlee yumeng819 iltsvm htmlk abunuo ipetu chping2125 86cyc86 pagnkelly style80 leolau2012 wj525863 autismtunestreet lanjingling0510 xuweiwei2011 ls-master wwzzss midday changguo so94so fengqingyang800 gogoyqj luckyyhf songxtianx yumengjiao jakexu xbf321 yafxe xyeig ellery0924 chandayang schacker qingguoing yizer cheau zhangcai93 owen1190 izhidao leonsux phamthanhhoan1 smilemilk meier1993 inier h5chaipeng lozoe gavinkings lguangyan pollux0508 joyplayground wangjiafenghw fe-admin

yo's Issues

未找到的依赖项

"@qnpm/ykit-config-hy": "0.1.0",
"@qnpm/ykit-config-qunar": "0.1.0",

yo太过依赖ykit

yo太过依赖ykit，想使用yo 和webpack 结合非常困难

  "yo": {
        "path": "./src/yo-config"
    },

1px border 显示不完整

自己在用yo框架的时候，经常出现1px不显示或者显示不完整的情况，有时候是因为margin元素影响，有时候是因为行内元素影响，自己不明白是因为什么问题导致的，想问一下使用1px边线时有什么需要规避的属性或者布局方式吗？谢谢了

yo-search元件`input-height`参数失效

yo-search元件同名方法中的 input-height 参数设置无效，当传入 input-height 参数时，只改变了 yo-search 的行高，但是输入框的高度并没有进行对应的变化

dpi＝3的时候，1px边框显示不对。

应该是sass没有处理'/'为除法
-webkit-transform: scale(1/3);
transform: scale(1/3);

@mixin border方法在某些低版本安卓机上一列上多个元素有边框的情况下边框显示不全

原因是某些低版本安卓机浏览器对等分时的元素宽度四舍五入不一样，造成边框显示不全，可以考虑加入一个参数以处理多边框情况

/**
 * @module 背景与边框
 * @description 为元素添加边框（包括1px边框）
 * @method border
 * @version 2.0.0
 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>
 * @param {String} $border-color 指定边框颜色 <2.0.0>
 * @param {String} $border-style 指定边框样式 <2.0.0>
 * @param {String} $radius 指定边框圆角半径，默认值：null <2.0.0>
 * @param {String} $width-percent 指定宽度百分比，默认值：100% (安卓低版本下多边框显示不全)
 */
@mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null, $width-percent: 100%) {
    // 为边框位置提供定位参考
    position: relative;
    @if $border-width == null {
        $border-width: 0;
    }
    border-radius: $radius;
    &::after {
        // 用以解决边框layer遮盖内容
        pointer-events: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        overflow: hidden;
        content: "\0020";
        border-color: $border-color;
        border-style: $border-style;
        border-width: $border-width;
        // 适配dpr进行缩放
        @include responsive(retina1x) {
            width: $width-percent;
            height: 100%;
            @if $radius != null {
                border-radius: $radius;
            }
        }
        @include responsive(retina2x) {
            width: $width-percent * 2;
            height: 200%;
            @include transform(scale(0.5));
            @if $radius != null {
                border-radius: $radius * 2;
            }
        }
        @include responsive(retina3x) {
            width: $width-percent * 3;
            height: 300%;
            @include transform(scale(0.33333));
            @if $radius != null {
                border-radius: $radius * 3;
            }
        }
        @include transform-origin(0 0);
    }
}

UI库特点

这里除了提供scss源码给开发者自己做，好像没其他的亮点啊，很多其它UI库也都有scss或less源码的

Yo的合作伙伴

如果你或你的公司正在使用 Yo，可以在后面回复，我会将你们公司的LOGO加到用户列表里

yo-list background-position 值的问题

目前 .yo-list > .item 的 background-position 值一般为 left <length> bottom，这种“方向+距离”的写法在微信安卓 webview （qq 浏览器 x5 内核）中失效。建议改为 [ [ left | right ] | <length> ] [ [ top | bottom] | <length> ] 这种写法。

比如：

background-position: left map-get($list, item-border-space) bottom;

修正为：

background-position: map-get($list, item-border-space) bottom;

基于webpack+vue使用yo 不知道为什么样式不能生产代码如下

<template lang="pug">
    header.ao-header(:class="{'ao-fixed':fixed}")
        h2.title(v-text="title")
        span.regret
            slot(name="left")
        span.affirm
            slot(name="right")
</template>

<script>
export default {
  name: 'ay-header',

  props: {
    fixed: Boolean,
    title: String
  }
}
</script>

<style lang="scss">
@import "../../../../styles/usage/core/reset";
@import "../../../../styles/usage/fragment/yo-header";

.ao-header{
  @include yo-header(
    $bgcolor:#FF5523,
    $border-color:#FF5523
  )
}
</style>

.ao-header 这个样式根本不产出请问我是哪里用错了呢

示例在手机浏览器加载不了列表和详情页

1、windows上搭建的node环境，ykit init yo 然后ykit server 的示例。list和detail无法异步加载。
2、能不能把http://ued.qunar.com/hy2/yo/demo开源出来
thanks!

关于初学者的求助 : )

之前有过基础的div+css+js/jquery+html5的开发过程，现在想跟你学习一下这个Yo框架，但是不知道何从下手

移除 align() mixin 的 type 参数

在当前的 align() mixin 中，集成了对文本和图片的处理。当传入的 type 值是 text 时，将会对文本进行遇到边界换行处理；当传入的 type 值是 image 时，将会对图片进行最大宽度和高度的边界处理；当 type 缺省时，不对文本和图片进行处理。

这和 align() 的意图不太相符，所以将移除 type 参数。对于文本和图片的这些处理，需要另行定义

怎样用@include border 写一条边框？

我看到border的参数并没有规定写那条边框，我要怎么实现使用border 只写div的上边框啊

$tip

初学yo，使用yo-tip时报下面的错误，没找到$zip变量，我也没发现在哪里，请教。
Message:
src\styles\lib\widget\yo-tip.scss
Error: Undefined variable: "$tip".
on line 9 of src/styles/lib/widget/yo-tip.scss

padding: map-get($tip, padding);
---------------------^

mac os 下安装失败
AaronYuan@yuanxujiadeMacBook-Pro:~/Documents/Working/Practice/Yo⚡
⇒ npm install
npm WARN package.json yo@ No license field.
npm WARN deprecated [email protected]: Empty partial bug copied to CSS folder fixed
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.6
npm ERR! npm v2.12.1

npm ERR! shasum check failed for /var/folders/x4/1f8vm8p550d67vd4lhdnpd180000gn/T/npm-18438-b1550815/registry.npmjs.org/node-notifier/-/node-notifier-4.2.3.tgz
npm ERR! Expected: 18ce4e6117980e23699b7595b68233cd37483fbf
npm ERR! Actual: fb9cd807f7db221a16649f3f65dc028079fa538a
npm ERR! From: https://registry.npmjs.org/node-notifier/-/node-notifier-4.2.3.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/AaronYuan/Documents/Working/Practice/Yo/npm-debug.log

node,gulp,gem都是全局安装好的，所以直接在yo目录下执行npm install 结果报错了，求支援，谢谢

vue单文件组件里写@include报错啊

`$ npm run dev

[email protected] dev D:\vue-demo
node build/dev-server.js

Starting dev server...
ERROR Failed to compile with 2 errors17:51:02

error in ./src/components/Login.vue

Module build failed:
@include flexbox();
^
No mixin named flexbox
`

能支持extraClass,方便使用者控制样式。目前dom建在body下，无法通过样式做差异化控制
content最好能支持 html标签

用dialog有点小题大作,还需要额外state控制

Yo有@types文件吗？

目前技术栈为react+typescript 不知yo是否有@types文件？
在我看来yo和antd很像都是基于react的组件库，只是antd是typescript写的..

希望yo也能抓紧推出@types文件