妹子ui看起来很不错，以为在rails里面添加自定义的css和js和平时一样，结果可想而知，不过弄完以后发现还是比较简单的，这里记录一下
妹子ui需要加载的css和js如下
http://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.css http://cdn.amazeui.org/amazeui/2.2.0/css/amazeui.min.css http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.js http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.min.js http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.js http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.legacy.min.js http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.js http://cdn.amazeui.org/amazeui/2.2.0/js/amazeui.widgets.helper.min.js
一个css，3个js
rails4里面有个个asset pipeline，大概是用来压缩css，js等等，提升速度的，具体可以看下http://guides.ruby-china.org/asset_pipeline.html#manifest-files-and-directives
rails程序会默认加载三个路径的资源
app/assets lib/assets vendor/assets
妹子ui是妹子公司出的，就放vendor了
贴一下路径，大概是
└── vendor └── assets ├── amazeUI │ └── assets │ ├── css │ │ ├── admin.css │ │ ├── amazeui.css │ │ ├── amazeui.flat.css │ │ ├── amazeui.flat.min.css │ │ ├── amazeui.min.css │ │ └── app.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── i │ │ ├── app-icon72x72@2x.png │ │ ├── examples │ │ │ ├── admin-chrome.png │ │ │ ├── admin-firefox.png │ │ │ ├── admin-ie.png │ │ │ ├── admin-opera.png │ │ │ ├── admin-safari.png │ │ │ ├── adminPage.png │ │ │ ├── blogPage.png │ │ │ ├── landing.png │ │ │ ├── landingPage.png │ │ │ ├── loginPage.png │ │ │ └── sidebarPage.png │ │ ├── favicon.png │ │ └── startup-640x1096.png │ └── js │ ├── amazeui.js │ ├── amazeui.legacy.js │ ├── amazeui.legacy.min.js │ ├── amazeui.min.js │ ├── amazeui.widgets.helper.js │ ├── amazeui.widgets.helper.min.js │ ├── app.js │ ├── handlebars.min.js │ ├── jquery.min.js │ └── polyfill │ ├── rem.min.js │ └── respond.min.js
在页面加载显示，有两种模式，
1，全局加载
在app/assets的application.js里面添加
//= require assets/js/amazeui //= require assets/js/amazeui.legacy //= require assets/js/amazeui.widgets.helper
application.css添加
*= require assets/css/amazeui
在你的view，xxx.erb里面添加全局加载
<%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %>
然后就可以直接用了
2，根据controller独立加载
在app的js目录添加controller名字，我的是admin.js
//= require assets/js/amazeui //= require assets/js/amazeui.legacy //= require assets/js/amazeui.widgets.helper
css目录添加admin.css
/* *= require assets/css/amazeui */
自己的view，xxx.erb
<html>
<head>
<%= javascript_include_tag params[:admin] %>
</head>
<body>
<div data-am-sticky>
<button class="am-btn am-btn-primary am-btn-block">Stick to top</button>
</div>
<button class="am-btn am-btn-success"
data-am-popover="{content: '鄙是点击 Hover 显示的 Popover', trigger: 'hover focus'}">
Hover 显示 Popover
</button>
</body>
</html>