back back-top comments magnifier menu mobile right smile views

Materialize,基于Material Design的响应式前端框架

Jean
Jean

material-design01
Material Design 是 Google 在2年前I/O大会上推出的全新设计语言,作为年度最有影响力的设计理念之一,曾在一时名声大躁。

它是一套比较拟物的设计语言,提取自卡片的材质和真实的光影。突出物质最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,达到简洁与直观的视觉效果,和最真实的体验。

今天向大家推荐一款现代化响应式前端框架:Materialize,它基于Material Design 的设计规范。由一个很年轻的团队创造,在GitHub上人气很高,截止目前已有21281个star。

materialize-index

英文文档:http://materializecss.com/
GitHub:https://github.com/Dogfalo/materialize

Materialize 框架有很容易上手,用户体验很棒。学习成本很低,你可以通过CDN、NPM 或 Bower 快速构建并引用到自己的项目中。

CDN

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

NPM

npm install materialize-css

Bower

bower install materialize

基本项目结构

MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

HTML

<!DOCTYPE html>
<html>
<head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

<body>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

本文由 前端先生 原创,欢迎转载,但请注明出处。

1条评论

1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

扫描二维码分享到微信