├── .gitignore ├── app.js ├── baidu_verify_33t7940NhB.html ├── bin └── www.js ├── config.js ├── controllers └── index.js ├── gulpfile.js ├── package.json ├── public ├── css │ ├── _footer.css │ ├── _footer.styl │ ├── _main.css │ ├── _main.styl │ ├── _normalize.css │ ├── _normalize.styl │ ├── _sidebar.css │ ├── _sidebar.styl │ ├── _style.css │ ├── _style.styl │ ├── _variables.css │ ├── _variables.styl │ ├── index.css │ ├── index.styl │ ├── materialize.min.css │ └── prism.css ├── font │ ├── Material-Design-Icons.eot │ ├── Material-Design-Icons.ttf │ ├── Material-Design-Icons.woff │ └── Material-Design-Icons.woff2 ├── img │ ├── materialize.svg │ ├── menu.gif │ ├── office.jpg │ ├── parallax1.jpg │ ├── parallax2.jpg │ ├── responsive.png │ ├── sample-1.jpg │ ├── style_typography_roboto1.png │ ├── toast.gif │ └── yuna.jpg └── js │ ├── app.js │ ├── jquery.min.js │ ├── materialize.min.js │ └── prism.js ├── routers.js ├── service └── hbshelpers.js ├── sitemap.xml └── views ├── components ├── badges.hbs ├── buttons.hbs ├── cards.hbs ├── collections.hbs ├── footer.hbs ├── forms.hbs ├── icons.hbs ├── navbar.hbs ├── pagination.hbs └── preloader.hbs ├── css ├── color.hbs ├── grid.hbs ├── helpers.hbs ├── mediacss.hbs ├── shadow.hbs ├── table.hbs └── typography.hbs ├── err.hbs ├── index.hbs ├── javascript ├── collapsible.hbs ├── dialogs.hbs ├── dropdown.hbs ├── fullscreen-slider-demo.hbs ├── media.hbs ├── modals.hbs ├── parallax-demo.hbs ├── parallax.hbs ├── pushpin.hbs ├── scrollfire.hbs ├── scrollspy.hbs ├── side-nav.hbs ├── tabs.hbs ├── transitions.hbs └── waves.hbs ├── layouts └── layout.hbs ├── mobile.hbs ├── showcase.hbs └── start.hbs /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules/ 3 | bower_components/ 4 | *.log 5 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-14. 3 | */ 4 | var config = require('./config'); 5 | var env = process.env.NODE_ENV; 6 | var express = require('express'); 7 | var path = require('path'); 8 | var logger = require('morgan'); 9 | var cookieParser = require('cookie-parser'); 10 | var bodyParser = require('body-parser'); 11 | var exhbs = require('express-handlebars'); 12 | var hbshelper = require('./service/hbshelpers'); 13 | var routers = require('./routers'); 14 | var app = express(); 15 | 16 | // view engine setup 17 | app.engine('hbs', exhbs(hbshelper)); 18 | app.set('views', path.join(__dirname, 'views')); 19 | app.set('view engine', 'hbs'); 20 | app.use(bodyParser.json()); 21 | app.use(bodyParser.urlencoded({'extended': true})); 22 | app.use(cookieParser()); 23 | 24 | if (env === "development") { 25 | app.use(logger('dev')); 26 | } 27 | 28 | 29 | app.use(function (req, res, next) { 30 | res.locals.production = env === "production"; 31 | next(); 32 | }); 33 | 34 | app.use('/', routers); 35 | 36 | /// catch 404 and forward to error handler 37 | app.use(function (req, res, next) { 38 | var err = new Error('Not Found'); 39 | err.status = 404; 40 | res.status(err.status); 41 | next(err); 42 | }); 43 | 44 | /// error handlers 45 | 46 | 47 | // production error handler 48 | // no stacktraces leaked to user 49 | app.use(function (err, req, res, next) { 50 | var data = {layout: false}; 51 | if (env === 'development') { 52 | data.message = err.message; 53 | data.error = err; 54 | } 55 | else { 56 | data.title = { 57 | 404: '木有这个页面，orz', 58 | 500: '伍佰来了，次奥' 59 | }[res.statusCode]; 60 | } 61 | res.render('err', data); 62 | }); 63 | 64 | 65 | module.exports = app; -------------------------------------------------------------------------------- /baidu_verify_33t7940NhB.html: -------------------------------------------------------------------------------- 1 | 33t7940NhB -------------------------------------------------------------------------------- /bin/www.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-12. 3 | */ 4 | var app = require('../app'); 5 | 6 | app.set('port', process.env.PORT || 3001); 7 | 8 | var server = app.listen(app.get('port'), function () { 9 | console.log('Express server listening on port ' + server.address().port); 10 | }); 11 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-12. 3 | */ 4 | -------------------------------------------------------------------------------- /controllers/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-12. 3 | */ 4 | exports.index = function (req, res) { 5 | return res.render('index'); 6 | }; 7 | 8 | exports.start = function (req, res) { 9 | return res.render('start'); 10 | }; 11 | 12 | exports.color = function (req, res) { 13 | return res.render('css/color'); 14 | }; 15 | 16 | exports.grid = function (req, res) { 17 | return res.render('css/grid'); 18 | }; 19 | 20 | exports.helpers = function (req, res) { 21 | return res.render('css/helpers'); 22 | }; 23 | 24 | exports.mediacss = function (req, res) { 25 | return res.render('css/mediacss'); 26 | }; 27 | 28 | exports.sass = function (req, res) { 29 | return res.render('css/sass'); 30 | }; 31 | 32 | exports.shadow = function (req, res) { 33 | return res.render('css/shadow'); 34 | }; 35 | 36 | exports.table = function (req, res) { 37 | return res.render('css/table'); 38 | }; 39 | 40 | exports.typography = function (req, res) { 41 | return res.render('css/typography'); 42 | }; 43 | 44 | exports.badges = function (req, res) { 45 | return res.render('components/badges'); 46 | }; 47 | 48 | exports.buttons = function (req, res) { 49 | return res.render('components/buttons'); 50 | }; 51 | 52 | exports.cards = function (req, res) { 53 | return res.render('components/cards'); 54 | }; 55 | exports.collections = function (req, res) { 56 | return res.render('components/collections'); 57 | }; 58 | exports.footer = function (req, res) { 59 | return res.render('components/footer'); 60 | }; 61 | exports.forms = function (req, res) { 62 | return res.render('components/forms'); 63 | }; 64 | exports.icons = function (req, res) { 65 | return res.render('components/icons'); 66 | }; 67 | exports.navbar = function (req, res) { 68 | return res.render('components/navbar'); 69 | }; 70 | exports.pagination = function (req, res) { 71 | return res.render('components/pagination'); 72 | }; 73 | exports.preloader = function (req, res) { 74 | return res.render('components/preloader'); 75 | }; 76 | 77 | //javascript 78 | 79 | exports.collapsible = function (req, res) { 80 | return res.render('javascript/collapsible'); 81 | }; 82 | exports.dialogs = function (req, res) { 83 | return res.render('javascript/dialogs'); 84 | }; 85 | exports.dropdown = function (req, res) { 86 | return res.render('javascript/dropdown'); 87 | }; 88 | exports.media = function (req, res) { 89 | return res.render('javascript/media'); 90 | }; 91 | exports.modals = function (req, res) { 92 | return res.render('javascript/modals'); 93 | }; 94 | exports.parallax = function (req, res) { 95 | return res.render('javascript/parallax'); 96 | }; 97 | exports.parallaxdemo = function (req, res) { 98 | return res.render('javascript/parallax-demo',{layout:false}); 99 | }; 100 | 101 | exports.pushpin = function (req, res) { 102 | return res.render('javascript/pushpin'); 103 | }; 104 | exports.scrollfire = function (req, res) { 105 | return res.render('javascript/scrollfire'); 106 | }; 107 | exports.scrollspy = function (req, res) { 108 | return res.render('javascript/scrollspy'); 109 | }; 110 | exports.sidenav = function (req, res) { 111 | return res.render('javascript/side-nav'); 112 | }; 113 | exports.tabs = function (req, res) { 114 | return res.render('javascript/tabs'); 115 | }; 116 | exports.transitions = function (req, res) { 117 | return res.render('javascript/transitions'); 118 | }; 119 | exports.waves = function (req, res) { 120 | return res.render('javascript/waves'); 121 | }; 122 | exports.mobile = function (req, res) { 123 | return res.render('mobile'); 124 | }; 125 | exports.showcase = function (req, res) { 126 | return res.render('showcase'); 127 | }; 128 | exports.fsd = function (req, res) { 129 | return res.render('javascript/fullscreen-slider-demo'); 130 | }; 131 | 132 | exports.sitemap=function(req,res){ 133 | 134 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | inject = require('gulp-inject'), 3 | uglify = require('gulp-uglify'), 4 | concat = require('gulp-concat'), 5 | minifyCSS = require('gulp-minify-css'), 6 | clean = require('gulp-rimraf'), 7 | git = require('gulp-git'), 8 | runSequence = require('run-sequence'), 9 | browserSync = require('browser-sync').create(), 10 | shortId = require('shortid'), 11 | randomId = '', 12 | stylus = require('gulp-stylus'); 13 | 14 | var resources = { 15 | css: ['public/css/app.css'], 16 | js : ['public/js/jquery.min.js', 'public/js/pop.js', 'public/js/app.js'] 17 | }; 18 | 19 | gulp.task('browser-sync', function () { 20 | browserSync.init({ 21 | proxy: "127.0.0.1:8081" 22 | }); 23 | gulp.watch(["views/**/*", 'public/**/*.js', 'public/css/index.css']).on("change", browserSync.reload); 24 | }); 25 | 26 | gulp.task('compileStylus',function(){ 27 | gulp.src('public/css/*.styl') 28 | .pipe(stylus()) 29 | .pipe(gulp.dest('public/css/')); 30 | 31 | }); 32 | 33 | gulp.task('watch',function(){ 34 | gulp.watch('public/css/*.styl',['compileStylus']); 35 | }); 36 | 37 | gulp.task('default',['watch','browser-sync']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Materialscss", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "browser-sync": "^2.7.9", 13 | "gulp": "^3.9.0", 14 | "gulp-concat": "^2.5.2", 15 | "gulp-git": "^1.2.4", 16 | "gulp-inject": "^1.3.1", 17 | "gulp-minify-css": "^1.1.6", 18 | "gulp-nodemon": "^2.0.3", 19 | "gulp-rimraf": "^0.1.1", 20 | "gulp-stylus": "^2.0.3", 21 | "gulp-uglify": "^1.2.0", 22 | "run-sequence": "^1.1.0", 23 | "shortid": "^2.2.2" 24 | }, 25 | "dependencies": { 26 | "body-parser": "^1.12.4", 27 | "bootstrap-styl": "^4.0.4", 28 | "cookie-parser": "^1.3.5", 29 | "express": "^4.12.4", 30 | "express-handlebars": "^2.0.1", 31 | "moment": "^2.10.3", 32 | "morgan": "^1.5.3" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/css/_footer.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/css/_footer.css -------------------------------------------------------------------------------- /public/css/_footer.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/css/_footer.styl -------------------------------------------------------------------------------- /public/css/_main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/css/_main.css -------------------------------------------------------------------------------- /public/css/_main.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/css/_main.styl -------------------------------------------------------------------------------- /public/css/_normalize.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: 'Open Sans', Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /public/css/_normalize.styl: -------------------------------------------------------------------------------- 1 | html 2 | font-family 'Open Sans', Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑",STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif -------------------------------------------------------------------------------- /public/css/_sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | width: 240px; 3 | position: fixed; 4 | box-shadow: 2px 2px 2px #ddd; 5 | height: 100%; 6 | background-color: #fff; 7 | z-index: 998; 8 | } 9 | .sidebar:hover { 10 | overflow-y: auto; 11 | } 12 | .sidebar li:hover { 13 | background-color: rgba(0,0,0,0.05); 14 | } 15 | @media screen and (max-width: 992px) { 16 | .sidebar { 17 | left: -245px; 18 | } 19 | } 20 | .sidebar .logo { 21 | width: 100%; 22 | text-align: center; 23 | height: 90px; 24 | border-bottom: 1px solid #ddd; 25 | margin-top: 30px; 26 | } 27 | .sidebar a { 28 | line-height: 44px; 29 | height: 44px; 30 | font-weight: bolder; 31 | display: block; 32 | color: #444; 33 | padding: 0 25px; 34 | } 35 | .sidebar .collapsible { 36 | border: none; 37 | box-shadow: none; 38 | margin: 0; 39 | } 40 | .sidebar .collapsible-accordion > li.active { 41 | background-color: rgba(0,0,0,0.05); 42 | } 43 | .sidebar .collapsible-header { 44 | border: none; 45 | background-color: transparent; 46 | } 47 | .sidebar .collapsible-body { 48 | background-color: #fff; 49 | border: none; 50 | } 51 | .sidebar .collapsible-body ul { 52 | font-weight: 300; 53 | } 54 | .sidebar .collapsible-body a { 55 | padding-left: 40px; 56 | } 57 | .sidebar-collapsible:hover { 58 | background-color: #fff !important; 59 | } 60 | .sidebar .collapsible-body li.active, 61 | .side-nav.fixed .collapsible-body li.active { 62 | background-color: #ee6e73; 63 | } 64 | .sidebar .collapsible-body li.active a, 65 | .side-nav.fixed .collapsible-body li.active a { 66 | color: #fff; 67 | } 68 | .sidebar.in { 69 | overflow: auto; 70 | left: 0; 71 | box-shadow: none; 72 | transition: left 0.5s ease; 73 | } 74 | -------------------------------------------------------------------------------- /public/css/_sidebar.styl: -------------------------------------------------------------------------------- 1 | .sidebar 2 | width 240px 3 | position fixed 4 | box-shadow 2px 2px 2px #ddd 5 | height 100% 6 | background-color #FFFFFF 7 | z-index 998 8 | &:hover 9 | overflow-y auto 10 | li 11 | &:hover 12 | background-color rgba(0, 0, 0, 0.05) 13 | 14 | @media screen and (max-width: 992px) 15 | .sidebar 16 | left -245px 17 | 18 | 19 | .sidebar .logo 20 | width 100% 21 | text-align center 22 | height 90px 23 | border-bottom 1px solid #ddd 24 | margin-top 30px 25 | 26 | 27 | .sidebar a 28 | line-height 44px 29 | height 44px 30 | font-weight bolder 31 | display block 32 | color #444 33 | padding 0 25px 34 | 35 | .sidebar .collapsible 36 | border none 37 | box-shadow none 38 | margin 0 39 | 40 | .sidebar .collapsible-accordion > li.active 41 | background-color rgba(0, 0, 0, 0.05) 42 | 43 | .sidebar .collapsible-header 44 | border none 45 | background-color transparent 46 | 47 | .sidebar .collapsible-body 48 | background-color #FFFFFF 49 | border none 50 | ul 51 | font-weight 300 52 | 53 | .sidebar .collapsible-body a 54 | padding-left 40px 55 | 56 | .sidebar-collapsible 57 | &:hover 58 | background-color #FFFFFF !important 59 | 60 | .sidebar .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 61 | background-color: #ee6e73; 62 | } 63 | .sidebar .collapsible-body li.active a, .side-nav.fixed .collapsible-body li.active a { 64 | color: #fff; 65 | } 66 | .sidebar.in{ 67 | overflow auto 68 | left 0 69 | box-shadow none 70 | transition left .5s ease 71 | } -------------------------------------------------------------------------------- /public/css/_style.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #fcfcfc; 3 | } 4 | .header { 5 | color: #ee6e73; 6 | } 7 | .promo { 8 | width: 100%; 9 | } 10 | main, 11 | footer { 12 | padding-left: 240px; 13 | } 14 | @media only screen and (max-width: 992px) { 15 | main, 16 | footer { 17 | padding-left: 0; 18 | } 19 | .promo { 20 | width: 60%; 21 | margin: 0 auto; 22 | display: block; 23 | } 24 | } 25 | .promo i { 26 | color: #ee6e73; 27 | font-size: 7rem; 28 | display: block; 29 | } 30 | .promo-caption { 31 | font-size: 1.7rem; 32 | font-weight: 500; 33 | margin-top: 5px; 34 | margin-bottom: 0; 35 | } 36 | .col.grid-example { 37 | border: 1px solid #eee; 38 | margin: 7px 0; 39 | text-align: center; 40 | line-height: 50px; 41 | font-size: 28px; 42 | background-color: #ff6347; 43 | color: #fff; 44 | padding: 0; 45 | } 46 | .col.grid-example span { 47 | font-weight: 200; 48 | line-height: 50px; 49 | } 50 | .promo-example { 51 | overflow: hidden; 52 | } 53 | .dynamic-color .red, 54 | .dynamic-color .pink, 55 | .dynamic-color .purple, 56 | .dynamic-color .deep-purple, 57 | .dynamic-color .indigo, 58 | .dynamic-color .blue, 59 | .dynamic-color .light-blue, 60 | .dynamic-color .cyan, 61 | .dynamic-color .teal, 62 | .dynamic-color .green, 63 | .dynamic-color .light-green, 64 | .dynamic-color .lime, 65 | .dynamic-color .yellow, 66 | .dynamic-color .amber, 67 | .dynamic-color .orange, 68 | .dynamic-color .deep-orange, 69 | .dynamic-color .brown, 70 | .dynamic-color .grey, 71 | .dynamic-color .blue-grey, 72 | .dynamic-color .black, 73 | .dynamic-color .white, 74 | .dynamic-color .transparent { 75 | height: 55px; 76 | width: 100%; 77 | padding: 0 15px; 78 | line-height: 55px; 79 | font-weight: 500; 80 | font-size: 12px; 81 | display: block; 82 | -webkit-box-sizing: border-box; 83 | -moz-box-sizing: border-box; 84 | box-sizing: border-box; 85 | } 86 | .dynamic-color .col { 87 | margin-bottom: 55px; 88 | } 89 | p { 90 | color: rgba(0,0,0,0.71); 91 | padding: 0; 92 | -webkit-font-smoothing: antialiased; 93 | } 94 | #download-button { 95 | font-size: 20px; 96 | } 97 | code, 98 | pre { 99 | position: relative; 100 | font-size: 1.1rem; 101 | } 102 | pre[class*="language-"] { 103 | padding: 25px 12px 7px 12px; 104 | border: solid 1px rgba(51,51,51,0.12); 105 | } 106 | pre[class*="language-"]:before { 107 | position: absolute; 108 | padding: 1px 5px; 109 | background: #e8e6e3; 110 | top: 0; 111 | left: 0; 112 | font-family: sans-serif; 113 | -webkit-font-smoothing: antialiased; 114 | color: #555; 115 | content: attr(class); 116 | font-size: 0.9rem; 117 | border: solid 1px rgba(51,51,51,0.12); 118 | border-top: none; 119 | border-left: none; 120 | } 121 | /******************* 122 | Flat Site Mockup 123 | *******************/ 124 | #site-layout-example-left { 125 | background-color: #90a4ae; 126 | height: 300px; 127 | } 128 | #site-layout-example-right { 129 | background-color: #26a69a; 130 | height: 300px; 131 | } 132 | #site-layout-example-top { 133 | background-color: #e57373; 134 | height: 42px; 135 | } 136 | .flat-text-header { 137 | height: 35px; 138 | width: 80%; 139 | background-color: rgba(255,255,255,0.15); 140 | display: block; 141 | margin: 27px auto; 142 | } 143 | .flat-text { 144 | height: 25px; 145 | width: 80%; 146 | background-color: rgba(0,0,0,0.15); 147 | display: block; 148 | margin: 27px auto; 149 | } 150 | .flat-text.small { 151 | width: 25%; 152 | height: 25px; 153 | background-color: rgba(0,0,0,0.15); 154 | } 155 | .flat-text.full-width { 156 | width: 100%; 157 | } 158 | /********************** 159 | **********************/ 160 | /***************** 161 | Chrome Browser 162 | *****************/ 163 | .browser-window { 164 | text-align: left; 165 | width: 100%; 166 | height: auto; 167 | display: inline-block; 168 | border-radius: 5px 5px 2px 2px; 169 | background-color: #fff; 170 | margin: 20px 0px; 171 | overflow: hidden; 172 | } 173 | .browser-window .top-bar { 174 | height: 30px; 175 | border-radius: 5px 5px 0 0; 176 | border-top: thin solid #eaeae9; 177 | border-bottom: thin solid #dfdfde; 178 | background: linear-gradient(#e7e7e6, #e2e2e1); 179 | } 180 | .browser-window .circle { 181 | height: 10px; 182 | width: 10px; 183 | display: inline-block; 184 | border-radius: 50%; 185 | background-color: #fff; 186 | margin-right: 1px; 187 | } 188 | #close-circle { 189 | background-color: #ff5c5a; 190 | } 191 | #minimize-circle { 192 | background-color: #ffbb50; 193 | } 194 | #maximize-circle { 195 | background-color: #1bc656; 196 | } 197 | .browser-window .circles { 198 | margin: 5px 12px; 199 | } 200 | .browser-window .content { 201 | margin: 0; 202 | width: 100%; 203 | display: inline-block; 204 | border-radius: 0 0 5px 5px; 205 | background-color: #fafafa; 206 | } 207 | .browser-window .row { 208 | margin: 0; 209 | } 210 | .clear { 211 | clear: both; 212 | } 213 | .valign-demo { 214 | height: 400px; 215 | background-color: #ddd; 216 | } 217 | .talign-demo { 218 | height: 100px; 219 | background-color: #ddd; 220 | } 221 | .shadow-demo { 222 | background-color: #26a69a; 223 | width: 125px; 224 | height: 125px; 225 | margin: 20px auto; 226 | } 227 | @media only screen and (max-width: 1200px) { 228 | .shadow-demo { 229 | width: 100px; 230 | height: 100px; 231 | } 232 | } 233 | @media only screen and (max-width: 600px) { 234 | .shadow-demo { 235 | width: 150px; 236 | height: 150px; 237 | } 238 | } 239 | .caption { 240 | font-size: 1.25rem; 241 | font-weight: 300; 242 | margin-bottom: 30px; 243 | } 244 | footer.example { 245 | padding-left: 0; 246 | } 247 | .icon-demo { 248 | line-height: 50px; 249 | } 250 | .icon-container i { 251 | font-size: 3em; 252 | display: block; 253 | margin-bottom: 10px; 254 | } 255 | .icon-container .icon-preview { 256 | height: 120px; 257 | text-align: center; 258 | } 259 | .icon-holder { 260 | display: block; 261 | text-align: center; 262 | width: 150px; 263 | height: 115px; 264 | float: left; 265 | margin: 0 0px 15px 0px; 266 | } 267 | .icon-holder p { 268 | margin: 0 0; 269 | } 270 | #staggered-test li, 271 | #image-test { 272 | opacity: 0; 273 | } 274 | @media only screen and (min-width: 993px) { 275 | .container { 276 | width: 85%; 277 | } 278 | } 279 | a.button-collapse.top-nav { 280 | position: absolute; 281 | text-align: center; 282 | height: 48px; 283 | width: 48px; 284 | left: 7.5%; 285 | top: 0; 286 | float: none; 287 | margin-left: 1.5rem; 288 | color: #fff; 289 | font-size: 32px; 290 | z-index: 2; 291 | } 292 | a.button-collapse.top-nav.full { 293 | line-height: 122px; 294 | } 295 | @media only screen and (max-width: 600px) { 296 | a.button-collapse.top-nav { 297 | left: 5%; 298 | } 299 | } 300 | @media only screen and (max-width: 730px) { 301 | .mobile-image { 302 | max-width: 100%; 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /public/css/_style.styl: -------------------------------------------------------------------------------- 1 | html 2 | background-color #fcfcfc 3 | 4 | .header 5 | color: #ee6e73; 6 | 7 | .promo { 8 | width: 100%; 9 | } 10 | 11 | main,footer 12 | padding-left 240px 13 | 14 | @media only screen and (max-width: 992px) { 15 | main,footer { 16 | padding-left :0 17 | } 18 | .promo { 19 | width: 60%; 20 | margin: 0 auto; 21 | display: block; 22 | } 23 | } 24 | 25 | .promo i { 26 | color: #ee6e73; 27 | font-size: 7rem; 28 | display: block; 29 | } 30 | 31 | .promo-caption { 32 | font-size: 1.7rem; 33 | font-weight: 500; 34 | margin-top: 5px; 35 | margin-bottom: 0; 36 | } 37 | 38 | .col.grid-example { 39 | border: 1px solid #eee; 40 | margin: 7px 0; 41 | text-align: center; 42 | line-height: 50px; 43 | font-size: 28px; 44 | background-color: tomato; 45 | color: white; 46 | padding: 0; } 47 | .col.grid-example span { 48 | font-weight: 200; 49 | line-height: 50px; } 50 | 51 | .promo-example { 52 | overflow: hidden; } 53 | 54 | 55 | .dynamic-color .red, .dynamic-color .pink, .dynamic-color .purple, .dynamic-color .deep-purple, .dynamic-color .indigo, .dynamic-color .blue, .dynamic-color .light-blue, .dynamic-color .cyan, .dynamic-color .teal, .dynamic-color .green, .dynamic-color .light-green, .dynamic-color .lime, .dynamic-color .yellow, .dynamic-color .amber, .dynamic-color .orange, .dynamic-color .deep-orange, .dynamic-color .brown, .dynamic-color .grey, .dynamic-color .blue-grey, .dynamic-color .black, .dynamic-color .white, .dynamic-color .transparent { 56 | height: 55px; 57 | width: 100%; 58 | padding: 0 15px; 59 | line-height: 55px; 60 | font-weight: 500; 61 | font-size: 12px; 62 | display: block; 63 | -webkit-box-sizing: border-box; 64 | -moz-box-sizing: border-box; 65 | box-sizing: border-box; } 66 | .dynamic-color .col { 67 | margin-bottom: 55px; } 68 | 69 | 70 | p { 71 | color: rgba(0, 0, 0, 0.71); 72 | padding: 0; 73 | -webkit-font-smoothing: antialiased; 74 | } 75 | 76 | #download-button 77 | font-size 20px 78 | code, pre { 79 | position: relative; 80 | font-size: 1.1rem; } 81 | 82 | pre[class*="language-"] { 83 | padding: 25px 12px 7px 12px; 84 | border: solid 1px rgba(51, 51, 51, 0.12); } 85 | pre[class*="language-"]:before { 86 | position: absolute; 87 | padding: 1px 5px; 88 | background: #e8e6e3; 89 | top: 0; 90 | left: 0; 91 | font-family: sans-serif; 92 | -webkit-font-smoothing: antialiased; 93 | color: #555; 94 | content: attr(class); 95 | font-size: .9rem; 96 | border: solid 1px rgba(51, 51, 51, 0.12); 97 | border-top: none; 98 | border-left: none; } 99 | 100 | 101 | 102 | /******************* 103 | Flat Site Mockup 104 | *******************/ 105 | #site-layout-example-left { 106 | background-color: #90a4ae; 107 | height: 300px; } 108 | 109 | #site-layout-example-right { 110 | background-color: #26a69a; 111 | height: 300px; } 112 | 113 | #site-layout-example-top { 114 | background-color: #E57373; 115 | height: 42px; } 116 | 117 | .flat-text-header { 118 | height: 35px; 119 | width: 80%; 120 | background-color: rgba(255, 255, 255, 0.15); 121 | display: block; 122 | margin: 27px auto; } 123 | 124 | .flat-text { 125 | height: 25px; 126 | width: 80%; 127 | background-color: rgba(0, 0, 0, 0.15); 128 | display: block; 129 | margin: 27px auto; } 130 | .flat-text.small { 131 | width: 25%; 132 | height: 25px; 133 | background-color: rgba(0, 0, 0, 0.15); } 134 | .flat-text.full-width { 135 | width: 100%; } 136 | 137 | /********************** 138 | **********************/ 139 | /***************** 140 | Chrome Browser 141 | *****************/ 142 | .browser-window { 143 | text-align: left; 144 | width: 100%; 145 | height: auto; 146 | display: inline-block; 147 | border-radius: 5px 5px 2px 2px; 148 | background-color: #fff; 149 | margin: 20px 0px; 150 | overflow: hidden; } 151 | .browser-window .top-bar { 152 | height: 30px; 153 | border-radius: 5px 5px 0 0; 154 | border-top: thin solid #eaeae9; 155 | border-bottom: thin solid #dfdfde; 156 | background: linear-gradient(#e7e7e6, #E2E2E1); } 157 | 158 | .browser-window .circle { 159 | height: 10px; 160 | width: 10px; 161 | display: inline-block; 162 | border-radius: 50%; 163 | background-color: white; 164 | margin-right: 1px; } 165 | 166 | #close-circle { 167 | background-color: #FF5C5A; } 168 | 169 | #minimize-circle { 170 | background-color: #FFBB50; } 171 | 172 | #maximize-circle { 173 | background-color: #1BC656; } 174 | 175 | .browser-window .circles { 176 | margin: 5px 12px; } 177 | 178 | .browser-window .content { 179 | margin: 0; 180 | width: 100%; 181 | display: inline-block; 182 | border-radius: 0 0 5px 5px; 183 | background-color: #fafafa; } 184 | 185 | .browser-window .row { 186 | margin: 0; } 187 | 188 | .clear { 189 | clear: both; } 190 | 191 | 192 | 193 | .valign-demo { 194 | height: 400px; 195 | background-color: #ddd; } 196 | 197 | .talign-demo { 198 | height: 100px; 199 | background-color: #ddd; } 200 | 201 | .shadow-demo { 202 | background-color: #26a69a; 203 | width: 125px; 204 | height: 125px; 205 | margin: 20px auto; } 206 | @media only screen and (max-width: 1200px) { 207 | .shadow-demo { 208 | width: 100px; 209 | height: 100px; } } 210 | @media only screen and (max-width: 600px) { 211 | .shadow-demo { 212 | width: 150px; 213 | height: 150px; } } 214 | 215 | 216 | .caption{ 217 | font-size: 1.25rem; 218 | font-weight: 300; 219 | margin-bottom: 30px; 220 | } 221 | 222 | 223 | 224 | footer.example { 225 | padding-left: 0; } 226 | 227 | .icon-demo { 228 | line-height: 50px; } 229 | 230 | .icon-container i { 231 | font-size: 3em; 232 | display: block; 233 | margin-bottom: 10px; } 234 | 235 | .icon-container .icon-preview { 236 | height: 120px; 237 | text-align: center; } 238 | 239 | .icon-holder { 240 | display: block; 241 | text-align: center; 242 | width: 150px; 243 | height: 115px; 244 | float: left; 245 | margin: 0 0px 15px 0px; } 246 | .icon-holder p { 247 | margin: 0 0; } 248 | 249 | #staggered-test li, #image-test { 250 | opacity: 0; } 251 | 252 | @media only screen and (min-width : 993px) { 253 | .container { 254 | width: 85%; } } 255 | 256 | 257 | a.button-collapse.top-nav { 258 | position: absolute; 259 | text-align: center; 260 | height: 48px; 261 | width: 48px; 262 | left: 7.5%; 263 | top: 0; 264 | float: none; 265 | margin-left: 1.5rem; 266 | color: #fff; 267 | font-size: 32px; 268 | z-index: 2; } 269 | a.button-collapse.top-nav.full { 270 | line-height: 122px; } 271 | 272 | @media only screen and (max-width : 600px) { 273 | a.button-collapse.top-nav { 274 | left: 5%; } } 275 | 276 | 277 | @media only screen and (max-width : 730px) { 278 | .mobile-image { 279 | max-width: 100%; } } 280 | 281 | -------------------------------------------------------------------------------- /public/css/_variables.css: -------------------------------------------------------------------------------- 1 | .primary-bg { 2 | background-color: #ee6e73; 3 | } 4 | .text-light { 5 | color: #fff; 6 | } 7 | .text-pink { 8 | color: #ee6e73; 9 | } 10 | .text-xs { 11 | font-size: 10px; 12 | } 13 | .text-sm { 14 | font-size: 12px; 15 | } 16 | .text-medium { 17 | font-size: 14px; 18 | } 19 | .text-lg { 20 | font-size: 16px; 21 | } 22 | .text-xl { 23 | font-size: 18px; 24 | } 25 | .text-xxl { 26 | font-size: 20px; 27 | } 28 | .btn-primary-bg { 29 | background-color: #f3989b; 30 | } 31 | .btn-primary-bg:hover { 32 | background-color: #f5a5a8; 33 | } 34 | -------------------------------------------------------------------------------- /public/css/_variables.styl: -------------------------------------------------------------------------------- 1 | //about background 2 | 3 | $primary-bg=#ee6e73 4 | .primary-bg 5 | background-color $primary-bg 6 | 7 | 8 | //about text color 9 | $text-light=#ffffff 10 | .text-light 11 | color $text-light 12 | 13 | 14 | $text-pink=#ee6e73 15 | .text-pink 16 | color $text-pink 17 | 18 | //text size 19 | $text-size=xs sm medium lg xl xxl 20 | 21 | for size,i in $text-size 22 | .text-{size}{ 23 | font-size (i+5)*2px 24 | } 25 | 26 | 27 | 28 | 29 | //about button color 30 | $btn-primary-bg=#f3989b; 31 | .btn-primary-bg 32 | background-color $btn-primary-bg; 33 | &:hover 34 | background-color #f5a5a8; -------------------------------------------------------------------------------- /public/css/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: 'Open Sans', Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", SimSun, "宋体", Heiti, "黑体", sans-serif; 3 | } 4 | .primary-bg { 5 | background-color: #ee6e73; 6 | } 7 | .text-light { 8 | color: #fff; 9 | } 10 | .text-pink { 11 | color: #ee6e73; 12 | } 13 | .text-xs { 14 | font-size: 10px; 15 | } 16 | .text-sm { 17 | font-size: 12px; 18 | } 19 | .text-medium { 20 | font-size: 14px; 21 | } 22 | .text-lg { 23 | font-size: 16px; 24 | } 25 | .text-xl { 26 | font-size: 18px; 27 | } 28 | .text-xxl { 29 | font-size: 20px; 30 | } 31 | .btn-primary-bg { 32 | background-color: #f3989b; 33 | } 34 | .btn-primary-bg:hover { 35 | background-color: #f5a5a8; 36 | } 37 | .sidebar { 38 | width: 240px; 39 | position: fixed; 40 | box-shadow: 2px 2px 2px #ddd; 41 | height: 100%; 42 | background-color: #fff; 43 | z-index: 998; 44 | } 45 | .sidebar:hover { 46 | overflow-y: auto; 47 | } 48 | .sidebar li:hover { 49 | background-color: rgba(0,0,0,0.05); 50 | } 51 | @media screen and (max-width: 992px) { 52 | .sidebar { 53 | left: -245px; 54 | } 55 | } 56 | .sidebar .logo { 57 | width: 100%; 58 | text-align: center; 59 | height: 90px; 60 | border-bottom: 1px solid #ddd; 61 | margin-top: 30px; 62 | } 63 | .sidebar a { 64 | line-height: 44px; 65 | height: 44px; 66 | font-weight: bolder; 67 | display: block; 68 | color: #444; 69 | padding: 0 25px; 70 | } 71 | .sidebar .collapsible { 72 | border: none; 73 | box-shadow: none; 74 | margin: 0; 75 | } 76 | .sidebar .collapsible-accordion > li.active { 77 | background-color: rgba(0,0,0,0.05); 78 | } 79 | .sidebar .collapsible-header { 80 | border: none; 81 | background-color: transparent; 82 | } 83 | .sidebar .collapsible-body { 84 | background-color: #fff; 85 | border: none; 86 | } 87 | .sidebar .collapsible-body ul { 88 | font-weight: 300; 89 | } 90 | .sidebar .collapsible-body a { 91 | padding-left: 40px; 92 | } 93 | .sidebar-collapsible:hover { 94 | background-color: #fff !important; 95 | } 96 | .sidebar .collapsible-body li.active, 97 | .side-nav.fixed .collapsible-body li.active { 98 | background-color: #ee6e73; 99 | } 100 | .sidebar .collapsible-body li.active a, 101 | .side-nav.fixed .collapsible-body li.active a { 102 | color: #fff; 103 | } 104 | .sidebar.in { 105 | overflow: auto; 106 | left: 0; 107 | box-shadow: none; 108 | transition: left 0.5s ease; 109 | } 110 | html { 111 | background-color: #fcfcfc; 112 | } 113 | .header { 114 | color: #ee6e73; 115 | } 116 | .promo { 117 | width: 100%; 118 | } 119 | main, 120 | footer { 121 | padding-left: 240px; 122 | } 123 | @media only screen and (max-width: 992px) { 124 | main, 125 | footer { 126 | padding-left: 0; 127 | } 128 | .promo { 129 | width: 60%; 130 | margin: 0 auto; 131 | display: block; 132 | } 133 | } 134 | .promo i { 135 | color: #ee6e73; 136 | font-size: 7rem; 137 | display: block; 138 | } 139 | .promo-caption { 140 | font-size: 1.7rem; 141 | font-weight: 500; 142 | margin-top: 5px; 143 | margin-bottom: 0; 144 | } 145 | .col.grid-example { 146 | border: 1px solid #eee; 147 | margin: 7px 0; 148 | text-align: center; 149 | line-height: 50px; 150 | font-size: 28px; 151 | background-color: #ff6347; 152 | color: #fff; 153 | padding: 0; 154 | } 155 | .col.grid-example span { 156 | font-weight: 200; 157 | line-height: 50px; 158 | } 159 | .promo-example { 160 | overflow: hidden; 161 | } 162 | .dynamic-color .red, 163 | .dynamic-color .pink, 164 | .dynamic-color .purple, 165 | .dynamic-color .deep-purple, 166 | .dynamic-color .indigo, 167 | .dynamic-color .blue, 168 | .dynamic-color .light-blue, 169 | .dynamic-color .cyan, 170 | .dynamic-color .teal, 171 | .dynamic-color .green, 172 | .dynamic-color .light-green, 173 | .dynamic-color .lime, 174 | .dynamic-color .yellow, 175 | .dynamic-color .amber, 176 | .dynamic-color .orange, 177 | .dynamic-color .deep-orange, 178 | .dynamic-color .brown, 179 | .dynamic-color .grey, 180 | .dynamic-color .blue-grey, 181 | .dynamic-color .black, 182 | .dynamic-color .white, 183 | .dynamic-color .transparent { 184 | height: 55px; 185 | width: 100%; 186 | padding: 0 15px; 187 | line-height: 55px; 188 | font-weight: 500; 189 | font-size: 12px; 190 | display: block; 191 | -webkit-box-sizing: border-box; 192 | -moz-box-sizing: border-box; 193 | box-sizing: border-box; 194 | } 195 | .dynamic-color .col { 196 | margin-bottom: 55px; 197 | } 198 | p { 199 | color: rgba(0,0,0,0.71); 200 | padding: 0; 201 | -webkit-font-smoothing: antialiased; 202 | } 203 | #download-button { 204 | font-size: 20px; 205 | } 206 | code, 207 | pre { 208 | position: relative; 209 | font-size: 1.1rem; 210 | } 211 | pre[class*="language-"] { 212 | padding: 25px 12px 7px 12px; 213 | border: solid 1px rgba(51,51,51,0.12); 214 | } 215 | pre[class*="language-"]:before { 216 | position: absolute; 217 | padding: 1px 5px; 218 | background: #e8e6e3; 219 | top: 0; 220 | left: 0; 221 | font-family: sans-serif; 222 | -webkit-font-smoothing: antialiased; 223 | color: #555; 224 | content: attr(class); 225 | font-size: 0.9rem; 226 | border: solid 1px rgba(51,51,51,0.12); 227 | border-top: none; 228 | border-left: none; 229 | } 230 | #site-layout-example-left { 231 | background-color: #90a4ae; 232 | height: 300px; 233 | } 234 | #site-layout-example-right { 235 | background-color: #26a69a; 236 | height: 300px; 237 | } 238 | #site-layout-example-top { 239 | background-color: #e57373; 240 | height: 42px; 241 | } 242 | .flat-text-header { 243 | height: 35px; 244 | width: 80%; 245 | background-color: rgba(255,255,255,0.15); 246 | display: block; 247 | margin: 27px auto; 248 | } 249 | .flat-text { 250 | height: 25px; 251 | width: 80%; 252 | background-color: rgba(0,0,0,0.15); 253 | display: block; 254 | margin: 27px auto; 255 | } 256 | .flat-text.small { 257 | width: 25%; 258 | height: 25px; 259 | background-color: rgba(0,0,0,0.15); 260 | } 261 | .flat-text.full-width { 262 | width: 100%; 263 | } 264 | .browser-window { 265 | text-align: left; 266 | width: 100%; 267 | height: auto; 268 | display: inline-block; 269 | border-radius: 5px 5px 2px 2px; 270 | background-color: #fff; 271 | margin: 20px 0px; 272 | overflow: hidden; 273 | } 274 | .browser-window .top-bar { 275 | height: 30px; 276 | border-radius: 5px 5px 0 0; 277 | border-top: thin solid #eaeae9; 278 | border-bottom: thin solid #dfdfde; 279 | background: linear-gradient(#e7e7e6, #e2e2e1); 280 | } 281 | .browser-window .circle { 282 | height: 10px; 283 | width: 10px; 284 | display: inline-block; 285 | border-radius: 50%; 286 | background-color: #fff; 287 | margin-right: 1px; 288 | } 289 | #close-circle { 290 | background-color: #ff5c5a; 291 | } 292 | #minimize-circle { 293 | background-color: #ffbb50; 294 | } 295 | #maximize-circle { 296 | background-color: #1bc656; 297 | } 298 | .browser-window .circles { 299 | margin: 5px 12px; 300 | } 301 | .browser-window .content { 302 | margin: 0; 303 | width: 100%; 304 | display: inline-block; 305 | border-radius: 0 0 5px 5px; 306 | background-color: #fafafa; 307 | } 308 | .browser-window .row { 309 | margin: 0; 310 | } 311 | .clear { 312 | clear: both; 313 | } 314 | .valign-demo { 315 | height: 400px; 316 | background-color: #ddd; 317 | } 318 | .talign-demo { 319 | height: 100px; 320 | background-color: #ddd; 321 | } 322 | .shadow-demo { 323 | background-color: #26a69a; 324 | width: 125px; 325 | height: 125px; 326 | margin: 20px auto; 327 | } 328 | @media only screen and (max-width: 1200px) { 329 | .shadow-demo { 330 | width: 100px; 331 | height: 100px; 332 | } 333 | } 334 | @media only screen and (max-width: 600px) { 335 | .shadow-demo { 336 | width: 150px; 337 | height: 150px; 338 | } 339 | } 340 | .caption { 341 | font-size: 1.25rem; 342 | font-weight: 300; 343 | margin-bottom: 30px; 344 | } 345 | footer.example { 346 | padding-left: 0; 347 | } 348 | .icon-demo { 349 | line-height: 50px; 350 | } 351 | .icon-container i { 352 | font-size: 3em; 353 | display: block; 354 | margin-bottom: 10px; 355 | } 356 | .icon-container .icon-preview { 357 | height: 120px; 358 | text-align: center; 359 | } 360 | .icon-holder { 361 | display: block; 362 | text-align: center; 363 | width: 150px; 364 | height: 115px; 365 | float: left; 366 | margin: 0 0px 15px 0px; 367 | } 368 | .icon-holder p { 369 | margin: 0 0; 370 | } 371 | #staggered-test li, 372 | #image-test { 373 | opacity: 0; 374 | } 375 | @media only screen and (min-width: 993px) { 376 | .container { 377 | width: 85%; 378 | } 379 | } 380 | a.button-collapse.top-nav { 381 | position: absolute; 382 | text-align: center; 383 | height: 48px; 384 | width: 48px; 385 | left: 7.5%; 386 | top: 0; 387 | float: none; 388 | margin-left: 1.5rem; 389 | color: #fff; 390 | font-size: 32px; 391 | z-index: 2; 392 | } 393 | a.button-collapse.top-nav.full { 394 | line-height: 122px; 395 | } 396 | @media only screen and (max-width: 600px) { 397 | a.button-collapse.top-nav { 398 | left: 5%; 399 | } 400 | } 401 | @media only screen and (max-width: 730px) { 402 | .mobile-image { 403 | max-width: 100%; 404 | } 405 | } 406 | #download-button { 407 | width: 260px; 408 | height: 70px; 409 | line-height: 70px; 410 | } 411 | -------------------------------------------------------------------------------- /public/css/index.styl: -------------------------------------------------------------------------------- 1 | 2 | @import '_normalize' 3 | @import '_variables' 4 | @import '_main' 5 | @import '_sidebar' 6 | @import '_footer' 7 | 8 | @import '_style' 9 | 10 | #download-button 11 | width 260px 12 | height 70px 13 | line-height 70px -------------------------------------------------------------------------------- /public/css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss+bash */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | /* text-shadow: 0 1px white;*/ 12 | font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.4; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important { 127 | font-weight: bold; 128 | } 129 | 130 | .token.entity { 131 | cursor: help; 132 | } 133 | 134 | -------------------------------------------------------------------------------- /public/font/Material-Design-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/font/Material-Design-Icons.eot -------------------------------------------------------------------------------- /public/font/Material-Design-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/font/Material-Design-Icons.ttf -------------------------------------------------------------------------------- /public/font/Material-Design-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/font/Material-Design-Icons.woff -------------------------------------------------------------------------------- /public/font/Material-Design-Icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/font/Material-Design-Icons.woff2 -------------------------------------------------------------------------------- /public/img/materialize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 57 | 58 | 60 | 61 | 63 | 64 | 66 | 67 | 69 | 70 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 130 | 131 | 133 | 134 | 136 | 137 | 139 | 140 | 142 | 143 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /public/img/menu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/menu.gif -------------------------------------------------------------------------------- /public/img/office.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/office.jpg -------------------------------------------------------------------------------- /public/img/parallax1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/parallax1.jpg -------------------------------------------------------------------------------- /public/img/parallax2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/parallax2.jpg -------------------------------------------------------------------------------- /public/img/responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/responsive.png -------------------------------------------------------------------------------- /public/img/sample-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/sample-1.jpg -------------------------------------------------------------------------------- /public/img/style_typography_roboto1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/style_typography_roboto1.png -------------------------------------------------------------------------------- /public/img/toast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/toast.gif -------------------------------------------------------------------------------- /public/img/yuna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/public/img/yuna.jpg -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-16. 3 | */ 4 | $(function () { 5 | 6 | 7 | 8 | // Floating-Fixed table of contents 9 | if ($('nav').length) { 10 | $('.toc-wrapper').pushpin({top: $('nav').height()}); 11 | } 12 | else if ($('#index-banner').length) { 13 | $('.toc-wrapper').pushpin({top: $('#index-banner').height()}); 14 | } 15 | else { 16 | $('.toc-wrapper').pushpin({top: 0}); 17 | } 18 | function activeSidebar() { 19 | var pathname = window.location.pathname.substring(1); 20 | var pathList = $('aside li a'); 21 | for (var i = 0, l = pathList.length; i < l; i++) { 22 | var tempa = pathList.eq(i); 23 | 24 | if (tempa.attr('href') === pathname) { 25 | tempa.parent().addClass('active'); 26 | tempa.parents('.collapsible-body').show().parent().addClass('active').children('a').addClass('active'); 27 | } 28 | } 29 | } 30 | 31 | activeSidebar(); 32 | 33 | function rgb2hex(rgb) { 34 | if (/^#[0-9A-F]{6}$/i.test(rgb)) { 35 | return rgb; 36 | } 37 | 38 | rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 39 | 40 | if (rgb === null) { 41 | return "N/A"; 42 | } 43 | 44 | function hex(x) { 45 | return ("0" + parseInt(x).toString(16)).slice(-2); 46 | } 47 | 48 | return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 49 | } 50 | 51 | $('.dynamic-color .col').each(function () { 52 | $(this).children().each(function () { 53 | var color = $(this).css('background-color'), 54 | classes = $(this).attr('class'); 55 | $(this).html(rgb2hex(color) + " " + classes); 56 | if (classes.indexOf("darken") >= 0 || $(this).hasClass('black')) { 57 | $(this).css('color', 'rgba(255,255,255,.9'); 58 | } 59 | }); 60 | }); 61 | 62 | var toggleContainersButton = $('#container-toggle-button'); 63 | toggleContainersButton.click(function () { 64 | $('body .browser-window .container, .had-container').each(function () { 65 | $(this).toggleClass('had-container'); 66 | $(this).toggleClass('container'); 67 | if ($(this).hasClass('container')) { 68 | toggleContainersButton.text("不用Containers"); 69 | } 70 | else { 71 | toggleContainersButton.text("用Containers"); 72 | } 73 | }); 74 | }); 75 | 76 | 77 | // Toggle Flow Text 78 | var toggleFlowTextButton = $('#flow-toggle'); 79 | toggleFlowTextButton.click(function () { 80 | $('#flow-text-demo').children('p').each(function () { 81 | $(this).toggleClass('flow-text'); 82 | }) 83 | }); 84 | $('.datepicker').pickadate({ 85 | selectMonths: true, // Creates a dropdown to control month 86 | selectYears : 15,// Creates a dropdown of 15 years to control year 87 | format : 'yyyy-mm-dd ' 88 | }); 89 | $('.scrollspy').scrollSpy(); 90 | $('select').not('.disabled').material_select(); 91 | $('.slider').slider({full_width: true}); 92 | $('.modal-trigger').leanModal(); 93 | $('.parallax').parallax(); 94 | 95 | $('#nav-button').on('click', function () { 96 | var $navMobile=$('#nav-mobile'); 97 | var $body=$('body'); 98 | $navMobile.addClass('in'); 99 | $body.css('overflow','hidden'); 100 | var overlay=$('
'); 101 | overlay.on('click',function(){ 102 | $navMobile.removeClass('in'); 103 | overlay.remove(); 104 | $body.css('overflow','auto'); 105 | }); 106 | $body.append(overlay); 107 | }) 108 | 109 | }); 110 | 111 | -------------------------------------------------------------------------------- /public/js/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss+bash */ 2 | self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){g.lastIndex=0;var m=g.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),O=[p,1];b&&O.push(b);var N=new a(l,u?t.tokenize(m,u):m,h);O.push(N),w&&O.push(w),Array.prototype.splice.apply(r,O)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var s="";for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').+?\1/gi,inside:{"attr-name":{pattern:/^\s*style/gi,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/gi,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));; 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|-?Infinity)\b/g,"function":/(?!\d)[a-z0-9_$]+(?=\()/gi}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});; 7 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});; 8 | Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});; 9 | -------------------------------------------------------------------------------- /routers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-12. 3 | */ 4 | 5 | var express = require('express'); 6 | var router = express.Router(); 7 | var index = require('./controllers/index'); 8 | 9 | router.get('/', index.index); 10 | router.get('/start', index.start); 11 | router.get('/color', index.color); 12 | router.get('/grid', index.grid); 13 | router.get('/helpers', index.helpers); 14 | router.get('/media-css', index.mediacss); 15 | router.get('/sass', index.sass); 16 | router.get('/shadow', index.shadow); 17 | router.get('/table', index.table); 18 | router.get('/typography', index.typography); 19 | //components 20 | router.get('/badges', index.badges); 21 | router.get('/buttons', index.buttons); 22 | router.get('/cards', index.cards); 23 | router.get('/collections', index.collections); 24 | router.get('/footer', index.footer); 25 | router.get('/forms', index.forms); 26 | router.get('/icons', index.icons); 27 | router.get('/navbar', index.navbar); 28 | router.get('/pagination', index.pagination); 29 | router.get('/preloader', index.preloader); 30 | //javascript 31 | router.get('/collapsible', index.collapsible); 32 | router.get('/dialogs', index.dialogs); 33 | router.get('/dropdown', index.dropdown); 34 | router.get('/media', index.media); 35 | router.get('/modals', index.modals); 36 | router.get('/parallax', index.parallax); 37 | router.get('/parallax-demo', index.parallaxdemo); 38 | router.get('/pushpin', index.pushpin); 39 | router.get('/scrollfire', index.scrollfire); 40 | router.get('/scrollspy', index.scrollspy); 41 | router.get('/side-nav', index.sidenav); 42 | router.get('/tabs', index.tabs); 43 | router.get('/transitions', index.transitions); 44 | router.get('/waves', index.waves); 45 | 46 | router.get('/mobile', index.mobile); 47 | router.get('/showcase', index.showcase); 48 | router.get('/fullscreen-slider-demo', index.fsd); 49 | 50 | router.get('/sitemap.xml', index.sitemap); 51 | 52 | module.exports = router; -------------------------------------------------------------------------------- /service/hbshelpers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by panew on 15-6-12. 3 | */ 4 | /** 5 | * Created by panew on 15-3-17. 6 | */ 7 | var moment = require('moment'); 8 | 9 | 10 | module.exports = { 11 | extname : 'hbs', 12 | defaultLayout: 'layout', 13 | helpers : { 14 | block : function (name) { 15 | var blocks = this._blocks; 16 | content = blocks && blocks[name]; 17 | return content ? content.join('\n') : null; 18 | }, 19 | contentFor : function (name, options) { 20 | var blocks = this._blocks || (this._blocks = {}), 21 | block = blocks[name] || (blocks[name] = []); 22 | 23 | block.push(options.fn(this)); 24 | }, 25 | formatDate : function (item) { 26 | if (moment().isSame(item, 'day')) { 27 | return moment(item).format('HH:mm'); 28 | } 29 | return moment(item).format('MM-DD HH:mm'); 30 | }, 31 | getDay : function (item) { 32 | return moment(item).format('DD'); 33 | }, 34 | titlesplice: function (title) { 35 | return title.length > 16 ? title.substring(0, 16) : title; 36 | } 37 | } 38 | }; -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | http://www.materialscss.com/ 5 | 6 | 7 | 0.8 8 | 9 | 10 | http://www.materialscss.com/start 11 | 12 | 13 | 0.8 14 | 15 | 16 | http://www.materialscss.com/color 17 | 18 | 19 | 0.8 20 | 21 | 22 | http://www.materialscss.com/grid 23 | 24 | 25 | 0.8 26 | 27 | 28 | http://www.materialscss.com/helpers 29 | 30 | 31 | 0.8 32 | 33 | 34 | http://www.materialscss.com/media-css 35 | 36 | 37 | 0.8 38 | 39 | 40 | http://www.materialscss.com/shadow 41 | 42 | 43 | 0.8 44 | 45 | 46 | http://www.materialscss.com/table 47 | 48 | 49 | 0.8 50 | 51 | 52 | http://www.materialscss.com/typography 53 | 54 | 55 | 0.8 56 | 57 | 58 | http://www.materialscss.com/badges 59 | 60 | 61 | 0.8 62 | 63 | 64 | http://www.materialscss.com/buttons 65 | 66 | 67 | 0.8 68 | 69 | 70 | http://www.materialscss.com/cards 71 | 72 | 73 | 0.8 74 | 75 | 76 | http://www.materialscss.com/collections 77 | 78 | 79 | 0.8 80 | 81 | 82 | http://www.materialscss.com/footer 83 | 84 | 85 | 0.8 86 | 87 | 88 | http://www.materialscss.com/forms 89 | 90 | 91 | 0.8 92 | 93 | 94 | http://www.materialscss.com/icons 95 | 96 | 97 | 0.8 98 | 99 | 100 | http://www.materialscss.com/navbar 101 | 102 | 103 | 0.8 104 | 105 | 106 | http://www.materialscss.com/pagination 107 | 108 | 109 | 0.8 110 | 111 | 112 | http://www.materialscss.com/preloader 113 | 114 | 115 | 0.8 116 | 117 | 118 | http://www.materialscss.com/collapsible 119 | 120 | 121 | 0.8 122 | 123 | 124 | http://www.materialscss.com/dialogs 125 | 126 | 127 | 0.8 128 | 129 | 130 | http://www.materialscss.com/dropdown 131 | 132 | 133 | 0.8 134 | 135 | 136 | http://www.materialscss.com/media 137 | 138 | 139 | 0.8 140 | 141 | 142 | http://www.materialscss.com/modals 143 | 144 | 145 | 0.8 146 | 147 | 148 | http://www.materialscss.com/parallax 149 | 150 | 151 | 0.8 152 | 153 | 154 | http://www.materialscss.com/pushpin 155 | 156 | 157 | 0.8 158 | 159 | 160 | http://www.materialscss.com/scrollfire 161 | 162 | 163 | 0.8 164 | 165 | 166 | http://www.materialscss.com/scrollspy 167 | 168 | 169 | 0.8 170 | 171 | 172 | http://www.materialscss.com/side-nav 173 | 174 | 175 | 0.8 176 | 177 | 178 | http://www.materialscss.com/tabs 179 | 180 | 181 | 0.8 182 | 183 | 184 | http://www.materialscss.com/transitions 185 | 186 | 187 | 0.8 188 | 189 | 190 | http://www.materialscss.com/waves 191 | 192 | 193 | 0.8 194 | 195 | 196 | http://www.materialscss.com/mobile 197 | 198 | 199 | 0.8 200 | 201 | 202 | http://www.materialscss.com/showcase 203 | 204 | 205 | 0.8 206 | 207 | 208 | -------------------------------------------------------------------------------- /views/components/badges.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

