https://github.com/dominikangerer/materialwebapptemplate

A Material WebApp Template - simple to modify and with less javascript.
https://github.com/dominikangerer/materialwebapptemplate

Last synced: about 2 months ago
JSON representation

A Material WebApp Template - simple to modify and with less javascript.

• Host: GitHub
• URL: https://github.com/dominikangerer/materialwebapptemplate
• Owner: DominikAngerer
• Created: 2014-11-17T23:12:24.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2014-11-20T16:42:57.000Z (about 10 years ago)
• Last Synced: 2024-04-15T00:06:33.035Z (8 months ago)
• Language: JavaScript
• Size: 184 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Material WebApp Template

## About

The main reason why I'm doing this is to have a look at the Android material guidelines and get them into the world of web with a simple and easy to customize markup and style.

## Template in action:

![Closed Orange Template](http://adtime.at/projects/github/mwat-closed-sidebar-small.png)

![Open Green Template](http://adtime.at/projects/github/mwat-open-sidebar-green.png)

![Open Green Desktop Template](http://adtime.at/projects/github/mwat-desktop.png)

Also have a look at [this running example].

## What is material design [@google]

> We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

## Customization

I'm using a lot of `SCSS` variables so you can simply customize this web app template and make it to your own. Center the main-headline or disable shadows, setting new background colors and primary colors simply changing the `variables.scss`.

    $left-nav-bg:#f9f9f9;			        // left nav default background color

    $left-nav-element-bg:#f9f9f9;		    // left nav background color of s

    $left-nav-element-bg-hover:#ECECEC;     // left nav background hover color of s

    $left-nav-font-color:#000;			    // left nav font color

    $left-nav-seperator-color:#e5e5e5;	    // left nav seperator color between elements ('s)

    $left-nav-allow-scroll:true !default;   // left nav allow scroll-y

    

    $main-header-bg:#E67E22;				// main header background color

    $main-header-font-color:#ffffff;		// main header font color

    $main-header-text-align:center;		    // main header text align (supported: left & center)

    

    $shadows:true !default;					// enables 'materials' shadow design


## Installation

After checkout, execute the following steps `npm install` & `bower install` to install third party libraries and development environment.

## Development environment

Run `grunt server` to boot up a local server

## Thanks to:

[@ddprrt] for the [Netural Generator]

[@google]:http://www.google.com/design/spec/material-design/introduction.html

[@ddprrt]:https://github.com/ddprrt

[Netural Generator]:https://github.com/ddprrt/generator-netural

[this running example]:http://adtime.at/projects/github/material-webapp-template/