Smoothie require the use of the HTML5 doctype. So begining your projects with following format.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
The Viewport meta lets you control your page's width and scale on the mobile browser. Add following code into your page's head.
Just add the smoothie.css with the <link> element into your page's head, before your project's stylesheets.
<link rel="stylesheet" href="smoothie.css">After the above step your base document will like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
You can directly use smoothie.css under the dist directory or build the new one by yourself.
Smoothie stylesheet built with stylus:
$ npm install --global gulp
$ npm install
$ gulp
By default smoothie set the :
html,
body {
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a,
img {
-webkit-touch-callout: none;
}
To prevent ios text size adjuat and ios, android long press callout menu or select text
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
smoothie's global default font-size is 14px. all paragraphs Applied the <p> line-height of 1.4 and margin-bottom 10px.
Smoothie 使用弹性盒子模型进行页面的布局，通过水平、垂直的组合方式来创建页面布局
创建一个 可伸缩布局 只要在父容器中加入 一个 类 sm-flex, 添加该类后，该元素有以下属性可供设置:
orientical:
| 属性 | 取值说明 |
|---|---|
| orientation | 定义该容器下的子元素的排列主轴方向方向，默认为水平方向。可以选择的值为 horizontal , vertical horizontal:水平方向（默认） vertical: 垂直方向 |
| horizontal |
设置子元素在水平方向的对齐方式， 可选的值有 left | right | center | justify | distribute left: 左对齐 （默认） right: 右对齐 center: 水平居中对齐 justify: 两端对齐 distribute：水平分散对齐 |
| vertical |
设置子元素在垂直方向的对齐方式，可选的值有 top | bottom | center | baseline | stretch top: 顶部对齐（默认） bottom: 底部对齐 center: 垂直居中对齐 baseline: 子元素基线对齐 stretch: 垂直拉伸 |
| wrap |
设置子元素在垂直方向的对齐方式，可选的值有 wrap, nowrap, wrap-reverse nowrap: 子元素不换行（默认） wrap: 根据需要，子元素换行 wrap-reverse: 子元素换行从右侧开始 |
<div class="sm-flex" style="background: green; height:100px">
<div style="background-color: red">1</div>
<div style="background-color: orange">2</div>
<div style="background-color: yellow">3</div>
</div>
默认情况下，子元素为横向排列， 通过向父容器添加 类 col 来设置子元素为纵向排列:
<div class="sm-flex col" style="background: green; height:100px">
<div style="background-color: red">1</div>
<div style="background-color: orange">2</div>
<div style="background-color: yellow">3</div>
</div>
通过向父容器添加 类 center 来设置子元素 在排列方向 上居中:
<div class="sm-flex center" style="background: green; height:100px">
<div style="background-color: red">1</div>
<div style="background-color: orange">2</div>
<div style="background-color: yellow">3</div>
</div>
To use the form controls just add the sm-input classname to the input element.
when the input is error or warning just add the error or warning to the class name:
The disabled status of input. Just add the attribute disabled to the input
Add the small large classname to the sm-input element.
Add the class sm-select to the select's parent element.
Add the class sm-check to the checkbox's parent element.
Add the class sm-radio to the checkbox's parent element.
The toggle element is similar with checkbox. But have a special appearance. You should use the following fomat and add the sm-toggle classname. To use this control and get the vaule same as the checkbox.
To create a button, add the sm-btn classname to any div, a or button element.
Default ButtonDefault
To mark a button as disabled, add the disabled attribute to the button element.
Add the primary info success danger classname to the sm-btn elemet to apply.
PrimaryInfoSuccessWarningDanger
Add the small middle large classname to the sm-btn elements.
smallmiddleDefaultPrimary
Add the block classname to the sm-btn elements.
Primary
add the sm-list classname to the ul element.
Add the divider classname to the list li elements
Add the chevrons classname to the list li elements
Add the sm-badge classname to the inline-block elements.
Add the .sm-topbar classname name to the div element and add the title classname to the inner div.
Add the .sm-topbar classname name to the div element and add the title classname to the inner div.