Adding minification options

Author: SuperDJ

.npmignore

@@ -1,6 +1,4 @@
 docs
-!docs/dist/css/material-light.css
-!docs/dist/js/material.js
 src
 node_modules
 .*

README.md

@@ -1,15 +1,42 @@
-#Content
+# Content
 
 - About Material
 - Getting started
+- Minify files
 - Contributing
 
-#About Material
-Material is a CSS framework based on the Material Design guidelines.
+# About Material
+[Material](https://superdj.github.io/material/) is a CSS framework based on the Material Design guidelines.
 
-#Getting started
+# Getting started
 To get started all you need to do is run:
 
-	npm install smaterial
+	npm i -D smaterial
 
-This will install the required packages
+This will install the required packages.
+
+Then you can either use the minified or source files. In order to use the minified files the easiest way is to import them into the desired stylesheet or js file.
+The minified files can be found in `~smaterial/docs/dist/css/material-light.css` and `~smaterial/docs/dist/js/material.js` 
+	
+In order to use the source files for sass you can use:
+
+	@import '~smaterial/src/sass/material'
+
+and for js:
+
+	import '~smaterial/src/js/main.js'
+	
+# Minify files
+To minify the output of both SASS and JS files there are a couple of tricks you can use. Do note that you need to use the source files.
+
+## JS
+When using the source files for JS you can simply import only the required classes. 
+How you can do this is shown below, the full list of classes can be found in `src/js/main.js`
+
+## SASS
+For the SASS files there are a couple of ways to minify the output. 
+The most simple way is to comment some of the imported partials from `src/sass/material.css`.
+However it's more efficient to adjust the defined arrays.
+
+For example copy and paste the following variable into your own sass file: `$icon-settings: (18, 24, 36, 48);`.
+If you then delete `18` the class `.icon--18` will not be included in the outputted CSS file.

docs/dist/css/material-light.css

@@ -22,11 +22,13 @@
 		"css",
 		"scss",
 		"css",
+		"front-end",
 		"Google"
 	],
 	"author": "Derkjan Super",
 	"files": [
-		"docs/dist/{css,js}/*.{css,js,map}"
+		"docs/dist/",
+		"src/"
 	],
 	"devDependencies": {
 		"@babel/core": "^7.4.3",

docs/dist/css/material-light.css.map

@@ -0,0 +1,21 @@
+export default class AppBar
+{
+	constructor( appBar )
+	{
+		this.appBar = appBar;
+		this.container = document.getElementsByClassName('.container')[0];
+
+		this.setHeight();
+	}
+
+	setHeight()
+	{
+		[ 'resize', 'load', ].forEach( ( e ) =>
+		{
+			window.addEventListener( e, () =>
+			{
+				this.container.style.setProperty( '--app-bar-height', `${this.appBar.getBoundingClientRect().height}` );
+			});
+		});
+	}
+}

docs/dist/js/material-light.js

@@ -0,0 +1,38 @@
+export default class Menu
+{
+	constructor( menu )
+	{
+		this.menu = menu;
+
+		this.addMutationObserver();
+	}
+
+	addMutationObserver()
+	{
+		let observer = new MutationObserver(  mutations =>
+		{
+			mutations.forEach( ( mutation ) =>
+			{
+				if( mutation.attributeName === 'class' )
+				{
+					let attributeValue = document.getElementById( mutation.target.id ).getAttribute( mutation.attributeName );
+
+					if( attributeValue.indexOf('active') > -1 )
+					{
+						this.menu.style.maxWidth = `100vw`;
+						this.menu.style.maxHeight = `100vh`;
+					}
+					else
+					{
+						this.menu.style.maxWidth = 0;
+						this.menu.style.maxHeight = 0;
+					}
+				}
+			});
+		});
+
+		observer.observe( this.menu, {
+			attributes: true,
+		});
+	}
+}

docs/dist/js/material-light.js.map

@@ -1,19 +1,27 @@
-import Autocomplete from'js/classes/autocomplete';
-import Badge from'js/classes/badge';
-import Banner from'js/classes/banner';
-import Button from'js/classes/button';
-import DataTable from'js/classes/data-table';
-import Dialog from'js/classes/dialog';
-import Divider from'js/classes/divider';
-import Drawer from'js/classes/drawer';
-
-import Progress from'js/classes/progress';
-import SelectField from'js/classes/select-field';
-import{ Switch, Checkbox, Radio } from'js/classes/selection';
-import Slider from'js/classes/slider';
-import TabBar from'js/classes/tab';
-import TextField from'js/classes/text-field';
-import Tooltip from'js/classes/tooltip';
+import AppBar from'js/classes/AppBar';
+import Autocomplete from'js/classes/Autocomplete';
+import Badge from'js/classes/Badge';
+import Banner from'js/classes/Banner';
+import Button from'js/classes/Button';
+import DataTable from'js/classes/DataTable';
+import Dialog from'js/classes/Dialog';
+import Divider from'js/classes/Divider';
+import Drawer from'js/classes/Drawer';
+import Menu from'js/classes/Menu';
+import Progress from'js/classes/Progress';
+import SelectField from'js/classes/SelectField';
+import{ Switch, Checkbox, Radio } from'js/classes/Selection';
+import Slider from'js/classes/Slider';
+import TabBar from'js/classes/Tab';
+import TextField from'js/classes/TextField';
+import Tooltip from'js/classes/Tooltip';
+
+const appBars = document.getElementsByClassName('app-bar');
+
+for( let appBar of appBars )
+{
+	new AppBar( appBar );
+}
 
 const autocompletes = document.getElementsByClassName('text-field--autocomplete');
 
@@ -71,6 +79,13 @@ for( let drawer of drawers )
 	new Drawer( drawer );
 }
 
+const menus = document.getElementsByClassName( 'menu' );
+
+for( let menu of menus )
+{
+	new Menu( menu );
+}
+
 const progressBars = document.getElementsByClassName( 'progress' );
 
 for( let progressBar of progressBars )