Last modified: Mon Aug 28 2017 22:56:53 GMT+0800 (Malay Peninsula Standard Time)

Chapter 2. Materialize Framework

Materialize is a front-end framework based on Material Design. It is new and lack of well written documentation. If you are not familiar with Web development, I would recommend you to use Bootstrap Framework instead of Materialize Framework. This is because Bootstrap has a lot of great and well written documentation while Material Design is still in Beta stage.

I created a starter template that is based on Materialize Framework and can be downloaded from my Github repository. The minimum Ruby version that is required to use the template is Ruby 2.4.1.

2.1 Install Materialize Gem

Before we are able to install the Gem, we have to read the documentation that the Gem provide. The document will include important information on how to install, configure and use the Gem in our application. Head to Materialize’s Github page and scroll down to the read me section. Figure 2.1.1 shows Materialize’s readme section in Github page.

Figure 2.1.1: Readme file in Bootstrap’s Github Page

By following the instruction provided in the Github Page, the first step is to add the following lines of code to your Gemfile and save it. I recommended adding the Gem at the top of the Gemfile instead of at the bottom. Figure 2.1.2 shows the operation of adding the code the respective file as shown in Table 2.1.1.

Do note that your Web Server should not be running while you are trying to add or remove a Gemfile. Secondly, the arrangement of Gems matter! You have to prioritize (arrange) them based on how you use it.

Table 2.1.1: Code to add to Gemfile

#MyApp/Gemfile

gem ‘materialize-sass’

Figure 2.1.2: Code added to the top of the Gemfile

Whenever we add a Gem to our Gemfile, we have to run the command bundle install. In the terminal, type in the following code below to install the Gem listed in your Gemfile.

bundle install

If you wished to update all the Gem to your Gemfile to the latest version, use the command bundle update. It may be necessary to update the Gem if you see your terminal shows that your Gem is outdated.

2.2 Use Materialize Gem

Now, we will try to import the Materialize files. The operations carried out below are based on the Materialize’s readme file. Add the code as stated in Table 2.2.1 to the respective file. If you are unable to find application.scss file, rename application.css to the respective extension required. Do not remove any of the code in green. Figure 2.2.1 shows the result of the operation stated in Table 2.2.1.

Table 2.2.1: Import Bootstrap Library

#MyApp/assets/stylesheets/application.scss

@import "materialize";

Figure 2.2.1: Result of the operation stated in Table 2.2.1

The next step would be adding three lines of code into the javascript file. Add the following code into the specified file below. You should not add three lines of code in Table 2.2.2 to the Javascript file as one of them already exists. Figure 2.2.2 shows the operation after justifying which code from Table 2.2.2 to add.

Table 2.2.2: Import Materialize JS Library

#MyApp/assets/javascripts/application.js

//= require jquery  
//= require turbolinks  
//= require materialize-sprockets

Figure 2.2.2: Result of Javascript file

2.3 Add noUiSlider

noUiSlider is an extra feature that come with Materialize Gem. You may choose to install and import the extra feature if you wish to. Add the code as stated in Table 2.3.1 and Table 2.3.2 to the respective file.

Table 2.3.1: Import Bootstrap Library

#MyApp/assets/stylesheets/application.scss

@import "materialize/extras/nouislider";

Figure 2.3.1: Result of the operation stated in Table 2.3.1

The next step would be adding one lines of code into the javascript file. Add the following code into the specified file in Table 2.3.1. Figure 2.3.2 shows the operation after justifying which code from Table 2.3.2 to add.

Table 2.3.2: Import noUiSlider Library

#MyApp/assets/javascripts/application.js

//= require materialize/extras/nouislider

Figure 2.3.2: Result of Javascript file

2.4 Add Material Icon

To use Material Design Icon, there are three ways of importing it to our application. Choose any option that you think it work best for you.

The first way is to include the stylesheet in our application’s head. This can be achieved by adding the code in Table 2.4.1 to your <head> portion in application.html.erb.

Table 2.4.1: Import Material Icon using HTML code

#MyApp/views/layouts/application.html.erb

<link href="https://fonts.googleapis.com/icon?family=Material\Icons" rel="stylesheet">

The second way is to import the library stated below is to application.scss. Follow the instruction in Table 2.4.2 to add the required code.

Table 2.4.2: Import Material Icon to SCSS file

#MyApp/assets/stylesheets/application.scss