徽章

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |

16 | 徽章能用来通知你有新消息或者提醒信息。使用new为徽章设置背景色。 17 |

18 |

集合

19 | 20 |
21 | Alan1 22 | Alan4 23 | Alan 24 | Alan14 25 |
26 | 

27 |     <div class="collection">
28 |       <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
29 |       <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
30 |       <a href="#!" class="collection-item">Alan</a>
31 |       <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
32 |     </div>
33 |
34 |
35 |
36 |
37 | 38 | 65 | 66 | 67 |
68 | 69 | 70 |
71 |
72 |
73 | 77 |
78 |
79 |
80 |
81 |
-------------------------------------------------------------------------------- /views/components/buttons.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

按钮

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

14 | 在Material Design中共有三种不同的按钮类型。上浮按钮，在视觉上提供一些阴影处理，作为标准的按钮意味着它可以被用来点击。 15 | 浮动的圆形按钮常常意味着一些非常重要的功能。扁平按钮通常用在一些模块的内部，例如卡片或者弹出层。 16 |

17 |

上浮

18 | button 19 | button 20 | button 21 | 

 22 |   <a class="waves-effect waves-light btn">Stuff</a>
 23 |   <a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
 24 |   <a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
 25 |
26 |
27 |
28 |

浮动

29 |

