All Projects → mkhairi → Materialize Sass

mkhairi / Materialize Sass

Licence: mit
Materializecss rubygem for Rails Asset Pipeline / Sprockets

Programming Languages

ruby
36898 projects - #4 most used programming language

Projects that are alternatives of or similar to Materialize Sass

Jekyll Material Theme
A Jekyll Theme based on Material Design using Materialize.
Stars: ✭ 165 (-78.98%)
Mutual labels:  material-design, material, materializecss
Graphql devise
GraphQL interface on top devise_token_auth
Stars: ✭ 100 (-87.26%)
Mutual labels:  rails, gem, rubygem
Tabler Rubygem
Rubygem for https://tabler.github.io
Stars: ✭ 77 (-90.19%)
Mutual labels:  rails, gem, rubygems
Arctic admin
Responsive Theme for ActiveAdmin
Stars: ✭ 201 (-74.39%)
Mutual labels:  rails, gem, material-design
Karafka
Framework for Apache Kafka based Ruby and Rails applications development.
Stars: ✭ 1,223 (+55.8%)
Mutual labels:  rails, rubygem, rubygems
jquery-datatables
Jquery datatables ruby gems for assets pipeline
Stars: ✭ 73 (-90.7%)
Mutual labels:  rubygems, rubygem, gem
Taptargetview
An implementation of tap targets from the Material Design guidelines for feature discovery.
Stars: ✭ 5,114 (+551.46%)
Mutual labels:  material-design, material
Material Design Template
Material Design Based One Page HTML Template
Stars: ✭ 572 (-27.13%)
Mutual labels:  material-design, material
Material Awesome
Material and Mouse driven config for AwesomeWM 4.3
Stars: ✭ 588 (-25.1%)
Mutual labels:  material-design, material
React Native Snackbar
🍱 Material Design "Snackbar" component for Android and iOS.
Stars: ✭ 613 (-21.91%)
Mutual labels:  material-design, material
Materialdesignextensions
Material Design Extensions is based on Material Design in XAML Toolkit to provide additional controls and features for WPF apps
Stars: ✭ 516 (-34.27%)
Mutual labels:  material-design, material
Fluid
📖 Library for QtQuick apps with Material Design
Stars: ✭ 601 (-23.44%)
Mutual labels:  material-design, material
Material Remixer Android
Remixer for Android. Live adjustment of app variables.
Stars: ✭ 782 (-0.38%)
Mutual labels:  material-design, material
Textfieldboxes
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.
Stars: ✭ 760 (-3.18%)
Mutual labels:  material-design, material
Angular Mdc Web
Angular wrapper for Material Design (Web) Components
Stars: ✭ 542 (-30.96%)
Mutual labels:  material-design, material
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (-25.35%)
Mutual labels:  material-design, material
Android Iconics
Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Stars: ✭ 4,916 (+526.24%)
Mutual labels:  material-design, material
Mailcatcher
Catches mail and serves it through a dream.
Stars: ✭ 5,512 (+602.17%)
Mutual labels:  rails, rubygems
React Native Material Dropdown
Material dropdown with consistent behaviour on iOS and Android
Stars: ✭ 661 (-15.8%)
Mutual labels:  material-design, material
Material Shell
A modern desktop interface for Linux. Improve your user experience and get rid of the anarchy of traditional desktop workflows. Designed to simplify navigation and reduce the need to manipulate windows in order to improve productivity. It's meant to be 100% predictable and bring the benefits of tools coveted by professionals to everyone.
Stars: ✭ 6,189 (+688.41%)
Mutual labels:  material-design, material

Materialize sass ruby gem Gem Version

materialize-sass is a Sass powered version of Materialize, a modern responsive front-end framework based on Material Design.

example: http://materialize.labs.my/

source: https://github.com/mkhairi/materialize-rails

Notices

This master branch now v1.0.0

Documentation for previous releases (v0.100.*) are available this branch.

Installation

In your Gemfile you need to add the materialize-sass gem:

gem 'materialize-sass', '~> 1.0.0'

And then run the bundler and restart your server to make the files available through the pipeline:

$ bundle install

Or install it separately:

$ gem install materialize-sass

Usage

a. Sass

Import Materialize styles in app/assets/stylesheets/application.scss:

@import "materialize";

NOTE: If you have just generated a new Rails application, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so remove it.

$ rm app/assets/stylesheets/application.css

HINT: Override materialize color variable.

Since materialize color scheme are declared in color.scss you should import the color.scss first. then you can override color variable just like this:

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

or

You can import each component just like in this file below: https://github.com/mkhairi/materialize-sass/blob/master/assets/stylesheets/materialize.scss

b. JavaScript

Require Materialize javascripts in app/assets/javascripts/application.js:

//= require materialize

or

Require materialize-sprockets to provide individual Materialize components for ease of debugging

//= require materialize-sprockets

c. Icons

Include this line in the portion of your HTML code

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

or import this line in your application.scss

  @import "https://fonts.googleapis.com/icon?family=Material+Icons";

or install this gem for offline icons

  gem 'material_icons' 

see docs

Contributing

note: Any changes or Pull Request regarding materialize assets should be made in official materialize repo.

  1. Fork it ( https://github.com/mkhairi/materialize-sass/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].