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. Both packages include the bower.json file to manage other files required.

CSS

When unfamilier with SCSS it's recommended to use this package. CSS Download file_download

SCSS

The SCSS version allows you to fully customize the way SMaterial looks. You can also change which files are included and which are not. This package also includes Gulp to compress JavaScript an SCSS. SCSS Download file_download

Bower

Do you prefer to use bower? Now you can. You can simply run the following command: bower install smaterial.

Setup

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>
		
	

The <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 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. The vendor.min.js currently only holds jQuery 3. So if you prefer to load jQuery from an external source you can use this. The vendor.min.js or jQuery file needs to be loaded before app.min.js.

Gulp usage

With Gulp you can easily compress SCSS and JavaScript files. All "tasks" needed are included in the gulpfile.js

Task Result
gulp Both SCSS and JavaScript files in js/app, js/vendor, stylesheets/scss, stylesheets/scss/components are compressed on watch
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/vendor. If you create your own JavaScript files you can add these 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.

If you add new files with bower you need to add the necessary files in the right files array. JavaScript files in vendor task and SCSS files in scss 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 <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 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.