30 | 

 31 |   <a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
 32 |
33 |
34 | 35 |

固定

36 |

如果你想固定一个浮动按钮，当鼠标划过的时候显示更多的操作。请看页面右下角的示例。

37 | 

 38 |   <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
 39 |     <a class="btn-floating btn-large red">
 40 |       <i class="large mdi-editor-mode-edit"></i>
 41 |     </a>
 42 |     <ul>
 43 |       <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
 44 |       <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
 45 |       <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
 46 |       <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
 47 |     </ul>
 48 |   </div>
 49 |
50 |
51 | 52 | 53 | 54 |
    55 |
    • 56 |
    • 57 |
    • 58 |
    • 59 |
60 |
61 |
62 |
63 |

扁平

64 | Button 65 | 

 66 |   <a class="waves-effect waves-teal btn-flat">Button</a>
 67 |
68 |
69 |
70 |

提交

71 | 72 |

73 | 当你想提交一个表单，不要用input标签，用一个包含type="submit"的button标签。 74 |

75 | 76 | 

 77 |   <button class="btn waves-effect waves-light" type="submit" name="action">Submit
 78 |     <i class="mdi-content-send right"></i>
 79 |   </button>
 80 |
81 |
82 |
83 |

大号

84 |

大块头通常能引起你的注意。

