Skip to content

Instantly share code, notes, and snippets.

@chand
Last active August 26, 2017 15:27
Show Gist options
  • Save chand/57b8ecc676dc748e0bd0f4b487b5d44d to your computer and use it in GitHub Desktop.
Save chand/57b8ecc676dc748e0bd0f4b487b5d44d to your computer and use it in GitHub Desktop.
Materialize Set up - Ruby on Rails and HTML

Materialize Setup for HTML

After downloading, extract the files into the directory where your website is located. Your directory should look something like this:

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

Add Code to index.html page:

<!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"/>
    </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>

Materialize Setup for Ruby on Rails

In your Gemile, add:

gem 'materialize-sass'
gem 'sass-rails', '~> 5.0'

In console

bundle install

Import Materialize styles in

app/assets/stylesheets/application.scss:

  @import "materialize";

Require Materialize javascripts in:

app/assets/javascripts/application.js:

  //= require jquery
  //= require materialize-sprockets

Add to:

application.html.erb

  <%= stylesheet_link_tag 'https://fonts.googleapis.com/icon?family=Material+Icons' %>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Source

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment