Amaze UI的一点总结

做一个微信公众号内的网页的时候,用到了Amaze UI,也称妹子UI。

官网上宣称,Amaze UI中国首个开源 HTML5 跨屏前端框架,用下来的感觉是比较类似于bootstrap,都是移动端优先。用的过程中发现一些亮点:

  1. Amaze UI 将所有元素的盒模型设置为 border-box。即:box-sizing:border-box; 把paddingborder 都计算在width当中;注意,任何情况下,margin无法计算在内,这是因为:w3c标准下,这个属性有三个取值—box-sizing: content-box|border-box|inherit;这3个属性都无法讲margin计算在内。
  2. 网格布局很不错,彻底避免了移动端款及元素需要浮动的问题。采用了12网格的布局,能满足大部分的需求。
  3. banner轮播非常好用,引入Amaze框架后,轮播的代码非常简单。
  4. Amaze的模态控件不错,模态,也就是弹出提示框。
  5. 页面顶部的不定导航做起来很方便。

作为补充,在项目中还采用了弹性盒子模型,可以实现一部分的流体布局。display:-webkit-box;只要给出相应属性,浏览器会帮我们做额外的计算。

说点感悟吧,网页可以看做现实世界的映射,有了js,可以把网页看成四维空间的。这个空间中,除了x,y二维平面外,还有z轴,即z-index属性。而在js中,又有定时器,这样,整个空间就完整了。

布局就说这么多,关键在于多做多练。

时间: 2024-10-29 04:00:14

Amaze UI的一点总结的相关文章

开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架AmazeUI对自身网站进行了重新开发.开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出来.   H5梦工场官网在PC和移动端的展示   HTML5梦工场是中国最有影响力的技术社区团队,由国内最早一批HTML5探索者和狂热拥护者发起,为广大开发者搭建一个开放.自由的互动交流平台,旨在推动HTML5在中国的应用与普及.目前,旗下的品牌活动已覆盖了近10万互联网和移动互联网行业的从业者和爱好者.

amaze UI 如何添加原生表单验证

这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是amaze的 事例太少了,导致入坑,下面把我的解决方法分享给大家 正常情况下载添加amaze验证很简单,在form 后面添加 data-am-validator form id="doc-vldX" action="" class="am-form" da

Amaze UI 发布基于jQuery新版本v2.0.0之web组件

首先Amaze Ui第一版时我收到邮件邀请去试用,去了官网看了下,是基于zepto.js的一个类似bootstrap的响应式框架,提到框架当然是好事,快速开发呗.这词2.0的弃用zepto.js改用jquery.js从善如流.虽然还与bootstrap方面有些欠缺,但web组件或许是开发移动端的同学带来灵感.毕竟封装好的10个web组件,很吸引人,但还有不少不足,如表单验证插件这些,希望借助社区的力量慢慢完善. 新的东西只有自己研究才能深入,看下源码慢慢学习吧

Amaze UI web mobile 前端框架

目录结构 index.html - 空白 HTML 模板: blog.html - 博客页面模板(预览): landing.html - Landing Page 模板(预览): login.html - 登录界面模板(预览): sidebar.html - 带边栏的文章模板(预览): 在 app.css 中编写 CSS: 在 app.js 中编写 JavaScript: 移动端首选 Zepto,桌面端选 jQuery,这应该是大多数开发者的共识.那对于跨平台的响应式网站呢? Zepto 体积小

[Amaze UI] 如何推进 mobile first 的前端 Web 方案

背景:云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点.在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡献代码,来共建中国前端开源生态环境. 由于Amaze UI目前处在内测期,我们希望能尽可能多的收集到优秀的.有建设性的反馈建议和看法,与广大优秀前端开发者共同完善Amaze UI 的功能,推动中国移动跨屏前端技术的发展.(内测地址:http://amazeui.org/landing) 下面提前跟大

云适配将推出中国首个开源 HTML5 跨屏前端框架 - Amaze UI

云适配,这是一家能以一行代码将你的网站移动化,实现网址不变且内容实时自动同步的服务提供商.云适配所采用的技术是一项基于云计算.利用html5进行网站跨屏适配,它为目标网站开发一行JS代码,并嵌入PC网站,这个JS代码通过对PC网站目标网页数据的分析和抓取,在云端完成用户当前设备的网页最佳展现方式的计算,最后在浏览器端实现html结构的重排及CSS的重新渲染,以适应移动端用户的浏览习惯. 在他们用一行代码做适配的过程中,积累了一套跨屏的前端常用网页组件,而最近,他们想把这套组件开源出来,将这套组件

有了bootstrap,为什么还要做amaze ui

一般来说,bootstrap只是对HTML增加了CSS进行美化. 而amaze ui则在bootstrap美化的基础上,主要增加JS添加了动态,以及更多样式. 例如 1 <button type="button" >basic</button>  就是常见的灰色的按钮 用bootstrap后,只需要一个css,就可以让按钮背景变成蓝色的,会漂亮很多 1 <button class="btn btn-primary" ></b

幻灯片插件FlexSlider -- Amaze UI幻灯片参数

用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' > <ul class="am-slides"> <li> <img src="http

Amaze UI 框架

Amaze UI 框架:官方网址 http://amazeui.org/ 演示地址 http://t.amazeui.org/kitchen-sink/#/ 该UI框架提供了 桌面系统WEB框架 和 移动应用WEB框架