85 | Button 86 | button 87 | button 88 | 

 89 |   <a class="waves-effect waves-light btn-large">Button</a>
 90 |   <a class="waves-effect waves-light btn-large"><i class="mdi-file-cloud left"></i>button</a>
 91 |   <a class="waves-effect waves-light btn-large"><i class="mdi-file-cloud right"></i>button</a>
 92 |
93 |
94 |
95 |

禁用

96 |

在任何类型的按钮中都能使用这个特性。

97 | Button 98 | Button 99 | Button 100 | 101 | 

102 |   <a class="btn-large disabled">Button</a>
103 |   <a class="btn disabled">Button</a>
104 |   <a class="btn-flat disabled">Button</a>
105 |   <a class="btn-floating disabled"><i class="mdi-content-add"></i></a>
106 |
107 |
108 |
109 | 110 | 111 |
112 |
113 |
114 | 122 |
123 |
124 |
125 |
126 |
-------------------------------------------------------------------------------- /views/components/collections.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

集合

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |

集合能让你列出一组对象。

17 |

Basic

18 |
    19 |
  • Alvin
    • 20 |
  • Alvin
    • 21 |
  • Alvin
    • 22 |
  • Alvin
    • 23 |
24 | 

 25 |   <ul class="collection">
 26 |     <li class="collection-item">Alvin</li>
 27 |     <li class="collection-item">Alvin</li>
 28 |     <li class="collection-item">Alvin</li>
 29 |     <li class="collection-item">Alvin</li>
 30 |   </ul>
 31 |
