Getting started

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.


When unfamilier with SCSS it's recommended to use the default package. file_download Download CSS file_download Download JS


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>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="/stylesheets/smaterial.css">


    <script src="/js/smaterial.js"></script>

The <link rel="stylesheet" href=""> is used to load the Material Design font icons. The line <meta name="viewport" content="width=device-width, initial-scale=1"> makes the website responsive.

Webpack usage

With Webpack you can easily compress SCSS and JavaScript files. All "commands" needed are included in the package.js. 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 webpack.config.js file.

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 <head> tag. 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. This means that there is a dedicated stylesheet, but everything that relies on JavaScript doesn't work. 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.