snippets from Materialize starter template from https://materializecss.com/getting-started.html

index.html.haml

!!!
%html{lang: "en"}
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{content: "width=device-width, initial-scale=1, maximum-scale=1.0", name: "viewport"}/
    %title Starter Template - Materialize
    / CSS
    %link{href: "https://fonts.googleapis.com/icon?family=Material+Icons", rel: "stylesheet"}/
    %link{href: "css/materialize.css", media: "screen,projection", rel: "stylesheet", type: "text/css"}/
    %link{href: "css/style.css", media: "screen,projection", rel: "stylesheet", type: "text/css"}/
  %body
    %nav.light-blue.lighten-1{role: "navigation"}
      .nav-wrapper.container
        %a#logo-container.brand-logo{href: "#"} Logo
        %ul.right.hide-on-med-and-down
          %li
            %a{href: "#"} Navbar Link
        %ul#nav-mobile.sidenav
          %li
            %a{href: "#"} Navbar Link
        %a.sidenav-trigger{"data-target" => "nav-mobile", href: "#"}
          %i.material-icons menu
    #index-banner.section.no-pad-bot
      .container
        %br/
        %br/
        %h1.header.center.orange-text Starter Template
        .row.center
          %h5.header.col.s12.light A modern responsive front-end framework based on Material Design
        .row.center
          %a#download-button.btn-large.waves-effect.waves-light.orange{href: "http://materializecss.com/getting-started.html"} Get Started
        %br/
        %br/
    .container
      .section
        / Icon Section
        .row
          .col.s12.m4
            .icon-block
              %h2.center.light-blue-text
                %i.material-icons flash_on
              %h5.center Speeds up development
              %p.light We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
          .col.s12.m4
            .icon-block
              %h2.center.light-blue-text
                %i.material-icons group
              %h5.center User Experience Focused
              %p.light By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
          .col.s12.m4
            .icon-block
              %h2.center.light-blue-text
                %i.material-icons settings
              %h5.center Easy to work with
              %p.light We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
      %br/
      %br/
    %footer.page-footer.orange
      .container
        .row
          .col.l6.s12
            %h5.white-text Company Bio
            %p.grey-text.text-lighten-4 We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.
          .col.l3.s12
            %h5.white-text Settings
            %ul
              %li
                %a.white-text{href: "#!"} Link 1
              %li
                %a.white-text{href: "#!"} Link 2
              %li
                %a.white-text{href: "#!"} Link 3
              %li
                %a.white-text{href: "#!"} Link 4
          .col.l3.s12
            %h5.white-text Connect
            %ul
              %li
                %a.white-text{href: "#!"} Link 1
              %li
                %a.white-text{href: "#!"} Link 2
              %li
                %a.white-text{href: "#!"} Link 3
              %li
                %a.white-text{href: "#!"} Link 4
      .footer-copyright
        .container
          Made by
          %a.orange-text.text-lighten-3{href: "http://materializecss.com"} Materialize
    / Scripts
    %script{src: "https://code.jquery.com/jquery-2.1.1.min.js"}
    %script{src: "js/materialize.js"}
    %script{src: "js/init.js"}

init.js

(function($){
  $(function(){

    $('.sidenav').sidenav();

  }); // end of document ready
})(jQuery); // end of jQuery name space

style.scss

/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
	padding: 0 15px;
	.material-icons {
		font-size: inherit;
	}
}