@import "https://fonts.googleapis.com/icon?family=Material\Icons";

Do note that the first two options require Internet access to import the code. However, the third way is able to can be used when you are developing offline. To install for offline access, add the code to the file stated in Table 2.4.3 and Table 2.4.4.

Table 2.4.3: add material_icons Gem to Gemfile

#MyApp/Gemfile

gem 'material_icons'

Figure 2.4.1 shows the code in Table 2.4.4 added to Line 15.

Table 2.4.4 Import material_icons library to stylesheet

#MyApp/assets/stylesheets/application.scss

*= require material_icons

Figure 2.4.1: Result of the operation stated in Table 2.4.4

Navigation bar in the Website allows us to navigate from page to page easily. To begin adding a Materialize header to our application, head to Materialize Website and copy the any of the Navigation Bar example. As a side note, Materialize is using HTML5 Section Elements. You have to place each of the tags, <body>, <main>, <nav>, <footer> correctly in order to get it to work. You may need to look up more reference before start to implementing Materialize.

The arrangement of HTML5 Section Elements is as follow (refer to Figure 2.5.1):

<body>

    <nav>
        ...
    </nav>

    <main>
        <%= yield %>
    </main>

    <footer>
        ...
    </footer>

</body>

Figure 2.5.1 shows a Navigation Bar code is added to my MyApp/views/layouts/application.html.erb along with correctly formatted code using HTML5 Section Elements.

Figure 2.5.1: Result of the code after a Navigation Bar is added

Reload your website and you should see something similar to the Figure 2.5.2. However, some of the examples in the Materialize Website requires Javascript code. In that case, you have to add the Javascript/JQuery code to the <main> element section.

Figure 2.5.2: Result of Web Page after a Navigation Bar is added

To add footer, visit Materialize’s website and add the code after the <main> tag section. Figure 2.5.3 shows the code where footer code should goes to. Replace the footer section with the footer code you found in the website.

Figure 2.5.3: Location where footer should be added

Figure 2.5.4 shows a website with Materialize Header and Footer. Your final result may be different depending on the header and footer that you are using.

Figure 2.5.4: A sample Rails website with Materialize Header and Footer

As we can see from Figure 2.5.3, our code starts to look long and messy. To solve this, we can use Ruby on Rails’ ActionView partial. Create a partial, shown in Figure 2.5.5, for header by creating a file name _header.html.erb at the same directory where application.html.erb is in. Move the Navigation Bar’s code, as shown in Figure 2.5.5 to _header.html.erb and replace the code you moved away with <%= render '/layouts/header' %> as shown in Figure 2.5.6. Reload your current webpage and you should still get the same layout as before.

You do not have to include an extension or path for your partial. However, in this case, we have to include the layout directory in order for the application to find the partial file. In general, we do not have to include the directory if the partial is created within the folder of your view (e.g. Posts).

Figure 2.5.5: Code moved into partial

Figure 2.5.6: Code replaced by partial

Repeat the same process for moving your creating a partial for your footer (if you have one). The final result of your application.html.erb may look similar to Figure 2.5.7.


Figure 2.5.7: Final result of application.html.erb with partial

2.6 Containers

Based on Figure 2.6.4, we see that we have a quite terrible webpage as everything sticks to the leftmost part of the browser. This is due to the missing configuration in the layout. To fix this, we have to use a container. Container is an element that wrap site contents into Materialize grid system. In a simpler word, container contains some code that will automatically set the padding and margin of our page based on the screen width.

According to Materialize Website, to implement the container, we have to wrap our container around our content within the <main> element section. The code for the container is attached below.

<main>  
    <div class=”container">  
        ...  
    <div>  
</main>

Add the code above to the Ruby on Rails application layout as shown in Table 1.3.1. Figure 1.3.1 shows the code after the operation is carried out. Do note that the in Table 1.3.1 should goes between the <body> … </body>.

Table 2.6.1: Add container to our application

#MyApp/views/layouts/application.html.erb

<div class=”container">  
   ...   
<div>

Figure 2.6.1: Add container to our application

Now, reload your webpage and you will see that the page is a responsive to the width of your browser window. Adjust the width of your browser will notice that the content is scaled dynamically. Figure 2.6.2 shows the result of Web Page after a container is added.


Figure 2.6.2: Result of Web Page after a container is added

results matching ""

    No results matching ""