32 |
33 |
34 |
35 |
36 | 37 | 58 | 59 |
60 |
61 |
62 |

标题

63 |
    64 |

  • First Names

    • 65 |
  • Alvin
    • 66 |
  • Alvin
    • 67 |
  • Alvin
    • 68 |
  • Alvin
    • 69 |
70 | 

 71 |    <ul class="collection with-header">
 72 |      <li class="collection-header"><h4>First Names</h4></li>
 73 |      <li class="collection-item">Alvin</li>
 74 |      <li class="collection-item">Alvin</li>
 75 |      <li class="collection-item">Alvin</li>
 76 |      <li class="collection-item">Alvin</li>
 77 |    </ul>
 78 |
79 |
80 |
81 |
82 | 83 | 84 |
85 |
86 |
87 |

次要内容

88 |
    89 |

  • First Names

    • 90 |
  • Alvin
    • 91 |
  • Alvin
    • 92 |
  • Alvin
    • 93 |
  • Alvin
    • 94 |
95 | 

 96 |    <ul class="collection with-header">
 97 |      <li class="collection-header"><h4>First Names</h4></li>
 98 |      <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
 99 |      <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
100 |      <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
101 |      <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li>
102 |    </ul>
103 |
104 |
105 | 106 |
107 |
108 | 109 |
110 |
111 |
112 |

头像

113 |
    114 |
  • 115 | 116 | Title 117 |

    First Line
    118 | Second Line 119 |

    120 | 121 |
    • 122 |
  • 123 | 124 | Title 125 |

    First Line
    126 | Second Line 127 |

    128 | 129 |
    • 130 |
  • 131 | 132 | Title 133 |

    First Line
    134 | Second Line 135 |

    136 | 137 |
    • 138 |
  • 139 | 140 | Title 141 |

    First Line
    142 | Second Line 143 |

    144 | 145 |
    • 146 |
147 | 

148 |    <ul class="collection">
149 |      <li class="collection-item avatar">
150 |        <img src="images/yuna.jpg" alt="" class="circle">
151 |        <span class="title">Title</span>
152 |        <p>First Line <br>
153 |        Second Line
154 |        </p>
155 |        <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
156 |      </li>
157 |      <li class="collection-item avatar">
158 |        <i class="mdi-file-folder circle"></i>
159 |        <span class="title">Title</span>
160 |        <p>First Line <br>
161 |        Second Line
162 |        </p>
163 |        <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
164 |      </li>
165 |      <li class="collection-item avatar">
166 |        <i class="mdi-action-assessment circle green"></i>
167 |        <span class="title">Title</span>
168 |        <p>First Line <br>
169 |        Second Line
170 |        </p>
171 |        <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
172 |      </li>
173 |      <li class="collection-item avatar">
174 |        <i class="mdi-av-play-arrow circle red"></i>
175 |        <span class="title">Title</span>
176 |        <p>First Line <br>
177 |        Second Line
178 |        </p>
179 |        <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a>
180 |      </li>
181 |    </ul>
182 |
183 |
184 | 185 |
186 |
187 | 188 |
189 | 190 | 191 |
192 |
193 |
194 | 201 |
202 |
203 |
204 |
205 |
-------------------------------------------------------------------------------- /views/components/footer.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

页脚

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 82 | 83 | 88 | 89 | 

 90 |   body {
 91 |     display: flex;
 92 |     min-height: 100vh;
 93 |     flex-direction: column;
 94 |   }
 95 | 
 96 |   main {
 97 |     flex: 1 0 auto;
 98 |   }
 99 |
100 | 101 | 102 |
103 | 104 | 105 |
106 |
107 |
108 | 112 |
113 |
114 |
115 |
116 |
-------------------------------------------------------------------------------- /views/components/pagination.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

分页

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |

16 | 使用分页控件来分割过长的内容，使其更加容易读阅。 17 |

18 |

基本

19 |
    20 |
    • 21 |
  • 1
    • 22 |
  • 2
    • 23 |
  • 3
    • 24 |
  • 4
    • 25 |
  • 5
    • 26 |
    • 27 |
28 |

29 | 

30 |   <ul class="pagination">
31 |     <li class="disabled"><a href="#!"><i class="mdi-navigation-chevron-left"></i></a></li>
32 |     <li class="active"><a href="#!">1</a></li>
33 |     <li class="waves-effect"><a href="#!">2</a></li>
34 |     <li class="waves-effect"><a href="#!">3</a></li>
35 |     <li class="waves-effect"><a href="#!">4</a></li>
36 |     <li class="waves-effect"><a href="#!">5</a></li>
37 |     <li class="waves-effect"><a href="#!"><i class="mdi-navigation-chevron-right"></i></a></li>
38 |   </ul>
39 |
40 |
41 |
42 |
43 |
44 | 45 |
46 | 47 | 48 |
49 |
50 |
51 | 54 |
55 |
56 |
57 |
58 |
-------------------------------------------------------------------------------- /views/css/helpers.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

帮助类

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

对齐

14 |

使用几个简单的class你就能对页面内容进行对齐

15 | 16 |
垂直对齐
17 |

18 | 通过在外部包裹容器中使用valign-wrapper，就能保持内部的元素进行垂直对齐。 19 |

20 |
WOW垂直对齐
21 |
22 | 

 23 |     <div class="valign-wrapper">
 24 |       <h5 class="valign">WOW垂直对齐</h5>
 25 |     </div>
 26 |

27 | 28 |
文本对齐
29 |

这些主要是水平对齐。包括.left-align, .right-align and .center-align

30 |
31 |
32 |
左对齐
33 |
34 |
35 |
36 |
37 |
右对齐
38 |
39 |
40 |
41 |
42 |
居中
43 |
44 | 

 45 |     <div>
 46 |       <h5 class="left-align">This should be left aligned</h5>
 47 |     </div>
 48 |     <div>
 49 |       <h5 class="right-align">This should be right aligned</h5>
 50 |     </div>
 51 |     <div>
 52 |       <h5 class="center-align">This should be center aligned</h5>
 53 |     </div>
 54 |

55 | 56 |
浮动
57 |

通过使用left or right能快速的浮动任何元素。且用!important来避免一些特殊问题。

58 | 

 59 |   <div class="left">...</div>
 60 |   <div class="right">...</div>
 61 |

62 | 63 |
64 | 65 | 66 |
67 |

隐藏

68 |

我们提供了几个class来在不同的屏幕尺寸上进行显隐。

69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
Screen Range
.hide所有尺寸
.hide-on-small-only手机
.hide-on-med-only平板
.hide-on-med-and-down平板及以下尺寸
.hide-on-med-and-up平板及以上尺寸
.hide-on-large-only桌面电脑
103 |
104 |
用法
105 | 

106 |   <div class="hide-on-small-only"></div>
107 |

108 | 109 |
110 | 111 | 112 | 113 | 114 |
115 |

格式化

116 |

这些类帮助你格式化网页上不同的内容。

117 | 118 |
省略
119 |

使过长的文字用省略号代替,给包含长段文字的标签添加 truncate，看下面的例子。

120 |
121 |
122 |
123 |

妈妈说名字要起得长一点才能被别人看到

124 |
125 |
126 |
127 | 128 | 

129 |   <h4 class="truncate">妈妈说名字要起得长一点才能被别人看到</h4>
130 |

131 | 132 |
133 |
134 | 135 | 136 |
137 |
138 |
139 | 144 |
145 |
146 |
147 |
148 |
-------------------------------------------------------------------------------- /views/css/mediacss.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

CSS媒体

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

图片

14 |

Materialize已定义了多种图片样式

15 | 16 |

响应式图片

17 |

为了响应式地处理图片大小，添加 responsive-img 到img标签中就可以。原理是它定义了 max-width: 100% 和 height:auto两个属性。

18 | 

 19 |   <img class="responsive-img" src="cool_pic.jpg">
 20 |
21 |

圆形图片

22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 | 使用circle就能把方形图片转化为圆形的。 31 | 32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 |

为了使图片看起来是圆的，使用 class="circle"。

40 | 

 41 |   <div class="col s12 m8 offset-m2 l6 offset-l3">
 42 |     <div class="card-panel grey lighten-5 z-depth-1">
 43 |       <div class="row valign-wrapper">
 44 |         <div class="col s2">
 45 |           <img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
 46 |         </div>
 47 |         <div class="col s10">
 48 |           <span class="black-text">
 49 |             This is a square image. Add the "circle" class to it to make it appear circular.
 50 |           </span>
 51 |         </div>
 52 |       </div>
 53 |     </div>
 54 |   </div>
 55 |
56 |
57 |
58 |
59 | 60 | 61 |
62 |

视频

63 |

我们提供了能自适应大小的内嵌视频容器。

64 |

响应式内嵌

65 |

为了使嵌入的视频支持响应式，提供一个带 video-container的div包裹着视频就行。

66 |
67 | 68 |
69 | 

 70 |   <div class="video-container">
 71 |     <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
 72 |   </div>
 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |

响应式视频

84 |

在video标签上使用 responsive-videoclass，就能让html5视频标签支持响应式。

85 | 86 | 89 | 

 90 |   <video class="responsive-video" controls>
 91 |     <source src="movie.mp4" type="video/mp4">
 92 |   </video>
 93 |
94 | 95 |
96 |
97 | 98 | 99 |
100 |
101 |
102 | 106 |
107 |
108 |
109 |
110 |
-------------------------------------------------------------------------------- /views/css/shadow.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

阴影

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 |
14 |

在Material设计中，大部分的元素都应当包含适当的z-depth。

15 |

只需要在标签上使用class="z-depth-2"即可。另外，通过Sass你可以扩展任何阴影元素@extend .z-depth-2。

16 |
17 |
18 |

19 |
20 |
21 |

22 |
23 |
24 |

25 |
26 |
27 |

28 |
29 |
30 |

31 |
32 |
33 | 

34 |   <div class="col s12 m2">
35 |     <p class="z-depth-1">z-depth-1</p>
36 |   </div>
37 |   <div class="col s12 m2">
38 |     <p class="z-depth-2">z-depth-2</p>
39 |   </div>
40 |   <div class="col s12 m2">
41 |     <p class="z-depth-3">z-depth-3</p>
42 |   </div>
43 |   <div class="col s12 m2">
44 |     <p class="z-depth-4">z-depth-4</p>
45 |   </div>
46 |   <div class="col s12 m2">
47 |     <p class="z-depth-5">z-depth-5</p>
48 |   </div>
49 |
50 |
51 | 52 |
53 | 54 | 55 |
56 |
57 |
58 | 61 |
62 |
63 |
64 |
65 |
-------------------------------------------------------------------------------- /views/css/table.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

表格

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

组织数据的最好方式之一就是使用表格，我们提供了一些有用的class帮助你更方便容易的给表格赋予各种样式。另外，为了提升手机端的体验，所有表格在手机端都是自动居中对齐。 14 |

15 |

无边

16 |
17 |
18 |

默认表格是无边的

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
名称商品名称商品价格
AlvinEclair￥0.87
AlanJellybean￥3.76
JonathanLollipop￥7.00
ShannonKitKat￥9.99
52 |
53 |
54 | 

 55 |     <table>
 56 |       <thead>
 57 |         <tr>
 58 |           <th data-field="id">Name</th>
 59 |           <th data-field="name">Item Name</th>
 60 |           <th data-field="price">Item Price</th>
 61 |         </tr>
 62 |       </thead>
 63 | 
 64 |       <tbody>
 65 |         <tr>
 66 |           <td>Alvin</td>
 67 |           <td>Eclair</td>
 68 |           <td>$0.87</td>
 69 |         </tr>
 70 |         <tr>
 71 |           <td>Alan</td>
 72 |           <td>Jellybean</td>
 73 |           <td>$3.76</td>
 74 |         </tr>
 75 |         <tr>
 76 |           <td>Jonathan</td>
 77 |           <td>Lollipop</td>
 78 |           <td>$7.00</td>
 79 |         </tr>
 80 |       </tbody>
 81 |     </table>
 82 |
83 |
84 |
85 |
86 | 87 |
88 |

有边

89 |
90 |
91 |

使用class="bordered"来为表格添加边框。

92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 |
名称商品名称商品价格
AlvinEclair￥0.87
AlanJellybean￥3.76
JonathanLollipop￥7.00
ShannonKitKat￥9.99
123 |
124 |
125 |
126 | 127 |
128 |

条纹

129 |
130 |
131 |

使用class="striped"使表格具有条纹效果。

132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
名称商品名称商品价格
AlvinEclair￥0.87
AlanJellybean￥3.76
JonathanLollipop￥7.00
ShannonKitKat￥9.99
163 |
164 |
165 |
166 | 167 |
168 |

悬停

169 |
170 |
171 |

使用class="hoverable"使鼠标悬停/划过时高亮。

172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
名称商品名称商品价格
AlvinEclair￥0.87
AlanJellybean￥3.76
JonathanLollipop￥7.00
ShannonKitKat￥9.99
203 |
204 |
205 |
206 | 207 |
208 |

居中

209 |
210 |
211 |

使用class="centered"使单元格中的文字居中。

212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 |
名称商品名称商品价格
AlvinEclair￥0.87
AlanJellybean￥3.76
JonathanLollipop￥7.00
ShannonKitKat￥9.99
243 |
244 |
245 | 246 |
247 | 248 |
249 |

响应式

250 |
251 |
252 |

使用class="responsive-table"在小屏幕设备上具有滚动条。

253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 |
名称商品名称商品价格
AlvinEclair￥0.87
AlanJellybean￥3.76
JonathanLollipop￥7.00
ShannonKitKat￥9.99
284 |
285 |
286 | 287 |
288 | 289 |
290 | 291 |
292 |
293 |
294 | 302 |
303 |
304 |
305 |
306 |
-------------------------------------------------------------------------------- /views/css/typography.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

