輕量級的HTML/CSS/JS框架：MUI
MUI 是一個輕量級的 HTML、CSS 和 JS 框架，遵循 Google 的 Material Design 設計思路。MUI CSS可以在使用SASS源碼時，通過GitHub或Bower來輕松定制它。自定義的范圍包括響應斷點，默認字體設置和使用Material Design顏色等等。MUI CSS/JS并不依賴任何其他的程序。
Features
MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Google's Material Design guidelines. Some of the key features of MUI are:
- Small footprint: mui.min.css - 5.6K, mui.min.js - 3.7K (gzipped)
- A responsive grid to make mobile-friendly sites
- No external dependencies
- CSS library that can be customized with your own colors
- JS library can be loaded asyncronously
- Email library for styling HTML emails
To get started using MUI, go to the MUI website to see examples and download boilerplate HTML.
Browser Support
MUI is tested and works in:
- IE10+
- Latest Stable: Firefox, Chrome, Safari
- iOS 6+
Development Quickstart
-
Install dependencies
- nodejs (http://nodejs.org/)
- npm (https://www.npmjs.org/)
- sass (http://sass-lang.com/)
- http-server (via npm)
-
Clone repository
$ git clone git@github.com:muicss/mui.git $ cd mui -
Install node dependencies using npm
$ npm install
-
Build examples
$ ./node_modules/.bin/gulp build-examples
To view the examples you can use any static file server. To use the nodejs
http-servermodule:$ npm install http-server $ ./node_modules/.bin/http-server -p 3000
Then visit http://localhost:3000/examples
-
Watch changes and re-build
$ ./node_modules/.bin/gulp watch
示例 HTML：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- load MUI --> <link /> <script src="http://cdn.muicss.com/mui-0.0.1/js/mui.min.js"></script> </head> <body> <!-- example content --> <div class="mui-container"> <div class="mui-panel"> <h1>My Title</h1> <button class="mui-btn mui-btn-primary mui-btn-raised">My Button</button> </div> </div> </body> </html>