Skip to content

Instantly share code, notes, and snippets.

@eprothro

eprothro/index.html.haml

Last active Dec 12, 2019
Embed
What would you like to do?
snippets from Materialize starter template from https://materializecss.com/getting-started.html
!!!
%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"}
(function($){
$(function(){
$('.sidenav').sidenav();
}); // end of document ready
})(jQuery); // end of jQuery name space
/* 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.