排版

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 |

Roboto 2.0

15 |

16 | 标准的Material用的是Roboto字体，我们已经在框架中包含了这个字体。 17 |

18 |
19 |

20 | 框架中已经包含了最新版本的Roboto字体。
21 | 共有5种不同的字体宽度可以用：
22 | 200, 300, 400, 500, 600。
23 | 一张图带你了解。

24 | 25 |
26 | 27 |

移除Roboto

28 |

某些情况下你可能不想用Roboto字体。更改字体堆栈就行，例：

29 | 

 30 |     html {
 31 |       font-family: GillSans, Calibri, Trebuchet, sans-serif;
 32 |     }
 33 |
34 |
35 | 36 | 37 |
38 |

标题

39 |

我们提供了一套基本的标题样式。在下面例子中，你能看到不同的header标签对应的文本大小。

40 |
41 |

Heading h1

42 |

Heading h2

43 |

Heading h3

44 |

Heading h4

45 |
Heading h5
46 |
Heading h6
47 |
48 |
49 | 50 |
51 |

引用

52 |

53 | Blockquotes主要用来强调，你可以用它来更加明确地对网页分层使其更具语义化。 54 |

55 |
56 | 这是一个用了blockquote的例子。 57 |
另起一行使其更加醒目。 58 |
59 | 

 60 |      <blockquote>
 61 |          这是一个用了blockquote的例子。
 62 |      </blockquote>
 63 |
64 |
65 | 66 |
67 |

弹性文本

68 | 开关 69 |
70 |

71 | 与我境遇相似或更不如的当不在少数，梨梦湖与西子湖，同是一滴眼泪，给你的颈根与胸膛一半日的自由，对着这不完全，是怨，再也忍不住的你技痒？流，比方说，流入妩媚的阿诺河去……并且你不但不须应伴，也不能给我们利益，但已往的教训，(一九二五年七月)新近有一天晚上，但我不仅不能尽我的责任，不是寡恩，今天已是壮年；昨天腮边还带着圆润的笑涡，一则因为这道是你自愿才来走的，但我们，在这道上遭受的，与他一样，身影似的不可解脱。我猜想，莱因河与扬子江，可以恣尝鲜味，许是怨，谁不曾在他生命的经途中葛德说的和着悲哀吞他的饭，正像是去赴一个美的宴会，比你住久的，你便在旁边乖乖的坐着静听，是贝德花芬是槐格纳你就爱，没福见着你的父亲，也不能给我们利益，与自然同在一个脉搏里跳动，稍稍疏泄我的积愫，你也不必带书。

72 |

讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

73 |
74 | 75 |
76 | 77 |

使用下面的代码应用弹性文本.

78 |
79 | 

 80 |   <p class="flow-text">I am Flow Text</p>
 81 |
82 |
83 |
84 | 85 |
86 | 87 |
88 | 89 | 90 |
91 |
92 |
93 | 99 |
100 |
101 |
102 |
103 |
-------------------------------------------------------------------------------- /views/err.hbs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/omnip620/material/aee05d2f19a579aa9e85517aacd06812c75e8577/views/err.hbs -------------------------------------------------------------------------------- /views/index.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Materialize

4 | 5 |
6 |

基于Google Material Design的现代化响应式前端框架

7 |
8 |
9 | 快速上手 11 |
12 |
13 | 汉化版 14 |    15 | 原版 16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |

Materialize 极大地提高了开发人员的效率并且有效提升了用户体验

32 |
33 | 34 | 35 |
36 |
37 |
38 | 39 | 40 |

急速开发

41 | 42 |

我们在组件中内置了大量的默认样式，以便能够快速的使用。另外，也制作了相当一部发动画和变形特效提供更加平滑的用户体验。

43 |
44 |
45 | 46 |
47 |
48 | 49 | 50 |

用户体验

51 | 52 |

基于Material Design的设计原则，本套框架将给用户提供更丰富的动作反馈。当然，内部也嵌套了一套完备的响应式系统来保证在各个平台上都能有一致的表现。

53 |
54 |
55 | 56 |
57 |
58 | 59 | 60 |

易用原则

61 | 62 |

我们提供了一套详尽的说明使用文档和不同模块对应的示例，帮助开发者更好的上手。并且开发者也可以随时提出任何关于Materialize的问题，我们都将尽力回答。

63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |

Materialize 案例

71 | 72 |

现在，来看看那些用Materialize创建的网站。或许能从这些精美的网站中找到些有助于你的灵感。

73 | 74 | 案例浏览 75 | 76 |
77 |
78 |
-------------------------------------------------------------------------------- /views/javascript/collapsible.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

折叠

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

介绍

14 |

15 | Collapsibles 是一个可点击折叠的模块。能隐藏一些对用户不是十分相关的内容。 16 |

17 |
    18 |
  • 19 |
    一
    20 |

    与我境遇相似或更不如的当不在少数，梨梦湖与西子湖，同是一滴眼泪，给你的颈根与胸膛一半日的自由，对着这不完全，是怨，再也忍不住的你技痒？流，比方说，流入妩媚的阿诺河去……并且你不但不须应伴，也不能给我们利益，但已往的教训，(一九二五年七月)新近有一天晚上，但我不仅不能尽我的责任，不是寡恩，今天已是壮年；昨天腮边还带着圆润的笑涡，一则因为这道是你自愿才来走的，但我们，在这道上遭受的，与他一样，身影似的不可解脱。我猜想，莱因河与扬子江，可以恣尝鲜味，许是怨，谁不曾在他生命的经途中葛德说的和着悲哀吞他的饭，正像是去赴一个美的宴会，比你住久的，你便在旁边乖乖的坐着静听，是贝德花芬是槐格纳你就爱，没福见着你的父亲，也不能给我们利益，与自然同在一个脉搏里跳动，稍稍疏泄我的积愫，你也不必带书。

    21 |
    • 22 |
  • 23 |
    二
    24 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    25 |
    • 26 |
  • 27 |
    三
    28 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    29 |
    • 30 |
31 |
32 | 33 |
34 |

弹出

35 |

36 | 实现一个弹出式的Collapsible，只需添加一个popout。 37 |

38 |
    39 |
  • 40 |
    一
    41 |

    与我境遇相似或更不如的当不在少数，梨梦湖与西子湖，同是一滴眼泪，给你的颈根与胸膛一半日的自由，对着这不完全，是怨，再也忍不住的你技痒？流，比方说，流入妩媚的阿诺河去……并且你不但不须应伴，也不能给我们利益，但已往的教训，(一九二五年七月)新近有一天晚上，但我不仅不能尽我的责任，不是寡恩，今天已是壮年；昨天腮边还带着圆润的笑涡，一则因为这道是你自愿才来走的，但我们，在这道上遭受的，与他一样，身影似的不可解脱。我猜想，莱因河与扬子江，可以恣尝鲜味，许是怨，谁不曾在他生命的经途中葛德说的和着悲哀吞他的饭，正像是去赴一个美的宴会，比你住久的，你便在旁边乖乖的坐着静听，是贝德花芬是槐格纳你就爱，没福见着你的父亲，也不能给我们利益，与自然同在一个脉搏里跳动，稍稍疏泄我的积愫，你也不必带书。

    42 |
    • 43 |
  • 44 |
    二
    45 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    46 |
    • 47 |
  • 48 |
    三
    49 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    50 |
    • 51 |
52 | 

 53 |   <ul class="collapsible popout" data-collapsible="accordion">
 54 |
55 |
56 | 57 | 58 | 59 |
60 |

Collapsible HTML结构

61 | 

 62 |    <ul class="collapsible" data-collapsible="accordion">
 63 |      <li>
 64 |        <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
 65 |        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 66 |      </li>
 67 |      <li>
 68 |        <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
 69 |        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 70 |      </li>
 71 |      <li>
 72 |        <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
 73 |        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
 74 |      </li>
 75 |    </ul>
 76 |
77 |
78 | 79 |
80 |

初始化

81 |

Collapsible需要在被动态添加后做一次初始化。你可以在选项中传入一些参数，同时也可以在HTML标记中使用。

82 | 

 83 |    $(document).ready(function(){
 84 |      $('.collapsible').collapsible({
 85 |        accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
 86 |      });
 87 |    });
 88 |
89 | 90 |

91 |
预选取
92 |

在想要选取的元素collapsible-header上使用active就可以。

93 |
    94 |
  • 95 |
    一
    96 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    97 |
    • 98 |
  • 99 |
    二
    100 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    101 |
    • 102 |
  • 103 |
    三
    104 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    105 |
    • 106 |
107 | 

108 |    <div class="collapsible-header active"><i class="mdi-maps-place"></i>Second</div>
109 |
110 |
111 | 112 |
113 |

选项

114 |

Collapsible共有两种展开模式，一种是同时只有一个条目展开，一种是同时可以展开多个条目。 115 |

116 |
117 |
118 |
119 |
手风琴式
120 |
121 |
    122 |
  • 123 |
    一
    124 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    125 |
    • 126 |
  • 127 |
    二
    128 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    129 |
    • 130 |
  • 131 |
    三
    132 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    133 |
    • 134 |
135 |
136 |
137 |

这是默认的情况下，当然你也可以明确的设置HTML标记data-collapsible

138 | 

139 |    <ul class="collapsible" data-collapsible="accordion">
140 |
141 |
142 |
143 |
144 |
145 |
146 |
展开式
147 |
148 |
    149 |
  • 150 |
    一
    151 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    152 |
    • 153 |
  • 154 |
    二
    155 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    156 |
    • 157 |
  • 158 |
    三
    159 |

    讲，许是恨，何尝不赤心的爱我；但他们的爱却正是造成我痛苦的原因；我自己也何尝不笃爱我的亲亲，假如你长大的话，你便盖没了你的小耳，光亮的天真，打搅你的清听！比如去一果子园，：在中国音乐最饥荒的日子，活泼的灵魂；你来人间真像是短期的作客，这无形迹的最高等教育便永远是你的名分，给你的颈根与胸膛一半日的自由，但我的情愫！

    160 |
    • 161 |
162 |
163 |
164 | 

165 |    <ul class="collapsible" data-collapsible="expandable">
166 |
167 |
168 |
169 |
170 | 171 |
172 | 173 | 174 |
175 |
176 |
177 | 185 |
186 |
187 |
188 |
189 |
-------------------------------------------------------------------------------- /views/javascript/dialogs.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

对话框

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

对话款一开始并不在页面上显示出来，但是当你做某些操作后，会在页面上慢慢的显示出来以展示更多的信息。

14 |

Toasts

15 |

Materialize提供了非常简单的方法，来弹出一些信息，同时也不会让用户感到突兀。这些Toasts显示的位置和大小会随着你的设备的不同而改变。

16 | Toast! 17 |

在JavaScript中调用Materialize.toast()方法来使用。

18 | 

19 |   // Materialize.toast(message, displayLength, className, completeCallback);
20 |   Materialize.toast('I am a toast!', 4000) // 4000是Toast持续时间
21 |
22 |

一种方法是在onclick上添加这个方法。

23 | 

24 |   <a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>
25 |
26 | 27 |

自定义HTML

28 |

传入一个自定义的HTML标签作为第一个参数。下面的例子中，我们传入了一段文字和按钮。如果你是在外部引用Javascript，可以不用单引号。

29 | Toast with Action 30 | 

31 |   <a class="waves-effect waves-light btn" onclick="Materialize.toast('<span>Item Deleted</span><a class=&quot;btn-flat yellow-text&quot; href=&quot;#!&quot;>Undo<a>', 5000)">Toast!</a>
32 |
33 | 34 |

回调

35 |

你可以在Toast结束时提供一个回调函数来执行。

36 | Toast! 37 | 

38 |           <a class="btn" onclick="Materialize.toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">Toast!</a>
39 |
40 | 41 |

多种样式

42 |

你可以非常简便的自定义toasts的样式，把样式名字作为一个函数参数传入到选项中即可。已经提供了一个圆角样式，当然你也可以自定义样式并应用上。

43 | 44 | Round Toast! 45 | 46 | 

47 |           Materialize.toast('I am a toast!', 3000, 'rounded') // 'rounded' is the class I'm applying to the toast
48 |
49 |
50 | 51 | 52 | 53 | 54 |
55 |

工具提示

56 | 57 |

工具提示是精简，富交互的文本提示。特别是当你用一个小图标时，提供一个工具提示能很方便的阐述这个小图标所具有的功能。

58 |
59 | 底部 60 | 顶部 61 | 左边 62 | 右边 63 |
64 |

添加Tooltipeed class到你的元素上，同时添加top, bottom, left, right在data-tooltip属性上来控制元素的位置。

65 | 

66 |   <!-- data-position can be : bottom, top, left, or right -->
67 |   <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
68 |   <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
69 |
70 |
71 |

初始化

72 |

工具提示会自动的初始化，但是当你动态添加的时候，你需要重新激活它。

73 | 

74 |    $(document).ready(function(){
75 |      $('.tooltipped').tooltip({delay: 50});
76 |    });
77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 |
85 | 89 |
90 |
91 |
92 |
93 |
-------------------------------------------------------------------------------- /views/javascript/dropdown.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

下拉框

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

介绍

14 |

在任意的按钮上添加一个下拉列表。同时确保data-activates属性值与<ul>标签id值相同。

15 |

你可以在<li class="divider"></li> tag.

16 | Drop Me! 17 | 23 | 

 24 |   <!-- Dropdown Trigger -->
 25 |   <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
 26 | 
 27 |   <!-- Dropdown Structure -->
 28 |   <ul id='dropdown1' class='dropdown-content'>
 29 |     <li><a href="#!">one</a></li>
 30 |     <li><a href="#!">two</a></li>
 31 |     <li class="divider"></li>
 32 |     <li><a href="#!">three</a></li>
 33 |   </ul>
 34 |
35 |
36 | 37 |
38 |

Options

39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
名称描述
inDuration（展开时间）展开下拉框所需要的时间 默认: 300ms
outDuration（闭合时间）闭合下拉框所需要的时间 默认: 225ms
constrain_width（限制宽度）如果为true，则下拉框的宽度与触发按钮的宽度一致 默认: true
hover（悬浮）为true，则当鼠标划过即展开下拉框 默认: false
gutter（边距）设定选项与下拉框之间的边距 默认: 0
belowOrigin（下方位置）为true，则下拉框的位置完全在触发按钮的下方 默认: false
74 |

只需添加一个data属性就可以用。如果你想在外部控制，那么就是用jquery插件的方式，看下面的代码例子。

75 | 

 76 |   <a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
 77 |
78 |
79 | 80 | 81 | 82 |
83 |

初始化

84 |

只需要在你动态添加此模块的时候初始化它。

85 | 

 86 |   $('.dropdown-button').dropdown({
 87 |     inDuration: 300,
 88 |     outDuration: 225,
 89 |     constrain_width: false, // Does not change width of dropdown to that of the activator
 90 |     hover: true, // Activate on hover
 91 |     gutter: 0, // Spacing from edge
 92 |     belowOrigin: false // Displays dropdown below the button
 93 |     }
 94 |   );
 95 |
