Last modified: Mon Aug 28 2017 22:56:53 GMT+0800 (Malay Peninsula Standard Time)
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.
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
#MyApp/Gemfile gem ‘materialize-sass’
Figure 2.1.2: Code added to the top of the
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
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.
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
Table 2.2.2: Import Materialize JS Library
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
Table 2.3.2: Import
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,
<footer> correctly in order to get it to work. You may need to look up more reference before start to implementing
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
<main> element section.
Figure 2.5.2: Result of Web Page after a Navigation Bar is added
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
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
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.
Figure 2.5.5: Code moved into
Figure 2.5.6: Code replaced by
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
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