• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

rubysamurai/material_design_lite-sass: Google's Material Design Lite with Ma ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

rubysamurai/material_design_lite-sass

开源软件地址(OpenSource Url):

https://github.com/rubysamurai/material_design_lite-sass

开源编程语言(OpenSource Language):

Ruby 93.1%

开源软件介绍(OpenSource Introduction):

Material Design Lite for Sass

Gem Version Build Status

material_design_lite-sass is a Sass-powered version of Material Design Lite for your Ruby applications. In addition to all of Material Design Lite components it includes Material Icons, official icon set from Google, and Roboto font, the recommended font for material design.

Installation

Ruby on Rails

Open your Rails application's Gemfile and add this line:

gem 'material_design_lite-sass'

Save Gemfile and execute bundle command to install the gem.

Open /app/assets/stylesheets/application.scss file and add this line:

@import 'material';

Note: Default Rails installation comes with .css file extension for stylesheet assets files, make sure you change it to .scss and remove all the *= require_tree . and *= require_self statements from file. Alternatively, to keep original application.css file, you can create custom.scss file in the same folder and import material there.

Open app/assets/javascripts/application.js file and add this line:

//= require material

Restart Rails web server if it was running and now your Rails application is powered by Sass version of Material Design Lite.

Turbolinks

Material Design Lite doesn't support turbolinks by default. You have to either disable turbolinks or add this JavaScript code to your project:

For turbolinks v2:

document.addEventListener('page:change', function() {
  componentHandler.upgradeDom();
});

For turbolinks v5:

document.addEventListener('turbolinks:load', function() {
  componentHandler.upgradeDom();
});

Put this code, for instance, in app/assets/javascripts/application.js file or in app/views/layouts/application.html.erb file after closing </body> tag.

Usage

By default, using @import 'material'; and //= require material, all of Material Design Lite components are imported.

To import specific JavaScript components, first you need to include support components:

//= require material/mdlComponentHandler
//= require material/rAF

Then include any Material Design Lite JavaScript component:

//= require material/button
//= require material/checkbox
//= require material/data-table
//= require material/icon-toggle
//= require material/layout
//= require material/menu
//= require material/progress
//= require material/radio
//= require material/ripple
//= require material/slider
//= require material/snackbar
//= require material/spinner
//= require material/switch
//= require material/tabs
//= require material/textfield
//= require material/tooltip

Individual Sass components can be included like this:

// Variables and mixins
@import "material/variables";
@import "material/mixins";

// Resets and dependencies
@import "material/resets";
@import "material/typography";

// Components
@import "material/palette";
@import "material/ripple";
@import "material/animation";
@import "material/badge";
@import "material/button";
@import "material/card";
@import "material/checkbox";
@import "material/chip";
@import "material/data-table";
@import "material/dialog";
@import "material/mega_footer";
@import "material/mini_footer";
@import "material/icon-toggle";
@import "material/list";
@import "material/menu";
@import "material/progress";
@import "material/layout";
@import "material/radio";
@import "material/slider";
@import "material/snackbar";
@import "material/spinner";
@import "material/switch";
@import "material/tabs";
@import "material/textfield";
@import "material/tooltip";
@import "material/shadow";
@import "material/grid";
@import "material/material-icons";
@import "material/roboto";

Material Icons

An icon can be included using ligatures, a typographic feature that is supported in most modern browsers:

<i class="material-icons">info</i>

For browsers that do not support ligatures, fall back to specifying the icons using numeric character references:

<i class="material-icons">&#xE88E;</i>

Complete list of Material Icon names and codepoints can be found here

Variables

Sass version provides many variables to make customization process convenient. The full set of Material Design Lite variables can be found here.

To override the variable it must be redefined before the @import directive, like this:

$layout-header-bg-color: rgb(128,128,128) !default;
@import 'material';

Note on Sass color variables: All Material Design Lite color variables are defined with RGB values, overriding these variables with hexadecimal color values may result in unexpected behavior.

Versioning

Material Design Lite for Sass follows the upstream version of Google's Material Design Lite. But last version number may be ahead, in case there is a need to release project specific changes.

Credits

Material Design Lite for Sass is inspired from bootstrap-sass by Bootstrap team.

License

Material Design Lite © Google. Licensed under the Apache-2 license.

Material Icons © Google. Licensed under the Apache-2 license.

Roboto © Google. Licensed under the Apache-2 license.

material_design_lite-sass © Dmitriy Tarasov. Released under the MIT license.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap