caiwangwhu / mobi.css

A lightweight, flexible css framework that focus on mobile.

English | 简体中文

Mobi.css

A lightweight, flexible css framework that focus on mobile.

Introduction

• Only 3.6kb after gzipped, less than Skeleton, Pure.css and Bootstrap v4, etc
• Heavy use of flexbox, super flexible, less than 10 lines of custom style in the official site
• Focus on mobile, show mobile pages in desktop with a sidebar on the left or right

Getting started

You can download Mobi.css in this page, then use dist/mobi.min.css for the compressed version.

Or use cndjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mobi.css/1.0.0/mobi.min.css" />

Or use npm to install:

npm install --save mobi.css

You can also build Mobi.css to your project if you are using Sass:

@import 'mobi.css/src/mobi';

Be sure you have added node_modules to your Sass's load_paths.

Browser Support

iOS

• Last 5 iOS versions

Android

• Last 5 Android versions
• Last 5 ChromeAndroid versions
• Last 5 UCAndroid versions (*)
• Last 5 FirefoxAndroid versions (*)
• Last 5 OperaMobile versions (*)
• Last 5 OperaMini versions (*)
• Last 5 Samsung versions (*)

Others

• Last 3 Chrome versions
• Last 3 Firefox versions
• Last 3 Safari versions
• Last 3 Edge versions
• Last 5 ExplorerMobile versions (*)

Note

• Use Autoprefixer to ensure Mobi.css works on all major mobile devices
• Browsers query comes from Browserslist
• Browsers marked as (*) were not well tested, but they should work fine

Contributing

Before contributing, please ensure you have sass and scss-lint installed. You can install them by running this:

gem install sass
gem install scss_lint

Getting started

npm install
npm start

Open http://localhost:8000/

Testing

npm test

Travis CI

Mobi.css use Travis CI as continuous integration system.

• The official site will be generated automatically when new commits are pushed to master branch
• Pull request cannot be merged when Travis CI not pass

Buy me a coffee

License

MIT

Mobi.css

轻量灵活的移动端 CSS 框架。

介绍

• 压缩后只有 4.6kb，比 Skeleton、Pure.css、Bootstrap 等所有 CSS 库都小
• 大量使用 Flexbox ，非常灵活，官方网站只有不到 10 行的自定义样式
• 专注于移动端，桌面端端相当于展示的还是移动端的页面，不过可以在左侧或右侧加上侧边栏

开始使用

你可以在这个页面下载 Mobi.css，然后使用压缩后的版本：dist/mobi.min.css。

或者使用 cndjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mobi.css/1.0.0/mobi.min.css" />

或者使用 npm 安装：

npm install --save mobi.css

如果你用的是 Sass，那么也可以在自己的项目中构建 Mobi.css：

@import 'mobi.css/src/mobi';

注意你需要将 node_modules 添加到 Sass 的 load_paths 中。

支持的浏览器

iOS

• Last 5 iOS versions

安卓

• Last 5 Android versions
• Last 5 ChromeAndroid versions
• Last 5 UCAndroid versions (*)
• Last 5 FirefoxAndroid versions (*)
• Last 5 OperaMobile versions (*)
• Last 5 OperaMini versions (*)
• Last 5 Samsung versions (*)

其他浏览器

• Last 3 Chrome versions
• Last 3 Firefox versions
• Last 3 Safari versions
• Last 3 Edge versions
• Last 5 ExplorerMobile versions (*)

备注

• Mobi.css 使用 Autoprefixer 来保证能兼容主流的移动端浏览器
• 浏览器查询语句来自于 Browserslist
• 标注为 (*) 的浏览器可能没有很好的测试，但是应该能够正常工作

参与贡献

开始贡献之前，请确保你已经安装了 sass 和 scss-lint。可以运行以下命令安装：

gem install sass
gem install scss_lint

如何开始

npm install
npm start

打开 http://localhost:8000/

测试

npm test

Travis CI

Mobi.css 使用 Travis CI 作为持续集成系统。

• 当 master 分支有新的提交时，官方网站 将会自动更新
• Travis CI 不通过时，Pull request 不能被 merge

请我喝杯咖啡

开源协议

MIT