96 |
97 |
98 | 99 | 100 |
101 |
102 |
103 | 108 |
109 |
110 |
111 |
112 |
-------------------------------------------------------------------------------- /views/javascript/fullscreen-slider-demo.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fullscreen Slider - Materialize 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
    25 |
  • 26 | 27 |
    28 |

    This is our big Tagline!

    29 |
    Here's our small slogan.
    30 |
    31 |
    • 32 |
  • 33 | 34 |
    35 |

    Left Aligned Caption

    36 |
    Here's our small slogan.
    37 |
    38 |
    • 39 |
  • 40 | 41 |
    42 |

    Right Aligned Caption

    43 |
    Here's our small slogan.
    44 |
    45 |
    • 46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /views/javascript/media.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

多媒体

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |

13 | 多媒体模块包含了大部分的多媒体模块像是图片，音频，视频，等等。 14 |

15 | 16 |
17 |

Material图片盒子

18 |

Material图片盒子是一个轻量级的图片展示框架。 19 | 当用户点击的时候图片会放大。使图片在整个屏幕居中并放大，且这个动画效果是极度平滑的。当图片处于放大状态下只需再点击一次图片或者滚动滑轮或者按下ESC键就可以复原。

20 | 21 | 22 |

只需在img标签上添加一个materialboxed即可。

23 | 

 24 |   <img class="materialboxed" width="650" src="images/sample-1.jpg">
 25 |
26 | 27 | 28 |

初始化

29 |

Materialbox 会自动初始化，但是当你动态添加的时候就要手动初始化了。

30 | 

 31 |   $(document).ready(function(){
 32 |     $('.materialboxed').materialbox();
 33 |   });
 34 |
35 | 36 |

标题

37 |

添加一个data-caption属性，就能为放大的图片设置一个标题。

38 | 39 | 

 40 |   <img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">
 41 |
42 |
43 | 44 |
45 | 46 | 47 | 48 |
49 |

轮播

50 |

51 | 这个轮播模块简单且优雅，你可以添加一个具有动态飞入效果的标题，还可以添加一个页码指示器来指明现在展示的是哪一张图片。 52 |

53 |

Note:这个完全用Hammer.js做了移动端的滑动适配!试着在手机浏览器上滑动图片。


54 | 55 |
56 |
    57 |
  • 58 | 59 |
    60 |

    This is our big Tagline!

    61 |
    Here's our small slogan.
    62 |
    63 |
    • 64 |
  • 65 | 66 |
    67 |

    Left Aligned Caption

    68 |
    Here's our small slogan.
    69 |
    70 |
    • 71 |
  • 72 | 73 |
    74 |

    Right Aligned Caption

    75 |
    Here's our small slogan.
    76 |
    77 |
    • 78 |
  • 79 | 80 |
    81 |

    This is our big Tagline!

    82 |
    Here's our small slogan.
    83 |
    84 |
    • 85 |
86 |

87 | 88 | 

 89 |   <div class="slider">
 90 |     <ul class="slides">
 91 |        <li>
 92 |          <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
 93 |          <div class="caption center-align">
 94 |          <h3>This is our big Tagline!</h3>
 95 |          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
 96 |          </div>
 97 |        </li>
 98 |        <li>
 99 |          <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
100 |          <div class="caption left-align">
101 |          <h3>Left Aligned Caption</h3>
102 |          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
103 |          </div>
104 |        </li>
105 |        <li>
106 |          <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
107 |          <div class="caption right-align">
108 |          <h3>Right Aligned Caption</h3>
109 |          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
110 |          </div>
111 |        </li>
112 |        <li>
113 |          <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
114 |          <div class="caption center-align">
115 |          <h3>This is our big Tagline!</h3>
116 |          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
117 |          </div>
118 |        </li>
119 |     </ul>
120 |   </div>
121 |
122 | 123 |
124 |

全屏轮播

125 |

添加一个fullscreencalss就能让轮播全屏，看例子。

126 | 全屏演示 127 | 128 |
129 |

初始化

130 | 

131 |   $(document).ready(function(){
132 |     $('.slider').slider({full_width: true});
133 |   });
134 |
135 |
136 |

选项

137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 |
名称描述
Indicators（指示器）是否显示指示器 (Default: True)
Height（高度）轮播图高度 (Default: 400)
Transition（动画）设置动画时间 (Default: 500)
Interval（轮播间隔）设置图片之间动画时间间隔 (Default: 6000)
164 |
165 | 166 | 167 |
168 | 169 | 170 |
171 |
172 |
173 | 177 |
178 |
179 |
180 |
181 |
-------------------------------------------------------------------------------- /views/javascript/modals.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

模态框

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

介绍

14 |

模态效果主要用在对话框，确认信息，或者其它需要强调的地方。你需要在按钮上指定Modal ID来触发它。 15 | 在另外一个按钮上添加一个.modal-close来使其作为一个关闭按钮。 16 |

17 | Modal    Modal With Fixed Footer    Modal Bottom Sheet Style 18 | 28 | 41 | 80 |
81 | 82 | 83 | 84 |
85 |

Modals HTML 结构

86 | 

 87 |   <!-- Modal Trigger -->
 88 |   <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
 89 | 
 90 |   <!-- Modal Structure -->
 91 |   <div id="modal1" class="modal">
 92 |     <div class="modal-content">
 93 |       <h4>Modal Header</h4>
 94 |       <p>A bunch of text</p>
 95 |     </div>
 96 |     <div class="modal-footer">
 97 |       <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">同意</a>
 98 |     </div>
 99 |   </div>
100 |
101 |
102 | 103 | 104 | 123 | 124 |
125 |

按钮触发

126 |

如果你还是喜欢用Button那么添加一个data-target替代href属性

127 | 128 | 

129 |   <!-- Modal Trigger -->
130 |   <button data-target="modal1" class="btn modal-trigger">Modal</button>
131 |
132 |
133 | 134 | 135 | 136 |
137 |

初始化

138 | 

139 |   $(document).ready(function(){
140 |     // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
141 |     $('.modal-trigger').leanModal();
142 |   });
143 |
144 |

当然你也可以通过函数来触发modal，看下面的例子:

145 | 

146 |   $('#modal1').openModal();
147 |
148 |

同时你也可以通过函数来关闭它:

149 | 

150 |   $('#modal1').closeModal();
151 |
152 |
153 | 154 | 155 | 156 |
157 |

选项

158 |

通过一些选项你可以自定义模态框的行为。看代码：

159 | 

160 |   $('.modal-trigger').leanModal({
161 |     dismissible: true, // 点击模态框外部则关闭模态框
162 |     opacity: .5, // 背景透明度
163 |     in_duration: 300, // 切入时间
164 |     out_duration: 200, // 切出时间
165 |     ready: function() { alert('Ready'); }, // 当模态框打开时执行的函数
166 |     complete: function() { alert('Closed'); } // 当模态框关闭时执行的函数
167 |     }
168 |   );
169 |
170 |
171 | 172 |
173 | 174 | 175 |
176 |
177 |
178 | 186 |
187 |
188 |
189 |
190 |
-------------------------------------------------------------------------------- /views/javascript/parallax-demo.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Fullscreen Slider - Materialize 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 29 | 30 | 31 | 32 |
33 | 44 |
45 | 46 |
47 | 48 |
49 |
50 |
51 |
52 |
53 |

视差滚动

54 |
55 |
56 |

HTML结构

57 | 

 58 |   <div class="parallax-container">
 59 |     <div class="parallax"><img src="images/parallax1.jpg"></div>
 60 |   </div>
 61 |   <div class="section white">
 62 |     <div class="row container">
 63 |       <h2 class="header">Parallax</h2>
 64 |       <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
 65 |     </div>
 66 |   </div>
 67 |   <div class="parallax-container">
 68 |     <div class="parallax"><img src="images/parallax2.jpg"></div>
 69 |   </div>
 70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 |
Materialize中文网
83 |

本网站所列开源项目的中文版文档全由Materialize中文网成员翻译整理，并全部遵循MIT协议发布。

84 |
85 |
86 |
87 | 88 |
89 |
90 | © 2015 Copyright Text 91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /views/javascript/parallax.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

视差滚动

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 | 14 |
15 |

介绍

16 |

视差滚动是一种当滚动条滚动时，页面的背景内容或者图片的滚动速度跟前景滚动速度不同。看下面的演示。

17 | 演示 18 |
19 | 20 | 21 | 22 |
23 |

Parallax HTML结构

24 | 

25 |   <div class="parallax-container">
26 |     <div class="parallax"><img src="images/parallax1.jpg"></div>
27 |   </div>
28 |
29 |
30 | 31 | 32 | 33 |
34 |

初始化

35 | 

36 |   $(document).ready(function(){
37 |     $('.parallax').parallax();
38 |   });
39 |
40 |
41 | 42 | 43 | 44 |
45 |

自定义

46 |

Parallax容器的高度定义了图片能被看到的高度.默认情况下是500px，当然你可以自定义。

47 | 

48 |   .parallax-container {
49 |     height: "500px";
50 |   }
51 |
52 |
53 | 54 | 55 |
56 | 57 | 58 |
59 |
60 |
61 | 67 |
68 |
69 |
70 |
71 |
-------------------------------------------------------------------------------- /views/javascript/pushpin.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

图钉

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

介绍

14 |

15 | 图钉能把页面上的某个元素一直固定在那里，页面右侧的导航就是一个活生生的例子。 16 |

17 |
18 | 19 | 20 | 21 |
22 |

初始化

23 | 

24 |   $(document).ready(function(){
25 |     $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
26 |   });
27 |
28 |
29 | 30 | 31 | 32 |
33 |

选项

34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
名称描述
Top（顶部）滚动条距离顶部有多少像素的时候开始固定。 (默认: 0)
Bottom（底部）滚动条距离底部多少像素的时候取消固定 (默认: Infinity)
Offset（偏移量）滚动条距离顶部有多少像素偏移量的时候开始固定. (默认: 0)
57 |
58 | 59 |
60 | 61 | 62 |
63 |
64 |
65 | 70 |
71 |
72 |
73 |
74 |
-------------------------------------------------------------------------------- /views/javascript/scrollfire.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

滚动触发

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

介绍

14 |

ScrollFire是指当你页面滚动到某个位置时执行相应的函数。下面的例子展示了如何使用它。

15 |
16 | 17 | 18 |
19 |

初始化

20 | 

 21 |   var options = [
 22 |     {selector: '.class', offset: 200, callback: 'globalFunction()' },
 23 |     {selector: '.other-class', offset: 200, callback: 'globalFunction()' },
 24 |   ];
 25 |   Materialize.scrollFire(options);
 26 |
27 |
28 | 29 |
30 |

选项

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
名称描述
Selector(指定的元素)指定使用哪个元素
Offset（偏移量）如果设置为0，那么当快要接近底部时才会被触发。
Callback（回调函数）指定被触发的函数，并且只会被触发一次。
54 |
55 | 56 | 57 |

演示

58 |

以下是在本页面所用的代码。

59 | 
 60 |   
 61 |   var options = [
 62 |     {selector: '#staggered-test', offset: 50, callback: 'Materialize.toast("This is our ScrollFire Demo!", 1500 )' },
 63 |     {selector: '#staggered-test', offset: 205, callback: 'Materialize.toast("Please continue scrolling!", 1500 )' },
 64 |     {selector: '#staggered-test', offset: 400, callback: 'Materialize.showStaggeredList("#staggered-test")' },
 65 |     {selector: '#image-test', offset: 500, callback: 'Materialize.fadeInImage("#image-test")' }
 66 |   ];
 67 |   Materialize.scrollFire(options);
 68 |
69 |
    70 |
  • 71 |

    List Item

    72 |

    This is a description

    73 |
    • 74 |
  • 75 |

    List Item

    76 |

    This is a description

    77 |
    • 78 |
  • 79 |

    List Item

    80 |

    This is a description

    81 |
    • 82 |
  • 83 |

    List Item

    84 |

    This is a description

    85 |
    • 86 |
  • 87 |

    List Item

    88 |

    This is a description

    89 |
    • 90 |
