mkhairi / materialize-sass Goto Github PK

View Code? Open in Web Editor NEW

803.0 39.0 245.0 4.12 MB

Materializecss rubygem for Rails Asset Pipeline / Sprockets

Home Page: http://materialize.labs.my/

License: MIT License

Ruby 1.25% JavaScript 77.50% SCSS 20.04% CSS 1.21%

materializecss rubyonrails rubygem material-design materialize material rails rubygems gem material-design-rails

materialize-sass's Introduction

Materialize sass ruby gem

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.1.0-alpha

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'

or github master branch

gem 'materialize-sass', github: 'mkhairi/materialize-sass

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';

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

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.

Fork it ( https://github.com/mkhairi/materialize-sass/fork )
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

materialize-sass's People

Contributors

Stargazers

Watchers

Forkers

tscolari mediasota apolzon hikaru-tsuruta simonc shawntoffel conceptstom esad elmanouche yurchikian munyite-megzs gusk dylandechant elbow-jason subbuthepeaceful onomated anjesh1 degreesk sidnvy seonaid linucc dushi27 nolds9 jasonzyj diego5529 kjj6198 adfink hazdik namiwang badalloff kerncheh khanhnguyenneka cerebroso tian-xiaobo davendersingh dagnisslogis otherness-space dduqueti ctwhome betabullsapp vianhanif qurasoft alex-pol billthompson ekohe gaybro8777 ruman alexsan715 lebart yoskakomba fransiti dannyel-34 alexmoon jameskerr angelabier1 bolorshagai94 adehaze olitrussell catuss-a deepakalevoor bllorens0430 peerlearning shivamv danreynolds webdev921 sitthichai mrbobsa jorgefgiron gregory-phillips mauriciolsrj moonpeople erdostom singh-amandeep marcosjeo imraphox hamid-kamalpour izabelakrzysztofik michaelsp m1kethai falzar shafi-zapyle fredpetris trostli neshmi mottigottlieb harley whitef0x0 nawalgupta abreckner nguyenxuanthong nsiromani chris-gooley hafizur-rahmanc dimasavitsky wakematta dgilperez sqaull24 hassannajam marcelo-lara gabriel-cardoso

materialize-sass's Issues

Not able to precompile

Hi. I'm getting an error during rake assets:precompile after following the instructions.

elbow@elbow-K55N ~/Prospace/snackbucket $ rake assets:precompile
rake aborted!
Sass::SyntaxError: Undefined variable: "$button-height".
/home/elbow/.rvm/gems/ruby-2.2.1/bundler/gems/materialize-sass-3dbf52da7a90/app/assets/stylesheets/materialize/components/_buttons.scss:6
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/script/tree/variable.rb:49:in `_perform'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/script/tree/node.rb:50:in `perform'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:394:in `visit_prop'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/stack.rb:79:in `block in with_base'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/stack.rb:79:in `with_base'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:430:in `block (2 levels) in visit_rule'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:430:in `map'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:430:in `block in visit_rule'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:428:in `visit_rule'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/stack.rb:79:in `block in with_base'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/stack.rb:79:in `with_base'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:158:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `map'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/base.rb:36:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:157:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:8:in `visit'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/root_node.rb:36:in `css_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/tree/root_node.rb:20:in `render'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-3.4.13/lib/sass/engine.rb:268:in `render'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sass-rails-5.0.3/lib/sass/rails/template.rb:47:in `evaluate'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/legacy_tilt_processor.rb:25:in `call'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:73:in `call_processor'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:55:in `block in call_processors'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:54:in `reverse_each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:54:in `call_processors'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:103:in `load_asset_by_uri'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:40:in `block in load'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:170:in `fetch_asset_from_dependency_cache'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:33:in `load'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/cached_environment.rb:20:in `block in initialize'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/cached_environment.rb:47:in `yield'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/cached_environment.rb:47:in `load'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/bundle.rb:23:in `block in call'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/utils.rb:183:in `dfs'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/bundle.rb:24:in `call'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:73:in `call_processor'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:55:in `block in call_processors'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:54:in `reverse_each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/processor_utils.rb:54:in `call_processors'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:103:in `load_asset_by_uri'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:40:in `block in load'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:170:in `fetch_asset_from_dependency_cache'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/loader.rb:33:in `load'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/cached_environment.rb:20:in `block in initialize'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/cached_environment.rb:47:in `yield'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/cached_environment.rb:47:in `load'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/base.rb:63:in `find_asset'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/base.rb:70:in `find_all_linked_assets'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/manifest.rb:138:in `block in find'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/legacy.rb:114:in `block (2 levels) in logical_paths'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:223:in `block in stat_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:207:in `block in stat_directory'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:204:in `each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:204:in `stat_directory'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:222:in `stat_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:226:in `block in stat_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:207:in `block in stat_directory'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:204:in `each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:204:in `stat_directory'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:222:in `stat_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:226:in `block in stat_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:207:in `block in stat_directory'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:204:in `each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:204:in `stat_directory'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/path_utils.rb:222:in `stat_tree'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/legacy.rb:105:in `each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/legacy.rb:105:in `block in logical_paths'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/legacy.rb:104:in `each'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/legacy.rb:104:in `logical_paths'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/manifest.rb:136:in `find'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/sprockets/manifest.rb:162:in `compile'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-rails-2.2.4/lib/sprockets/rails/task.rb:70:in `block (3 levels) in define'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-3.0.1/lib/rake/sprocketstask.rb:147:in `with_logger'
/home/elbow/.rvm/gems/ruby-2.2.1/gems/sprockets-rails-2.2.4/lib/sprockets/rails/task.rb:69:in `block (2 levels) in define'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
elbow@elbow-K55N ~/Prospace/snackbucket $

Any help is greatly appreciated. Thanks again. :)

collection_select does not render without using browser-default class

Error trying to use materialize-sass

Hi !

I don't know if it's a miss config from myself but i experience some bugs.

Config

Cloud9
Ruby : ruby 2.1.5p273 (2014-11-13 revision 48405) [x86_64-linux]
RVM : rvm 1.26.9 (1.26.9)
Rails : Rails 4.1.6

Gemfile

gem 'rails', '4.1.6'
gem 'sqlite3'
gem 'sass-rails', '> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '> 2.0'
gem 'sdoc', '> 0.4.0', group: :doc
gem 'spring', group: :development
gem 'materialize-sass'

Custom.scss

@import "materialize";

Error

Invalid CSS after " "lighten-5"": expected ")", was ": #fdeaeb,"
(in /home/ubuntu/workspace/events4.me/app/assets/stylesheets/custom.scss:11)

Stack trace

materialize-sass (0.95.2) app/assets/stylesheets/materialize/components/_color.scss:11
materialize-sass (0.95.2) app/assets/stylesheets/materialize.scss:6
app/assets/stylesheets/custom.scss:1
sass (3.2.19) lib/sass/scss/parser.rb:1147:in expected' sass (3.2.19) lib/sass/script/lexer.rb:206:inexpected!'
sass (3.2.19) lib/sass/script/parser.rb:483:in assert_tok' sass (3.2.19) lib/sass/script/parser.rb:433:inparen'
sass (3.2.19) lib/sass/script/parser.rb:418:in special_fun' sass (3.2.19) lib/sass/script/parser.rb:413:inraw'
sass (3.2.19) lib/sass/script/parser.rb:337:in funcall' sass (3.2.19) lib/sass/script/parser.rb:319:inident'
sass (3.2.19) lib/sass/script/parser.rb:228:in unary_not' sass (3.2.19) lib/sass/script/parser.rb:228:inunary_div'
sass (3.2.19) lib/sass/script/parser.rb:228:in unary_minus' sass (3.2.19) lib/sass/script/parser.rb:228:inunary_plus'
sass (3.2.19) lib/sass/script/parser.rb:209:in times_div_or_mod' sass (3.2.19) lib/sass/script/parser.rb:209:inplus_or_minus'
sass (3.2.19) lib/sass/script/parser.rb:209:in relational' sass (3.2.19) lib/sass/script/parser.rb:209:ineq_or_neq'
sass (3.2.19) lib/sass/script/parser.rb:209:in and_expr' sass (3.2.19) lib/sass/script/parser.rb:209:inor_expr'
sass (3.2.19) lib/sass/script/parser.rb:298:in space' sass (3.2.19) lib/sass/script/parser.rb:283:ininterpolation'
sass (3.2.19) lib/sass/script/parser.rb:246:in expr' sass (3.2.19) lib/sass/script/parser.rb:477:inassert_expr'
sass (3.2.19) lib/sass/script/parser.rb:49:in parse' sass (3.2.19) lib/sass/scss/parser.rb:1022:insass_script'
sass (3.2.19) lib/sass/scss/parser.rb:514:in variable' sass (3.2.19) lib/sass/scss/parser.rb:553:inblock_child'
sass (3.2.19) lib/sass/scss/parser.rb:543:in block_contents' sass (3.2.19) lib/sass/scss/parser.rb:82:instylesheet'
sass (3.2.19) lib/sass/scss/parser.rb:27:in parse' sass (3.2.19) lib/sass/engine.rb:342:in_to_tree'
sass (3.2.19) lib/sass/engine.rb:274:in to_tree' sass (3.2.19) lib/sass/tree/visitors/perform.rb:225:invisit_import'
sass (3.2.19) lib/sass/tree/visitors/base.rb:37:in visit' sass (3.2.19) lib/sass/tree/visitors/perform.rb:100:invisit'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:227:in block in visit_import' sass (3.2.19) lib/sass/tree/visitors/perform.rb:227:inmap'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:227:in visit_import' sass (3.2.19) lib/sass/tree/visitors/base.rb:37:invisit'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:100:in visit' sass (3.2.19) lib/sass/tree/visitors/base.rb:53:inblock in visit_children'
sass (3.2.19) lib/sass/tree/visitors/base.rb:53:in map' sass (3.2.19) lib/sass/tree/visitors/base.rb:53:invisit_children'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:109:in block in visit_children' sass (3.2.19) lib/sass/tree/visitors/perform.rb:121:inwith_environment'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:108:in visit_children' sass (3.2.19) lib/sass/tree/visitors/base.rb:37:inblock in visit'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:128:in visit_root' sass (3.2.19) lib/sass/tree/visitors/base.rb:37:invisit'
sass (3.2.19) lib/sass/tree/visitors/perform.rb:100:in visit' sass (3.2.19) lib/sass/tree/visitors/perform.rb:7:invisit'
sass (3.2.19) lib/sass/tree/root_node.rb:20:in render' sass (3.2.19) lib/sass/engine.rb:315:in_render'
sass (3.2.19) lib/sass/engine.rb:262:in render' sass-rails (4.0.5) lib/sass/rails/template.rb:22:inevaluate'
tilt (1.4.1) lib/tilt/template.rb:103:in render' sprockets (2.12.3) lib/sprockets/context.rb:197:inblock in evaluate'
sprockets (2.12.3) lib/sprockets/context.rb:194:in each' sprockets (2.12.3) lib/sprockets/context.rb:194:inevaluate'
sprockets (2.12.3) lib/sprockets/processed_asset.rb:12:in initialize' sprockets (2.12.3) lib/sprockets/base.rb:374:innew'
sprockets (2.12.3) lib/sprockets/base.rb:374:in block in build_asset' sprockets (2.12.3) lib/sprockets/base.rb:395:incircular_call_protection'
sprockets (2.12.3) lib/sprockets/base.rb:373:in build_asset' sprockets (2.12.3) lib/sprockets/index.rb:94:inblock in build_asset'
sprockets (2.12.3) lib/sprockets/caching.rb:58:in cache_asset' sprockets (2.12.3) lib/sprockets/index.rb:93:inbuild_asset'
sprockets (2.12.3) lib/sprockets/base.rb:287:in find_asset' sprockets (2.12.3) lib/sprockets/index.rb:61:infind_asset'
sprockets (2.12.3) lib/sprockets/processed_asset.rb:111:in block in resolve_dependencies' sprockets (2.12.3) lib/sprockets/processed_asset.rb:105:ineach'
sprockets (2.12.3) lib/sprockets/processed_asset.rb:105:in resolve_dependencies' sprockets (2.12.3) lib/sprockets/processed_asset.rb:97:inbuild_required_assets'
sprockets (2.12.3) lib/sprockets/processed_asset.rb:16:in initialize' sprockets (2.12.3) lib/sprockets/base.rb:374:innew'
sprockets (2.12.3) lib/sprockets/base.rb:374:in block in build_asset' sprockets (2.12.3) lib/sprockets/base.rb:395:incircular_call_protection'
sprockets (2.12.3) lib/sprockets/base.rb:373:in build_asset' sprockets (2.12.3) lib/sprockets/index.rb:94:inblock in build_asset'
sprockets (2.12.3) lib/sprockets/caching.rb:58:in cache_asset' sprockets (2.12.3) lib/sprockets/index.rb:93:inbuild_asset'
sprockets (2.12.3) lib/sprockets/base.rb:287:in find_asset' sprockets (2.12.3) lib/sprockets/index.rb:61:infind_asset'
sprockets (2.12.3) lib/sprockets/bundled_asset.rb:37:in init_with' sprockets (2.12.3) lib/sprockets/asset.rb:24:infrom_hash'
sprockets (2.12.3) lib/sprockets/caching.rb:54:in cache_asset' sprockets (2.12.3) lib/sprockets/index.rb:93:inbuild_asset'
sprockets (2.12.3) lib/sprockets/base.rb:287:in find_asset' sprockets (2.12.3) lib/sprockets/index.rb:61:infind_asset'
sprockets (2.12.3) lib/sprockets/environment.rb:75:in find_asset' sprockets (2.12.3) lib/sprockets/base.rb:295:in[]'
sprockets-rails (2.3.1) lib/sprockets/rails/helper.rb:243:in lookup_asset_for_path' sprockets-rails (2.3.1) lib/sprockets/rails/helper.rb:203:incheck_errors_for'
sprockets-rails (2.3.1) lib/sprockets/rails/helper.rb:172:in block in stylesheet_link_tag' sprockets-rails (2.3.1) lib/sprockets/rails/helper.rb:171:inmap'
sprockets-rails (2.3.1) lib/sprockets/rails/helper.rb:171:in stylesheet_link_tag' app/views/layouts/application.html.erb:5:in_app_views_layouts_application_html_erb__2272114930655414386_42727100'
actionview (4.1.6) lib/action_view/template.rb:145:in block in render' activesupport (4.1.6) lib/active_support/notifications.rb:161:ininstrument'
actionview (4.1.6) lib/action_view/template.rb:339:in instrument' actionview (4.1.6) lib/action_view/template.rb:143:inrender'
actionview (4.1.6) lib/action_view/renderer/template_renderer.rb:67:in render_with_layout' actionview (4.1.6) lib/action_view/renderer/template_renderer.rb:53:inrender_template'
actionview (4.1.6) lib/action_view/renderer/template_renderer.rb:17:in render' actionview (4.1.6) lib/action_view/renderer/renderer.rb:42:inrender_template'
actionview (4.1.6) lib/action_view/renderer/renderer.rb:23:in render' actionview (4.1.6) lib/action_view/rendering.rb:99:in_render_template'
actionpack (4.1.6) lib/action_controller/metal/streaming.rb:217:in _render_template' actionview (4.1.6) lib/action_view/rendering.rb:82:inrender_to_body'
actionpack (4.1.6) lib/action_controller/metal/rendering.rb:32:in render_to_body' actionpack (4.1.6) lib/action_controller/metal/renderers.rb:32:inrender_to_body'
actionpack (4.1.6) lib/abstract_controller/rendering.rb:25:in render' actionpack (4.1.6) lib/action_controller/metal/rendering.rb:16:inrender'
actionpack (4.1.6) lib/action_controller/metal/instrumentation.rb:41:in block (2 levels) in render' activesupport (4.1.6) lib/active_support/core_ext/benchmark.rb:12:inblock in ms'
/usr/local/rvm/rubies/ruby-2.1.5/lib/ruby/2.1.0/benchmark.rb:294:in realtime' activesupport (4.1.6) lib/active_support/core_ext/benchmark.rb:12:inms'
actionpack (4.1.6) lib/action_controller/metal/instrumentation.rb:41:in block in render' actionpack (4.1.6) lib/action_controller/metal/instrumentation.rb:84:incleanup_view_runtime'
activerecord (4.1.6) lib/active_record/railties/controller_runtime.rb:25:in cleanup_view_runtime' actionpack (4.1.6) lib/action_controller/metal/instrumentation.rb:40:inrender'
app/controllers/pages_controller.rb:4:in index' actionpack (4.1.6) lib/action_controller/metal/implicit_render.rb:4:insend_action'
actionpack (4.1.6) lib/abstract_controller/base.rb:189:in process_action' actionpack (4.1.6) lib/action_controller/metal/rendering.rb:10:inprocess_action'
actionpack (4.1.6) lib/abstract_controller/callbacks.rb:20:in block in process_action' activesupport (4.1.6) lib/active_support/callbacks.rb:113:incall'
activesupport (4.1.6) lib/active_support/callbacks.rb:113:in call' activesupport (4.1.6) lib/active_support/callbacks.rb:229:inblock in halting'
activesupport (4.1.6) lib/active_support/callbacks.rb:229:in call' activesupport (4.1.6) lib/active_support/callbacks.rb:229:inblock in halting'
activesupport (4.1.6) lib/active_support/callbacks.rb:166:in call' activesupport (4.1.6) lib/active_support/callbacks.rb:166:inblock in halting'
activesupport (4.1.6) lib/active_support/callbacks.rb:166:in call' activesupport (4.1.6) lib/active_support/callbacks.rb:166:inblock in halting'
activesupport (4.1.6) lib/active_support/callbacks.rb:166:in call' activesupport (4.1.6) lib/active_support/callbacks.rb:166:inblock in halting'
activesupport (4.1.6) lib/active_support/callbacks.rb:86:in call' activesupport (4.1.6) lib/active_support/callbacks.rb:86:inrun_callbacks'
actionpack (4.1.6) lib/abstract_controller/callbacks.rb:19:in process_action' actionpack (4.1.6) lib/action_controller/metal/rescue.rb:29:inprocess_action'
actionpack (4.1.6) lib/action_controller/metal/instrumentation.rb:31:in block in process_action' activesupport (4.1.6) lib/active_support/notifications.rb:159:inblock in instrument'
activesupport (4.1.6) lib/active_support/notifications/instrumenter.rb:20:in instrument' activesupport (4.1.6) lib/active_support/notifications.rb:159:ininstrument'
actionpack (4.1.6) lib/action_controller/metal/instrumentation.rb:30:in process_action' actionpack (4.1.6) lib/action_controller/metal/params_wrapper.rb:250:inprocess_action'
activerecord (4.1.6) lib/active_record/railties/controller_runtime.rb:18:in process_action' actionpack (4.1.6) lib/abstract_controller/base.rb:136:inprocess'
actionview (4.1.6) lib/action_view/rendering.rb:30:in process' actionpack (4.1.6) lib/action_controller/metal.rb:196:indispatch'
actionpack (4.1.6) lib/action_controller/metal/rack_delegation.rb:13:in dispatch' actionpack (4.1.6) lib/action_controller/metal.rb:232:inblock in action'
actionpack (4.1.6) lib/action_dispatch/routing/route_set.rb:82:in call' actionpack (4.1.6) lib/action_dispatch/routing/route_set.rb:82:indispatch'
actionpack (4.1.6) lib/action_dispatch/routing/route_set.rb:50:in call' actionpack (4.1.6) lib/action_dispatch/journey/router.rb:73:inblock in call'
actionpack (4.1.6) lib/action_dispatch/journey/router.rb:59:in each' actionpack (4.1.6) lib/action_dispatch/journey/router.rb:59:incall'
actionpack (4.1.6) lib/action_dispatch/routing/route_set.rb:678:in call' rack (1.5.3) lib/rack/etag.rb:23:incall'
rack (1.5.3) lib/rack/conditionalget.rb:25:in call' rack (1.5.3) lib/rack/head.rb:11:incall'
actionpack (4.1.6) lib/action_dispatch/middleware/params_parser.rb:27:in call' actionpack (4.1.6) lib/action_dispatch/middleware/flash.rb:254:incall'
rack (1.5.3) lib/rack/session/abstract/id.rb:225:in context' rack (1.5.3) lib/rack/session/abstract/id.rb:220:incall'
actionpack (4.1.6) lib/action_dispatch/middleware/cookies.rb:560:in call' activerecord (4.1.6) lib/active_record/query_cache.rb:36:incall'
activerecord (4.1.6) lib/active_record/connection_adapters/abstract/connection_pool.rb:621:in call' activerecord (4.1.6) lib/active_record/migration.rb:380:incall'
actionpack (4.1.6) lib/action_dispatch/middleware/callbacks.rb:29:in block in call' activesupport (4.1.6) lib/active_support/callbacks.rb:82:inrun_callbacks'
actionpack (4.1.6) lib/action_dispatch/middleware/callbacks.rb:27:in call' actionpack (4.1.6) lib/action_dispatch/middleware/reloader.rb:73:incall'
actionpack (4.1.6) lib/action_dispatch/middleware/remote_ip.rb:76:in call' actionpack (4.1.6) lib/action_dispatch/middleware/debug_exceptions.rb:17:incall'
actionpack (4.1.6) lib/action_dispatch/middleware/show_exceptions.rb:30:in call' railties (4.1.6) lib/rails/rack/logger.rb:38:incall_app'
railties (4.1.6) lib/rails/rack/logger.rb:20:in block in call' activesupport (4.1.6) lib/active_support/tagged_logging.rb:68:inblock in tagged'
activesupport (4.1.6) lib/active_support/tagged_logging.rb:26:in tagged' activesupport (4.1.6) lib/active_support/tagged_logging.rb:68:intagged'
railties (4.1.6) lib/rails/rack/logger.rb:20:in call' actionpack (4.1.6) lib/action_dispatch/middleware/request_id.rb:21:incall'
rack (1.5.3) lib/rack/methodoverride.rb:21:in call' rack (1.5.3) lib/rack/runtime.rb:17:incall'
activesupport (4.1.6) lib/active_support/cache/strategy/local_cache_middleware.rb:26:in call' rack (1.5.3) lib/rack/lock.rb:17:incall'
actionpack (4.1.6) lib/action_dispatch/middleware/static.rb:64:in call' rack (1.5.3) lib/rack/sendfile.rb:112:incall'
railties (4.1.6) lib/rails/engine.rb:514:in call' railties (4.1.6) lib/rails/application.rb:144:incall'
rack (1.5.3) lib/rack/lock.rb:17:in call' rack (1.5.3) lib/rack/content_length.rb:14:incall'
rack (1.5.3) lib/rack/handler/webrick.rb:60:in service' /usr/local/rvm/rubies/ruby-2.1.5/lib/ruby/2.1.0/webrick/httpserver.rb:138:inservice'
/usr/local/rvm/rubies/ruby-2.1.5/lib/ruby/2.1.0/webrick/httpserver.rb:94:in run' /usr/local/rvm/rubies/ruby-2.1.5/lib/ruby/2.1.0/webrick/server.rb:295:inblock in start_thread'

Thanks in advance and good luck :D

How to override colour variables?

Hi there

I'm trying to do this: http://materializecss.com/sass.html

How do I overwrite the settings in the _variables.scss when using this gem?

Cheers.

Icons

The class labels for icons is not matching appropriately according to your guide (http://materializecss.com/icons.html).

For example, using class "mdi-navigation-apps" shows the icon for "mdi-navigation-fullscreen-exit".

Not sure if it is an issue with the original Sass file from MaterializeCSS or the gem install. Posted an issue on both repos.

Issues with Sass Files list in the colors.scss file

Every time I try to compile the SCSS files I am get this error message:

error style.scss (Line 11 of _color.scss: Invalid CSS after " 'lighten-5'": expected ")", was ": #fdeaeb,")

Menu works fine only on one page

All works fine only in root page in my Rails app, and in some others but not on full site.

The .button-collapse losts functionality and menu doesn't work. I just click on it, or tap (in mobile device) and nothing happens.

Maybe my jQuery initialization is wrong? But it looks fine:

$(function() {
  $(".button-collapse").sideNav();
});

Thanks for watching!

using a CDN with rails breaks access to materialize fonts

This was a problem with CORS, not a problem with this gem.

I use this gem with Rails 4.2.0 and Ruby 2.1.5, all is OK, but icons not showing, whats wrong ? Help me, please.

h2 class="center light-blue-text">flash_on</h2

Problem with materialize-sprockets

Hi, i want to install materialize-sass and i follow your instructions.
But the server return the next error: "couldn't find file 'materialize-sprockets'"
Thanks.

font path issue for updated assets

variable & paths to assets such as fonts must be rewritten after update corresponding file version

How to use 1 component?

What would I need to do if I just want to use 1 component, like your cards implementation, with my mainly bootstrap application? Is this something that's possible? I tried to import only the card component but I got an error about a missing variable. But if I import all, it breaks the site UI pretty much.

side-nav in nav-wrapper

Hi, i want to put a mdi-navigation-menu with a side-nav. This button have to be in my Header nav.
But when i combine them, button doesn't appear.

Code

<a href="#" data-activates="slide-out" class="button-collapse">
  <i class="small mdi-navigation-menu"></i>
</a>

Header

<header>
    <div class='navbar-fixed'>
        <nav class='cyan darken-2'>
            <div class='nav-wrapper'>
                <ul class='right hide-on-med-and-down'>
                    <li><%= link_to 'Sign up', '/' %></li>
                    <li><%= link_to 'Login', '/' %></li>
                    <li><%= link_to 'About', '/about' %></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

Can you help me please ?

Update to Materialize 0.95.3

icons

rails new apptest (ruby 2.2.1, rails 4.2)
add materialize-sass to Gemfile
add the require materialize-sprocklets to app/assets/application.js
add @import materialize; to app/assets/stylesheet.scss (and remove .css one)

everything works well, but icons don't work (in development mode). No errors is displayed from server or browser. If i try to use the cdn () icons works

what's wrong?

Waves bugged with turbolinks

Hi guys.
The waves effect, which use JS, is crashing while using turbolinks.
Even with jquery.turbolinks it is still bugged.
I suggest it as a bug for the materializecss team, could help me working on it?
Thanks.

class 'material-icons' doesn't display icons

I am using the following markup on my react-based app.

<div className="app">
        <nav className="light-blue lighten-1" role="navigation">
          <div className="nav-wrapper container">
            <a id="logo-container" href="#" className="brand-logo">Logo</a>
            <ul className="right hide-on-med-and-down">
              <li><a href="#">Navbar Link</a></li>
            </ul>
            <ul id="nav-mobile" className="side-nav">
              <li><a href="#">Navbar Link</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" className="button-collapse"><i className="material-icons">menu</i></a>
          </div>
        </nav>
        <div className="section no-pad-bot">
          <div className="container">
            <div className="row center">
              <div className="col s12 m12 l12">
                page content
              </div>
            </div>
          </div>
        </div>
      </div>

However, <i className="material-icons">menu</i> doesn't change to the stack bar icon on small screen. See the demo at http://materializecss.com/templates/starter-template/preview.html

I even added the following code on application.scss, but still not working.

.material-icons {
    font-family: 'Material-Design-Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

RubyGems

Are you going to publish it on RubyGems?

Form animations broken after an erroneous submit

After submitting a form with some incorrect input the labels and text becomes static and will not move to the top as they do when the field is selected or when the page loads.
see:

My form code looks like this:

<%= form_for(@school, :html => { multipart: true }) do |f| %>
    <% if @school.errors.any? %>
      <div id="error-content" class="card-panel red lighten-4">
        <div class="row">
                <a id="button-dismiss"class="btn-floating btn-medium center teal lighten-3"><i class="material-icons">add</i></a>
          <h5><%= pluralize(@school.errors.count, "error") %> prohibited this school from being saved:</h5>
        </div>
        <div class="col s4">
          <ul>
          <% @school.errors.full_messages.each do |message| %>
            <li>- <%= message %></li>
          <% end %>
          </ul>
        </div>
      </div>
    <% end %>
    <div class="row">
        <div class="col s12">
        <div class="row">
              <div class="input-field col s10">
                  <i class="material-icons prefix">business</i>
                <%= f.label :name %>
                <%= f.text_field :name, placeholder: "Please use appropriate punctuation" %>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s10">
                  <i class="material-icons prefix">language</i>
                <%= f.label :address %>
                <%= f.text_field :address, placeholder: "ex. 123 Fake St., Boston, USA" %>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s10">
                  <i class="material-icons prefix">phone</i>
                <%= f.label :phone %>
                <%= f.text_field :phone, placeholder: "in the format: (123) 456-7890" %>
              </div>
            </div>

           <div class="row">
              <div class="input-field col s10">
              <i class="material-icons prefix">web</i>
                <%= f.label :website %>
                <%= f.text_field :website, placeholder: "http://www.wonderschool.com" %>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s3">
                    <%= button_tag( :class => "waves-effect waves-light btn") do %>
                      Create<i class="material-icons">send</i>
                    <% end %>
              </div>
            </div>  
        </div>
    </div>
<% end %>

I've tried disabling turbolinks and using the jquery.turbolinks gem. But neither approach has worked. Any advise would be really appreciated

turbolinks, form input labels are in wrong place

page loaded via turbolink
https://screencloud.net/v/xghH

This is using the old icons format

Can this be updated to the new font icons format?

According to the documentation on materializecss.com, this is the structure to create icons

// i element with 'material-icons' class, with the name of the icon as the value. See example:
<i class="material-icons">menu</i>

However this gem seems to be using the old format, (or the font files aren't up to date):

<i class="mdi-navigation-arrow-drop-down"></i>

Problem with font path

Hello,

For some strange reason, the font path has changed 7 days ago.
Please see link to my comment on the last commit.
d21eb4b#commitcomment-11039661

Thank you for your great work!

Regards,
Manu

font icons not displaying

Gemfile

group :assets do
  gem 'jquery-rails', '3.1.0'
  gem 'jquery-ui-rails', '4.1.2'
  gem 'font-awesome-rails'
  gem 'turbo-sprockets-rails3', '0.3.14'
  gem 'sass-rails', '3.2.6'
  gem 'uglifier', '2.5.0'
  gem 'therubyracer', '0.12.1', :platforms => :ruby
  gem 'materialize-sass', '0.97.0'
end

application.js

//= require jquery
//= require jquery_ujs
//= require materialize-sprockets
//= require_tree ./plugins
//= require_self

application.scss

/*
 *= require 'font-awesome'
 *= require 'materialize'
 *= require_tree ./plugins
 *= require_self

Any ides why font icon clases and fonts are not being loaded?

loaded css/js files in page:

<link href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/materialize.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/controllers/sessions/new.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/jquery.easing.1.3.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/animation.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/velocity.min.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/hammer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/jquery.hammer.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/global.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/collapsible.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/leanModal.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/materialbox.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/parallax.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/tabs.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/waves.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/toasts.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/sideNav.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/forms.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/slider.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/cards.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/pushpin.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/buttons.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/transitions.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/scrollFire.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/date_picker/picker.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/date_picker/picker.date.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize/character_counter.js?body=1" type="text/javascript"></script>
<script src="/assets/materialize-sprockets.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

global vars not recognized / _variables.scss not working

HI,
I Just installed your gem in my rails 4.2 app.
The stylesheet/fonts/javascripts work correctly.
However, I am unable to override the primary color or any other variables by mentioning them in a _variables.scss file which I then import into my application.scss file.
I'd appreciate any help.
Trying to debug, I got rid of the _variables.scss file completely and simply added the following lines at the top of my application.scss file:

$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';

This doesn't work either.

-----------------------_variables.scss attempt----------------
application.scss
@import 'materialize';
@import '_variables';

_variables.scss
$primary-color: color("blue", "lighten-2") !default;

I also tried removing the '!default', but that does not work either.

Regards,
RR.

PS: great work putting this gem together.

Sass::SyntaxError

Sass syntax error in _color.scss

Someone help?

Sass::SyntaxError: Undefined variable: "$medium-and-up" and "$button-height"

I'm getting the error 'Sass::SyntaxError: Undefined variable: "$medium-and-up"' and "$button-height" whenever I access a page or run 'rake assets:precompile'

My config/application.rb looks like this:

...
config.assets.enabled = true
config.assets.precompile = %w(*.js *.coffee *.scss *.css *.png *.jpg *.jpeg *.gif *.ico *.eot *.svg *.ttf *.woff)
...

My application.css.scss looks like this:

...
/*
 *= require_self
 */
@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import "materialize";
...

In application.html.erb, application.css is imported before the controller-specific stylesheet which uses $medium-and-up.

Compatibility with Rails-like tools

Hi,

Thanks for this awesome gem :)
One little thing though, I tried to use it outside of Rails (with Middleman) like I'm used to with bootstrap-sass and it didn't work because of a really strong dependency on Rails.
Do you think it would be possible at some point to decouple it a bit from Rails? :)

Cheers,

Upgrade to V0.97 of Materialize

New Version of Materialize released on 21st June (https://github.com/Dogfalo/materialize/releases)
Time to upgrade this Gem

Javascript not working after navigating through links

I discover this problem with the wave effect on buttons. First it wasn't working at all, so I discover this issue and added the initialization in one of my .js files in the assets folder.

So my waves were working on my index page, but when I click and navigate to any other page they just stop working. This happens also with my tooltips and modals so I assume that the problem is with the entire js file

here is how I initialize my components

$(document).on('ready', function() {
    Waves.displayEffect();
    $(".button-collapse").sideNav();
    $('.modal-trigger').leanModal();
});

The version of my gems from Gemfile.lock

materialize-sass (0.95.2)
      sass (~> 3.1)

Would this be a problem related with turbolinks? any help would be appreciated

Sass incorrect version dependency

Since Materialize uses @maps for colors. So Sass must be at least 3.3+

Waves are not working in rails4

Somehow I can't get the Wave animation working in Rails4. I used the starter template, and even then the orange button is not showing the wave animation.

Is there something I'm doing wrong? Should I initialize Wave somewhere?

Dropdown isn't working in Rails

I have the same problem with the dropdown menu and buttons.

as you can see here, the dropdown-content is underneath the button and when I click on the button, I see a transparent dropdown menu and the list as it here disappears but like I said, no background color and nu highlight color.

When I tried the materialize-css example in codepen it just works!

Here's my coped example

I converted it to HAML which I use like so:

%a{ :class => 'dropdown-button btn', :href => '#', :data => {:activates => 'dropdown1'} } Drop Me!

%ul{id: 'dropdown1', class: 'dropdown-dontent'}
  %li
    %a{href: '#!'} one
  %li
    %a{href: '#!'} two
  %li.divider
  %li
    %a{href: '#!'} three

Cannot resolve import into sass/scss file

Hi, I followed your directions but Ruby mine report that it cannot "resolve import into sass/scss file". This occurs at `@import 'materialize';

Override variables

Is there any way to override the variables? Attempting to set them before the import of materialize causes errors and defining them after has no effect.

Sass::SyntaxError - Invalid CSS after " "lighten-5"": expected ")", was ": #fdeaeb,"

I install your gem and when load this project show this error:

Sass::SyntaxError in Public#home
Invalid CSS after " "lighten-5"": expected ")", was ": #fdeaeb,"

I try install sass version manually and I find the same problem.
I use ruby 2.1.1
rails 4.1.8
sass 3.2.19
sass-rails 4.0.5

Any idea?

page:load

Turbolinks requiere ready and page:load events.

couldn't find file 'materialize-sprockets'

when write in application.js -> //= require materialize-sprockets
then show the next message:

Sprockets::FileNotFound in Public#index

couldn't find file 'materialize-sprockets'

Modal with fixed navbar

When using the navbar-fixed class with a modal in the navbar some funky stuff happens with the z-index and you can't see the modal. Tried putting a ready callback for the modal to fix but that didn't work

#issue media queries not working on mobile

Media queries are not working on mobile .

can someone tell me why is this happening?

Illegal nesting: Only properties may be nested beneath properties.

I am receiving the error above when trying to visit my site using materialize-sass (it also does it with the bower package)

materialize-sass (0.96.2) app/assets/stylesheets/materialize/components/_prefixer.scss, line 54
materialize-sass (0.96.2) app/assets/stylesheets/materialize.scss, line 4
app/assets/stylesheets/application.scss, line 1

# app/assets/stylesheets/application.scss
@import "materialize";

# app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>

I'm sure I must be missing something silly.

Any help would be appreciated.

Thanks.

Pagination

how come ????????

https://github.com/mkhairi/materialize-sass/blob/master/app%2Fassets%2Fstylesheets%2Fmaterialize%2Fcomponents%2F_global.scss#L477

//Pagination
// &.pagination {
// display: inline-block;

// ul{
// background-color: transparent;
// font-size: 0;
// display: inline-block;
// }
// li {
// // display: inline;
..........

Materialize icons

Hi, I am trying to make the nav bar example work but I cant see the material icons, I am "translating" the html into haml
arrow_drop_down

into

%i.material-icons.right arrow_drop_down

but it does not show the icon, it shows the text itself

what i am doing wrong?

When switching between pages input elements are not rendered as 'active'.

The cause is clearly turbolinks. When switching to my edit page, the page looks like this:

But when I refresh the page, everything is fine:

Some CSS is broken in rails

I'm having some broken CSS when following your readme and trying to use it in rails. When and container under the nav ends up with 0px height and all ul and li used in the nav suddenly get the fonts messed up and sticking to the top of the navbar. See attached image looking at logout link on

_topnav.html.erb

<nav class="top-nav">
      <a href="#" class="brand-logo">CAT</a>
      <ul class="right">
        <li><a href="#">Logout</a></li>
      </ul>
</nav>

application.scss

 *= require_tree .
 *= require_self
 */
@charset "UTF-8";

// Reset
@import "materialize/components/normalize";
@import "materialize/components/color";
$primary-color: color("blue", "accent-2") !default;

@import "materialize";


header, main, footer {
  padding-left: 240px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

That should be the way to use materialize-css right?

Icons not working

Hey!

I noticed the icons arent working.

EDIT: More info:
MDI seems to be installed here: https://github.com/mkhairi/materialize-sass/blob/master/app/assets/stylesheets/materialize/components/_icons-material-design.scss

But it doesnt work. Any idea whats going on? @mkhairi

Thanks.

Publish 0.95.2 version on rubygems

@mkhairi

Issue with font-icon

Hello,

First of all, thanks for providing the Materialize amazingness to SASS.

Since we got a JS error, I'm using directly the github master branch in our project. We saw an issue with the Icon: the provided class didn't render the right icon. For example if I use 'mdi-action-home' it display the 'mdi-action-history' icon. All icon are wrong icon. I suppose the font was updated but the css was not updated to support the new font.

Thanks a lot for watching this.
Best regards

Lets make simple_form generator

Having simple form run for this framework would be really nice!

Issue using materialize-sass with form_for

the button initially looks fine but in case of errors in the login form it changes to this.

i am getting two sets of radio buttons and the materialise radio-buttons are not clickable the others are
i have facing many issues styling form_for with materialize-sass.
please help :(

mkhairi / materialize-sass Goto Github PK

materialize-sass's Introduction

Materialize sass ruby gem

Notices

Installation

Usage

a. Sass

b. JavaScript

c. Icons

Contributing

materialize-sass's People

Contributors

Stargazers

Watchers

Forkers

materialize-sass's Issues

Config

Gemfile

Custom.scss

Error

Stack trace

Code

Header

Recommend Projects

Recommend Topics

Recommend Org