CSS
First of all you need to download the CSS and JS files required.
You can find the required CSS and JS files in here.
Or you can use them like the following:
<link rel="stylesheet" href="//superdj.github.io/material/dist/css/material-light.css">
<script src="//superdj.github.io/material/dist/js/material.js"></script>
It is then recommended to load the JS file at the end of the body. This way the JS won't stop the loading of the HTML.
In order to make your website responsive and for media queries to function
you need to add the following line in the <head> as well:
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
The user-scalable=no is optional. This will prevent users from zooming on your website.
The zoom setting is only affected on smartdevices.
If you would like to use the Roboto font all you need to do is add the following line in the <head>:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=fallback" rel="stylesheet">
.
This line should come before the loading of the material stylesheet.
It is also possible to use the Material Design icon font.
For that all you need to do is add the following line in the <head>:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=fallback" rel="stylesheet">
.
This line should also come before the material stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=fallback" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=fallback" rel="stylesheet">
<link rel="stylesheet" href="./material-light.css">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
</head>
<body>
<!-- Content -->
<script src="./material.js"></script>
</body>
</html>
SASS
If you want to use SASS you can start in two ways.
You can just download/ clone the project from GitHub.
Or you use the NPM package by using: npm i -D smaterial.
If you chose to download all you need to do is delete the irrelevant files and folders except:
/src, license, package.json and . prefixed files.
To compile the SCSS and JS files you first need to run the command:
npm install.
This command will install all relevant packages.
For development you can then use the command:
npm run dev.
This will command will output debuggable code.
For production you can use the command
npm run prod.
This command will compress both SCSS and JS files.
@import '~smaterial/src/sass/material'.
To import the JS file you can choose to only import the required classes or import the main file.
To import the main file use the following: import '~smaterial/src/js/main'
Settings
settings.scss file.
This file can be found in: src/sass/foundation/_settings.scss.
The variables are also listed on the related documentation pages.
| Variable | Result |
|---|---|
| $color-settings | If the (colors, variables) are included and which specific colors (red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey) |
| $component-settings | Which components (app-bar, badge, banner, bottom-nav, bottom-sheet, button, card, chip, data-table, dialog, divider, drawer, fab, list, menu, notification, progress, selection, slider, snackbar, tab, text-field, tooltip) should be included |
| $app-bar-settings | Which elements (title, actions, fixed) should be included |
| $banner-settings | Which elements (single, multi, image) should be included |
| $bottom-sheet-settings | Which elements (list, grid) should be included |
| $button-settings | Which elements (contained, text, outlined, fluid) should be included |
| $chip-settings | Which elements (outlined, thumbnail, remove) should be included |
| $data-table-settings | Which elements (numeric, hover) should be included |
| $dialog-settings | Which element (simple, alert, confirm, full-screen, scroll) should be included |
| $divider-settings | If the vertical element should be included |
| $drawer-settings | Which elements (header, modal, full-height, fixed, clipped) should be included |
| $fab-settings | Which elements (mini, extended) should be included |
| $list-settings | Which elements (single, two, three) should be included |
| $progress-settings | Which elements (determinate, indeterminate, circle) should be included |
| $selection-settings | Which element (checkbox, switch, radio) should be included |
| $snackbar-settings | If the two element should be included |
| $tab-settings | Which elements (text, icon, icon-text, scroll) should be included |
| $text-field-settings | Which elements (filled, outlined, helper, select) should be included |
| $foundation-settings | Which components (icons, shadows, shapes, typography) should be included |
| $normalize-settings | If the scrollbar should be included |
| $icon-settings | Which elements (18, 24, 36, 48) should be included |
| $typography-settings | Which elements (h1, h2, h3, h4, h5, h6, subtitle-1, subtitle-2, body-1, body-2, button, caption, overline, left, right, center) should be included |
| $shadow-settings | Which elements (1, 2, 3, 4, 6, 8, 9, 12, 16, 24) should be included |
| $shape-settings | Which elements (square, circle, diamond, triangle, hexagon, heptagon, octagon, bevel) should be included |
| $grid-settings | If the fluid element should be included |
| $helper-settings | Which components (cursor, padding, margin, aspect-ratio, flex) should be included |
| $cursor-settings | Which elements (alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, wait, zoom-in, zoom-out) should be included |