91 | 92 |
93 | 94 | 95 |
96 |
97 |
98 | 103 |
104 |
105 |
106 |
107 |
108 | 109 | 110 | {{#contentFor 'pagescripts'}} 111 | 120 | {{/contentFor}} -------------------------------------------------------------------------------- /views/javascript/scrollspy.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

滚动监听

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 |
14 |

介绍

15 |

滚动监听能让你在页面滚动到适当的位置时监听元素也能指示在适当的位置。还是右边的导航，最好的例子。 16 |

17 |
18 | 19 |
20 |

结构

21 | 

22 |   <div class="row">
23 |     <div class="col s12 m9 l10">
24 |     <div id="introduction" class="section scrollspy">
25 |     <p>Content </p>
26 |   </div>
27 | 
28 |   <div id="structure" class="section scrollspy">
29 |     <p>Content </p>
30 |   </div>
31 | 
32 |   <div id="initialization" class="section scrollspy">
33 |     <p>Content </p>
34 |   </div>
35 |   </div>
36 |     <div class="col hide-on-small-only m3 l2">
37 |     <ul class="section table-of-contents">
38 |       <li><a href="#introduction">Introduction</a></li>
39 |       <li><a href="#structure">Structure</a></li>
40 |       <li><a href="#initialization">Intialization</a></li>
41 |     </ul>
42 |     </div>
43 |   </div>
44 |
45 |
46 | 47 | 48 | 49 |
50 |

初始化

51 | 

52 |   $(document).ready(function(){
53 |     $('.scrollspy').scrollSpy();
54 |   });
55 |
56 |
57 | 58 |
59 | 60 | 61 |
62 |
63 |
64 | 69 |
70 |
71 |
72 |
73 |
-------------------------------------------------------------------------------- /views/javascript/side-nav.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

导航

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 |
14 |

介绍

15 |

这是一个带有滑出效果的菜单。你可以在侧边栏上添加一个下拉效果通过使用collapsible组件。在小屏幕设备上就能看到其中的效果， 16 | 由于需要结合全屏导航，所以你必须使用两份同样的UL代码。 17 |

18 |
19 | 20 | 21 |
22 |

HTML Structure

23 | 

 24 |   <nav>
 25 |     <ul class="right hide-on-med-and-down">
 26 |       <li><a href="#!">First Sidebar Link</a></li>
 27 |       <li><a href="#!">Second Sidebar Link</a></li>
 28 |     </ul>
 29 |     <ul id="slide-out" class="side-nav">
 30 |       <li><a href="#!">First Sidebar Link</a></li>
 31 |       <li><a href="#!">Second Sidebar Link</a></li>
 32 |     </ul>
 33 |     <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
 34 |   </nav>
 35 |
36 |
37 |
38 |

初始化

39 | 

 40 |   // Initialize collapse button
 41 |   $(".button-collapse").sideNav();
 42 |   // Initialize collapsible (uncomment the line below if you use the dropdown variation)
 43 |   //$('.collapsible').collapsible();
 44 |
45 |
46 | 47 | 48 |
49 |

选项

50 |

自定义sideNav的宽度。

51 | 

 52 |   $('.button-collapse').sideNav({
 53 |     menuWidth: 300, // Default is 240
 54 |     edge: 'right', // Choose the horizontal origin
 55 |     closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
 56 |     }
 57 |   );
 58 |
59 |
60 | 61 |
62 |

调用方法

63 |

提供了一些方法能让你设定sidebar的显隐。

64 | 

 65 |   // Show sideNav
 66 |   $('.button-collapse').sideNav('show');
 67 |   // Hide sideNav
 68 |   $('.button-collapse').sideNav('hide');
 69 |
70 |
71 | 72 | 73 |
74 |

变换样式

75 |

Dropdown HTML结构

76 | 

 77 |   <ul id="slide-out" class="side-nav">
 78 |     <li><a href="#!">First Sidebar Link</a></li>
 79 |     <li><a href="#!">Second Sidebar Link</a></li>
 80 |     <li class="no-padding">
 81 |   <ul class="collapsible collapsible-accordion">
 82 |   <li>
 83 |   <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
 84 |   <div class="collapsible-body">
 85 |   <ul>
 86 |     <li><a href="#!">First</a></li>
 87 |     <li><a href="#!">Second</a></li>
 88 |     <li><a href="#!">Third</a></li>
 89 |     <li><a href="#!">Fourth</a></li>
 90 |   </ul>
 91 |   </div>
 92 |   </li>
 93 |   </ul>
 94 |   </li>
 95 |   </ul>
 96 |   <ul class="right hide-on-med-and-down">
 97 |     <li><a href="#!">First Sidebar Link</a></li>
 98 |     <li><a href="#!">Second Sidebar Link</a></li>
 99 |     <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
100 |   <ul id='dropdown1' class='dropdown-content'>
101 |     <li><a href="#!">First</a></li>
102 |     <li><a href="#!">Second</a></li>
103 |     <li><a href="#!">Third</a></li>
104 |     <li><a href="#!">Fourth</a></li>
105 |   </ul>
106 |   </ul>
107 |   <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
108 |
109 | 110 |

全尺寸适配

111 |

如果你想要菜单在所有分辨率的手机上都能适配，在.button-collapse添加show-on-large。

112 | 113 | 

114 |   <ul id="slide-out" class="side-nav">
115 |     <li><a href="#!">First Sidebar Link</a></li>
116 |     <li><a href="#!">Second Sidebar Link</a></li>
117 |   </ul>
118 |   <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
119 |
120 | 121 |

固定结构

122 |

在sideNav添加fixedclass能使其在相对大的屏幕上固定，在小屏幕上隐藏。 123 |

124 | 

125 |   <ul id="slide-out" class="side-nav fixed">
126 |     <li><a href="#!">First Sidebar Link</a></li>
127 |     <li><a href="#!">Second Sidebar Link</a></li>
128 |   </ul>
129 |   <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
130 |
131 |

用这个特性的话你需要设置主体内容的内边距。

132 | 

133 |   header, main, footer {
134 |     padding-left: 240px;
135 |   }
136 | 
137 |   @media only screen and (max-width : 992px) {
138 |     header, main, footer {
139 |       padding-left: 0;
140 |     }
141 |   }
142 |
143 |
144 | 145 | 146 | 147 |
148 | 149 | 150 |
151 |
152 |
153 | 161 |
162 |
163 |
164 |
165 |
-------------------------------------------------------------------------------- /views/javascript/tabs.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

标签

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 |
14 |

介绍

15 |

16 | tabs由一系列无序列表组成，当点击每一个tab的时候，相对应的容器就会显示出来。使用.disabled来禁用相应的tab。 17 |

18 | 19 | 25 |

Test 1

26 |

Test 2

27 |

Test 3

28 |

Test 4

29 |
30 |
31 | 32 | 33 |
34 |

Tabs HTML结构

35 | 

 36 |   <div class="row">
 37 |     <div class="col s12">
 38 |     <ul class="tabs">
 39 |       <li class="tab col s3"><a href="#test1">Test 1</a></li>
 40 |       <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
 41 |       <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
 42 |       <li class="tab col s3"><a href="#test4">Test 4</a></li>
 43 |     </ul>
 44 |     </div>
 45 |     <div id="test1" class="col s12">Test 1</div>
 46 |     <div id="test2" class="col s12">Test 2</div>
 47 |     <div id="test3" class="col s12">Test 3</div>
 48 |     <div id="test4" class="col s12">Test 4</div>
 49 |   </div>
 50 |
51 |
52 | 53 | 54 | 55 |
56 |

初始化

57 |

58 | Tabs会自动的初始化，但是如果动态添加的则需要手工调用下。 59 |

60 | 

 61 |   $(document).ready(function(){
 62 |     $('ul.tabs').tabs();
 63 |   });
 64 |
65 |
66 | 67 |
68 |

方法

69 |

你可以在程序中指定选定哪个tab，使用select_tab方法。 70 |

71 | 

 72 |   $(document).ready(function(){
 73 |     $('ul.tabs').tabs('select_tab', 'tab_id');
 74 |   });
 75 |
76 |
77 | 78 | 79 | 80 |
81 |

预选取

82 |

默认情况下第一个Tab将会被选取，但是如果你不想这样，看下面的例子。

83 | 

 84 |   <li class="tab col s2"><a class="active" href="#test3">Test 3</a></li>
 85 |
86 |
87 | 88 | 89 |
90 | 91 | 92 |
93 |
94 |
95 | 102 |
103 |
104 |
105 |
106 |
-------------------------------------------------------------------------------- /views/javascript/transitions.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

渐变

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

14 | 我们已经做了一些渐变动画来给你想要的元素加上特效。我们强烈的建议使用ScrollFire插件以便能在页面滚动的时候触发transition。 15 |

16 |

列表渐现

17 |

创建一个层叠展示的UL标签。确保UL中的li标签opacity: 0

18 | 点击 19 | 

20 |   <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>
21 |
22 |
    23 |
  • 24 |

    List Item

    25 |

    This is a description

    26 |
    • 27 |
  • 28 |

    List Item

    29 |

    This is a description

    30 |
    • 31 |
  • 32 |

    List Item

    33 |

    This is a description

    34 |
    • 35 |
  • 36 |

    List Item

    37 |

    This is a description

    38 |
    • 39 |
  • 40 |

    List Item

    41 |

    This is a description

    42 |
    • 43 |
44 |
45 | 46 |
47 |

图片渐现

48 | 点击 49 | 

50 |   <a href="#!" class="btn" onclick="Materialize.fadeInImage('#image-test')">Click Me</a>
51 |
52 | 53 |
54 | 55 |
56 | 57 | 58 |
59 |
60 |
61 | 65 |
66 |
67 |
68 |
69 |
70 | 71 | {{#contentFor 'pagescripts'}} 72 | 73 | {{/contentFor}} -------------------------------------------------------------------------------- /views/javascript/waves.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

波浪特效

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

介绍

14 |

波浪特效是一个外部库，主要用来实现Material Design中的点击效果。

15 | 点我 16 |
17 | 18 | 19 | 20 |
21 |

使用ti

22 |

在按钮上添加一个waves-effectclass就能使用这个特效。如果要用白背景则使用waves-effect waves-light

23 | 

 24 |   <a class="waves-effect waves-light btn-large" href="#">Wave</a>
 25 |
26 |
27 | 28 | 29 | 30 |
31 | 32 |

自定义

33 |

框架中已经提供了数种样式，当然你也可以自定义class来使用。

34 |
35 |
36 |
颜色
37 |

使用相应的class即可。

38 | 

 39 |   <a href="#!" class="btn waves-effect waves-teal">Send</a>
 40 |
41 |
42 |
DefaultSend
43 |
waves-lightSend
44 |
waves-redSend
45 |
waves-yellowSend
46 |
waves-orangeSend
47 |
waves-purpleSend
48 |
waves-greenSend
49 |
waves-tealSend
50 |
51 |
52 | 53 |
54 |
自定义
55 |

如果已有的class颜色不能满足你，那么你也可以自定义颜色，看下面的例子。

56 | 57 | 

 58 |  /*
 59 |  When creating your CSS selector,
 60 |  change "brown" to something of your choosing
 61 |  */
 62 |  .waves-effect.waves-brown .waves-ripple {
 63 |  /* The alpha value allows the text and background color
 64 |  of the button to still show through. */
 65 |    background-color: rgba(121, 85, 72, 0.65);
 66 |  }
 67 |
68 |
69 |
70 |
71 | 72 |
73 | 74 |

环形

75 |

如果你想做一个环形的效果，添加waves-circle之后再添加waves-effect

76 |
77 |
78 |
HTML
79 | 

 80 |  <a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
 81 |    <i class="material-icons">add</i>
 82 |  </a>
 83 |
84 |
85 |
Defaultadd
86 |
waves-lightadd
87 |
88 |
89 |
90 |
91 | 92 | 93 |
94 | 95 | 96 |
97 |
98 |
99 | 105 |
106 |
107 |
108 |
109 |
-------------------------------------------------------------------------------- /views/mobile.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

手机

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 | 13 | 14 | 24 | 25 | 26 |
27 |

弹出框

28 |

滑动消失

29 |

在所有的设备上都能去除。

30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 |
38 | 42 |
43 |
44 |
45 |
46 |
-------------------------------------------------------------------------------- /views/showcase.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

案例

4 |
5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |

13 | 14 |

15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
Daniel Angel
24 |
25 |
26 | 27 |
Stamplay
28 |
29 |
30 | 31 |
Material Admin Template
32 |
33 |
34 | 35 |
36 |
37 | 38 |
Absurdo Burger
39 |
40 |
41 | 42 |
Kiosk Browser
43 |
44 |
45 | 46 |
Straphq
47 |
48 |
49 | 50 |
51 |
52 | 53 |
Varun Malhotra
54 |
55 |
56 | 57 |
Adbeus
58 |
59 |
60 | 61 |
Roboterwelt
62 |
63 |
64 | 65 |
66 |
67 | 68 |
Alexander Web Service
69 |
70 |
71 | 72 |
Tuan Phong Truong
73 |
74 |
75 | 76 |
Joel Cox
77 |
78 |
79 | 80 |
81 |
82 | 83 |
Webonise
84 |
85 |
86 | 87 |
Kenya Apps
88 |
89 |
90 | 91 |
Adolfo Gutierrez
92 |
93 |
94 | 95 |
96 |
97 | 98 |
DiskForYou
99 |
100 |
101 | 102 |
Stephanie Jagiello
103 |
104 |
105 | 106 |
Lifeaweso.me
107 |
108 |
109 | 110 |
111 |
112 | 113 |
Jakub Sobotka
114 |
115 |
116 | 117 |
Mako
118 |
119 |
120 | 121 |
-------------------------------------------------------------------------------- /views/start.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

快速上手

4 | 5 |
6 |

学习如何简单快速地使用Materialize

7 |
8 |
9 |
10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 |

下载

19 |

Materialize使用了两种方式来构建。选择任何一种你比较喜欢的方式引入到项目中。

20 | 21 |
22 |

Materialize

23 |

此版本（标准版）包含压缩后和未压缩两种.是用这个版本你不用安装任何额外的东西，只需要引入静态文件就行，如果你不了解Sass的话就用这种。

24 | Materialize 25 |
26 |
27 |

Sass

28 |

这个版本包含了SCSS源文件，此版本中你可以自由选择要使用哪些组件。显然，如果选择这个版本你首先需要安装Sass预编译器。

29 | Source 30 |
31 | 32 |
33 |
34 |

NPM

35 |

通过NPM下载最新的标准版。包含了未压缩和压缩后的两种.

36 | 

 37 |     npm install materialize-css
 38 |
39 |
40 |
41 |
42 |

Bower

43 |

通过Bower下载最新的标准版。包含了未压缩和压缩后的两种.

44 | 

 45 |     bower install materialize
 46 |
47 |
48 |
49 | 50 |
51 |
52 |

安装

53 |

项目结构

54 |

下载完成后，解压到你的项目中。目录大概是这样。

55 |

标准版包含压缩和未压缩两种不同的版本， min版本意味着这是压缩后的，使用这个能显著减少加载时间。 通常压缩版用在生产环境中，未压缩版用在开发环境中。

56 | 57 | 

 58 |     MyWebsite/
 59 |     |--css/
 60 |     |  |--materialize.css
 61 |     |
 62 |     |--font/
 63 |     |  |--material-design-icons/
 64 |     |  |--roboto/
 65 |     |
 66 |     |--js/
 67 |     |  |--materialize.js
 68 |     |
 69 |     |--index.html
 70 |
71 |
72 |
73 |

HTML

74 |

下一步，你要确保静态文件在适当的位置被引用。通常css文件在页面的head标签中引用，javascript文件在页面的底部引用。通过下面这个例子我想你懂得。

75 |

需要注意的是你必须在引用javascript前引用Jquery文件!

76 | 

 77 |   <!DOCTYPE html>
 78 |   <html>
 79 |   <head>
 80 |   <!--Import materialize.css-->
 81 |   <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 82 | 
 83 |   <!--Let browser know website is optimized for mobile-->
 84 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 85 |   </head>
 86 | 
 87 |   <body>
 88 |   <!--Import jQuery before materialize.js-->
 89 |   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 90 |   <script type="text/javascript" src="js/materialize.min.js"></script>
 91 |   </body>
 92 |   </html>
 93 |
94 |
95 |
96 | 97 | 98 |
99 |
100 |

第三方选项

101 |

部分社区也提供了些额外的方法在项目中引入Materialize。不过这些可能没有经过测试，从而不能保证一直都是最新版本。

102 |

Ruby Gem

103 |

文档 在此。

104 | 

105 |   gem 'materialize-sass'
106 |
107 |

Meteor Package

108 | 

109 |   meteor add materialize:materialize
110 |
111 |

Ember Package

112 | 

113 |   # install via npm
114 |   $ npm install ember-cli-materialize --save-dev
115 |   # make ember-cli fetch internal dependencies
116 |   $ ember g ember-cli-materialize
117 |
118 | 119 |
120 |
121 | 122 |
123 |
124 |

Sass

125 |

如果你下载了Sass版本，请仔细阅读以下内容，否则请忽略。

126 |

编译

127 |

好吧，你会发现下载文件中全是.scss文件，而不是常规的.css文件，并且还包含了大量的独立组件。不幸的是，浏览器并不能解析Sass，所以你必须先把这些文件编译为常规的.css文件。之后你便可以把这些引入到你的项目了。

128 | 129 | 

130 |     MyWebsite/
131 |     |--css/
132 |     |  |--materialize.css <-- compiled from scss/materialize.scss
133 |     |
134 |     |--font/
135 |     |  |--material-design-icons/
136 |     |  |--roboto/
137 |     |
138 |     |--js/
139 |     |  |--materialize.js
140 |     |
141 |     |--scss/
142 |     |  |--materialize.scss
143 |     |  |--components/
144 |     |
145 |     |--index.html
146 |
147 |
148 |
149 | 150 |
151 | 152 |
153 |
154 |
155 | 161 |
162 |
163 |
164 | 165 |
166 |
--------------------------------------------------------------------------------