{"id":13433071,"url":"https://github.com/mkhairi/materialize-sass","last_synced_at":"2025-10-08T18:26:59.453Z","repository":{"id":24808761,"uuid":"28222929","full_name":"mkhairi/materialize-sass","owner":"mkhairi","description":"Materializecss rubygem for Rails Asset Pipeline / Sprockets","archived":false,"fork":false,"pushed_at":"2024-08-12T10:51:16.000Z","size":4221,"stargazers_count":805,"open_issues_count":11,"forks_count":243,"subscribers_count":39,"default_branch":"master","last_synced_at":"2024-10-29T14:17:13.206Z","etag":null,"topics":["gem","material","material-design","material-design-rails","materialize","materializecss","rails","rubygem","rubygems","rubyonrails"],"latest_commit_sha":null,"homepage":"http://materialize.labs.my/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mkhairi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-12-19T09:24:21.000Z","updated_at":"2024-09-06T17:24:03.000Z","dependencies_parsed_at":"2024-11-15T05:32:14.487Z","dependency_job_id":null,"html_url":"https://github.com/mkhairi/materialize-sass","commit_stats":{"total_commits":190,"total_committers":23,"mean_commits":8.26086956521739,"dds":0.2894736842105263,"last_synced_commit":"9069a666c7163890701b0edfab0ba71d041e24d5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkhairi%2Fmaterialize-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkhairi%2Fmaterialize-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkhairi%2Fmaterialize-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkhairi%2Fmaterialize-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkhairi","download_url":"https://codeload.github.com/mkhairi/materialize-sass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246269153,"owners_count":20750227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gem","material","material-design","material-design-rails","materialize","materializecss","rails","rubygem","rubygems","rubyonrails"],"created_at":"2024-07-31T02:01:20.606Z","updated_at":"2025-10-08T18:26:54.417Z","avatar_url":"https://github.com/mkhairi.png","language":"Ruby","funding_links":[],"categories":["JavaScript","Ruby","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Materialize sass ruby gem [![Gem Version](https://badge.fury.io/rb/materialize-sass.svg)](http://badge.fury.io/rb/materialize-sass)\n\n`materialize-sass` is a Sass powered version of [Materialize](https://materializecss.github.io/materialize), a modern responsive front-end framework based on Material Design.\n\nexample: http://materialize.labs.my/ \n\nsource: https://github.com/mkhairi/materialize-rails\n\n# Notices\nThis master branch now v1.1.0-alpha\n\nDocumentation for previous releases (v0.100.*) are available [this branch.](https://github.com/mkhairi/materialize-sass/tree/v0.100)\n\n## Installation\n\nIn your Gemfile you need to add the `materialize-sass` gem:\n\n```ruby\ngem 'materialize-sass', '~\u003e 1.0.0'\n```\nor github master branch\n\n```ruby\ngem 'materialize-sass', github: 'mkhairi/materialize-sass\n```\n\n\nAnd then run the bundler and restart your server to make the files available through the pipeline:\n\n```console\n$ bundle install\n```\n\nOr install it separately:\n\n```console\n$ gem install materialize-sass\n```\n\n## Usage\n\n### a. Sass\n\nImport Materialize styles in `app/assets/stylesheets/application.scss`:\n\n```scss\n@import \"materialize\";\n```\n\n**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.\n\n```console\n$ rm app/assets/stylesheets/application.css\n```\n\n**HINT:** Override materialize color variable.\n\nSince materialize color scheme are declared in color.scss you should import the color.scss first. then you can override color variable just like this:\n\n```scss\n@import \"materialize/components/color-variables\";\n$primary-color: color(\"blue\", \"lighten-2\") !default;\n$secondary-color: color(\"yellow\", \"base\") !default;\n@import 'materialize';\n```\n\nor\n\nYou can import each component just like in this file below:\nhttps://github.com/mkhairi/materialize-sass/blob/master/assets/stylesheets/materialize.scss\n\n### b. JavaScript\n\nRequire Materialize javascripts in `app/assets/javascripts/application.js`:\n\n```js\n//= require materialize\n```\n\nor \n\nRequire materialize-sprockets to provide individual Materialize components for ease of debugging\n\n```js\n//= require materialize-sprockets\n```\n\n### c. Icons\n\nInclude this line in the portion of your HTML code\n\n```html\n  \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e \n```\n\nor import this line in your application.scss\n\n```css\n  @import \"https://fonts.googleapis.com/icon?family=Material+Icons\";\n```\n\nor install this gem for offline icons\n\n```ruby\n  gem 'material_icons' \n```\n\nsee [docs](https://github.com/Angelmmiguel/material_icons)\n\n## Contributing\nnote: Any changes or Pull Request regarding materialize assets should be made in official [materialize](https://materializecss.github.io/materialize/) repo.\n\n1. Fork it ( https://github.com/mkhairi/materialize-sass/fork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkhairi%2Fmaterialize-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkhairi%2Fmaterialize-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkhairi%2Fmaterialize-sass/lists"}