aliceui / aliceui.github.io Goto Github PK
View Code? Open in Web Editor NEW写样式的一种方式
Home Page: http://aliceui.github.io/
License: MIT License
写样式的一种方式
Home Page: http://aliceui.github.io/
License: MIT License
th {
text-align: inherit;
}
caption, th {
text-align: left;
}
HTML 如:
<div>
<img src="" />
</div>
这种好像比较常见,希望能增加下。
迁移的 issue
body {
font:12px/1.5 tahoma,arial,Hiragino Sans GB,"Microsoft Yahei",\5b8b\4f53;
}
arial
应该都会有吧?那Microsoft Yahei
还能被应用么?
meta里写的是utf-8,但比如title里就不是
`
迁移的 issue
aralejs/aralejs.github.io#230 alice 现状和未来
.ui-label {
float: left;
width: 170px;
/margin-left: -180px;/
padding-top: 5px;
text-align: right;
font-size: 14px;
}
感觉 这个-180px 用的很突兀 和 很具体化. 是不是自己要根据自己的需求全面修改aliceui
提供的通用样式css 呢? 还是和bootstrap 主要是使用.不用自己大规模改造.
spm build 打包css文件含有@import url 失败
C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-build\node_modul
es\gulp-spm\node_modules\css-imports\index.js:27
imports(str).forEach(function(r){
^
TypeError: Cannot read property 'path' of undefined
at C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-build\nod
e_modules\gulp-spm\lib\plugin\css.js:92:27
at C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-build\nod
e_modules\gulp-spm\node_modules\css-imports\index.js:28:33
at Array.forEach (native)
at map (C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-buil
d\node_modules\gulp-spm\node_modules\css-imports\index.js:27:16)
at imports (C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-
build\node_modules\gulp-spm\node_modules\css-imports\index.js:9:18)
at transportFile (C:\Program Files (x86)\nodejs\node_modules\spm\node_module
s\spm-build\node_modules\gulp-spm\lib\plugin\css.js:68:16)
如题,问一下Alice有没有像bootstrap一样的,官方的LESS或者SASS的源码包啊?既然都是开源的,这样可以方便二次开发的扩展,求包,哈哈
curl https://raw.github.com/aliceui/stylib/master/bootstrap.sh | sh
命令运行后会在当前目录建立一个样式库文件夹 stylib,先修改 package.json 中的 family 为你注册维护的.
完全不明白其中意识... 我就想在本地做一个样式库集合, 可以吗? 把自己写的所有样式像http://aliceui.org/stylib/ 支付宝他们这样显示出来.. 求.....
配置好需要的sl 然后就可以buiding出.min 的样式文件
可能更加方便大家构建自己的应用
只是建议
原文为"子元素添加 .sl-equalheight 可以实现等高",应该属笔误。
目前我们公司使用了aliceUI的开源代码,但是这块如果网站停止维护,能否提供一个demo集合页,不然我们公司前端的一些日常的工作,就受到了一些阻碍。谢谢!
表单验证想必是前端开发者们都头疼的问题,虽然HTML5已经加入了新的标签以及属性来做表单验证(input type="email" required等等),但各浏览器的支持程度不一,验证形式也各不相同。希望能有一个通用的方式来做到跨浏览器的表单验证。
迁移的 issue
备份自原有库的 issue
在上面的链接中提到,目前在 Arale 中使用样式有两种方案。一种是使用标准的 link 标签,一种是在 JS 中 require 样式文件的方式。
其中,后一种方式由于比较对用户友好方便,成为 Alice 中的一个重要实践。目前使用了第二种方法载入样式的组件有 arale.dialog
、alipay.xbox
、alipay.poptip
,实践中发现有较为严重的冲突问题。
主要原因是支付宝的页面上已经使用了很多 ui-poptip、ui-dialog、ui-xbox 等 className ,因此这些组件的样式都和页面互相造成了冲突。
冲突主要分为两部分,一是其他样式对模块自身的影响覆盖,二是模块自身对其他样式的覆盖。
现在解决这个问题的方案是使用 classPrefix 来替换模板中的类命名空间,然后自己写样式来定义。
比如在 alipay.xbox 组件中,模板 xbox.tpl 和 样式文件 xbox.css 如下:
<div class="ui-xbox">
<div class="ui-xbox-container"></div>
</div>
.ui-xbox { ... }
.ui-xbox-container { ... }
将 classPrefix 置换为 ui-newxbox 后,模板变为了:
<div class="ui-newxbox">
<div class="ui-newxbox-container"></div>
</div>
这样页面上的 ui-xbox 类就不会再影响我们的结构了。第一个问题的解决方案是能解决问题但比较麻烦的,这个方案更大的用途是用来做自定义的样式。
这个问题是本 issue 主要要解决的问题。 继续看上面的例子:
.ui-xbox { ... }
.ui-xbox-container { ... }
无论 classPrefix 是否自定义,这段样式始终会通过 importStyle 的方式载入,也就有可能对页面上的其他 ui-xbox 产生冲突。
importStyle('.ui-xbox{...};.ui-xbox-containter{...}');
要解决这个问题,目前想到的有以下几个方案:
当 classPrefix 自定义时,说明开发者不再需要使用默认样式,需要自己写相关样式,就不再载入 xbox.css 。
方案缺点:当用户需要避免自身模块对页面其他地方冲突时,必须自定义 classPrefix 。
统一使用 ai-
开头代替目前的 ui-
前缀,规避这个问题。
方案缺点:没有实际解决问题,未来的冲突还可能存在,特别是同一组件的不同版本的问题。
在 spm 打包时,把样式中的类的主要名称全部替换成 classPrefix 的默认值。比如上面的 xbox.css,假设 classPrefix 为 alipay-xbox,将会被替换成:
.alipay-xbox-1_0_0 { ... }
.alipay-xbox-1_0_0-container { ... }
就是将所有的 ui-xbox
替换成 alipay-xbox-1_0_0
这样 family、name 和版本的集合,同时也需要修改相应的模板。这样生成的奇异的默认样式就基本上不会和已有的样式产生冲突,并且不同版本之间也会有隔离。
方案缺点:对样式书写有一定要求。而且替换的 ui-xbox 和被替换的 alipay-xbox 分别用什么方式进行指定还不清楚。
综上,方案 3 是我们(我)比较中意的方案,但也有很多问题要解决。希望尽快解决这个问题,并将在 spm2 进行实现。
或者大家有没有什么更好的方案?
@fool2fish @leoner @lepture @lifesinger @popomore @shaoshuai0102 @noahlu
package.json 配置 styleBox 会支持此功能
"spm": {
"styleBox": true
}
spm build
会有两方面的处理
这部分样式会打包进来,并添加前缀,其他样式不处理。
define(function(require, exports, module) {
require('./xbox.css');
});
转换成
define('alipay/xbox/1.0.0/xbox', [..., './xbox.css'], function(require, exports, module) {
require('./xbox.css');
});
define('alipay/xbox/1.0.0/xbox.css', [], function() {
seajs.importStyle('.alipay-xbox-1_0_0 .ui-xbox{} ...');
});
会处理所有的 js 脚本,在下方如下添加
define('alipay/xbox/1.0.0/xbox', [..., './xbox.css'], function(require, exports, module) {
require('./xbox.css');
module.exports.outerBoxClass = "alipay-xbox-1_0_0";
});
如果组件存在 outerBoxClass,在生成 element 的时候会生成一个 outerBox
<div class="alipay-xbox-1_0_0">
<div class="ui-box"></div> // <= 这是 element
</div>
感觉arale也应该有分页这个组件,但是没找到。
/* 简单的渐变 */
.fn-linear {
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1));
background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1');
background:-o-linear-gradient(top, #fcfcfc, #f1f1f1);
background: linear-gradient(top, #fcfcfc, #f1f1f1);
}
IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器支持w3c写法
最后一个应该改为 background: linear-gradient(to bottom, #fcfcfc, #f1f1f1);
http://aliceui.org/grid/iframe-readme-5.html
ie7下没有间距了。。。
Alice solutions 的vim插件,当展开sl-file时,html.snippets中的sl-file-input前面多了一个"."
我记得原来有初始化样式库的脚本的,删了?
生成类似这样的页面 http://aliceui.org/docs/widget.html
alice grid 页面http://aliceui.org/grid/iframe-readme-1.html ,在IE7下的margin崩溃以及iconfont在firefox下乱码你们没有解决吗?咨询一下官方的解决方案。
如题
这个页面http://aliceui.org/docs/framework.html
http://assets.spmjs.org/alice/grid/1.0.0/grid.css Failed to load resource: net::ERR_NAME_RESOLUTION_FAILED
http://assets.spmjs.org/alice/animate/1.0.0/animate.css Failed to load resource: net::ERR_NAME_RESOLUTION_FAILED
导致http://aliceui.org/docs/framework.html#css3-animate 这个位置的两个demo动画展示不了
在Alice/base.css中有一下css定义
/* 去除默认边框 */
fieldset,img,a img{
border:0;
}
请问后面第三个选择器 a img 是出于什么考虑?img 不是也能将 a下面的img 选中了?
-一般提问在哪里?初次使用GitHub
我现在一直在做这方面的工作,忽然在微博看到alice,感觉挺激动的,想参与一下!但有些疑问。是自己要建仓吗?
没有 demo,只有一个 raw css。没有任何说明。另外,这个东西是开源还是内部使用?
修改了src目录下面css文件的内容,在访问http://127.0.0.1:8000没什么变化。
构建项目的步骤如下
<div class=" ui-dialog">
aa
</div>
3.spm doc watch
4.访问127.0.0.1:8000发现ui-dialog的样式并没有展现出来
原文如下:
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
display:block;
}
但根据我查询资料,以及在各大浏览器测试(IE6-9,FF11,S5,O11,CH17)下均为行内表现,
不过display:block;确实可以解决iframe在html5的doctype下的一个小问题,详见:
https://github.com/niceue/Nice/blob/master/src/normal.css 中关于iframe的说明
测试:https://github.com/niceue/Nice/tree/master/src/test/iframe
最后说明下:Nice是我个人最近才上传的项目,但是已经经过了无数次的测试与修改,包含一些基础样式库,很多代码都是经过两年开发中的兼容测试经验的总结。
Alice是个不错的项目,希望能够互相汲取经验,为前端做出贡献
我看到base.css里面中关于浮动相关的类用了fn作为前缀。想知道为什么。
Uncaught TypeError: Object # has no method 'importStyle'
建议在 html
标签中,添加 overflow-y: scroll
,以避免页面从初始的没有滚动条到产生滚动条而产生的页面抖动。谢谢!
如题。
我执行$ curl https://raw.github.com/aliceui/stylib/master/bootstrap.sh | sh命令之后,并没有产生stylib目录。提示除了Time spend 是4、5秒以外,其他全是0,为什么呢?望解答,谢谢。
备份自原有库的 issue
第24行到32行:
/* 预设左右位置 */
.iconfont-right {
margin-left:0;
margin-right:4px;
}
.iconfont-right {
margin-right:0;
margin-left:4px;
}
两个类的名称重复了,我估计是有一个写错了
(待偏右整理,需要至少包括两块:1、Q3 规划中的做的事情,时间点和里程碑。2、现有的 issues 梳理。)
IE7 button的padding,有bug。
处于显示状态的button可以有更多的样式来表现。
貌似spm只能一个模块一个模块的下载
如题,在使用Crunch编译base.less的时候报了一个语法错误:
Compiler Errors
Syntax Error on line 32 (Line: 32)
看了一下,是这段代码出错了
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{
font:12px/1.5 tahoma,arial,\5b8b\4f53;
}
在less中/
表示的是一个运算符,看lesscss.net 中有避免编译这一节,所以就将上面的代码改了一下:
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{
font:~'12px/1.5 tahoma,arial,\5b8b\4f53';
}
这样子就不会出现Syntax Error
这个错误了。
问题:有没有其它的方案可以解决这种需要反编译的符号?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.