Smaterial comes in 2 different packages you can choose from. You can make a choice depending on your skill levels and what you would like to do with SMaterial.
If you would like to use SCSS I recommend to go to Github and clone/ download the project from there.
You can get SMaterial up and running in a couple of different ways.
After you have downloaded one of the above packages or used one of the other options you can get started.
Of course you can use the code shown here.
You can also use the
index.php file and files included in the
includes folder provided in the packages.
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="/stylesheets/smaterial.css"> </head> <body> <script src="/js/smaterial.js"></script> </body> </html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
is used to load the Material Design font icons.
<meta name="viewport" content="width=device-width, initial-scale=1"> makes the website responsive.
All "commands" needed are included in the
The available commands are:
dev, development, prod and production.
The difference between the commands for development and production is the file output.
For production all files are being minimized in contrast to development where all files are outputted as is.
In order to use Webpack you still need to change the entries in the
Other useful HTML
If you would like to complete the look of your website you can add some additional HTML to it.
To color the browsers address bar use the code shown on the side in the
If you leave the
<meta content> attribute empty it will be automatically set to the color of the appbar.
Otherwise it will leave the
<meta content> as is.
<meta name="theme-color" content="#2196F3"> <meta name="msapplication-navbutton-color" content="#2196F3"> <meta name="apple-mobile-web-app-status-bar-style" content="#2196F3">
Accelerated Mobile Pages (AMP)
SMaterial also supports AMP. The support of AMP still very limited as it is still in development.
The AMP stylesheet removes all the media queries that are larger than mobile. The stylesheet also has less components on by default.
This means that the stylesheet is about 1/3 the size. It also means that if one of the components isn't working it might be turned off.
If you're using SCSS you can easily change the components.
If you don't want to use AMP but you're only developing for mobile this stylesheet might help you a lot as well.
You can also trigger the AMP behaviour on your own by setting the
$amp variable to
false in your own stylesheet.