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. Both packages include the bower.json file to manage other files required.
When unfamilier with SCSS it's recommended to use this package. CSS Download file_download
Do you prefer to use bower? Now you can. You can simply run the following command:
bower install smaterial.
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/vendor.min.js"></script> <script src="/js/app.min.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.
vendor.min.js currently only holds jQuery 3.
So if you prefer to load jQuery from an external source you can use this.
vendor.min.js or jQuery file needs to be loaded before
|gulp zip||Will zip all required files for both css and scss packages|
If you were to add other js frameworks for example hammer.js you can add the necessary file(s) in
js/app. This way all files will be compressed into minified versions.
The same goes for SCSS files. If you add your own SCSS files in
stylesheets/scss these will also be compressed for you.
This can be achieved by just running gulp task.
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 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.