Web Development

MaterializeCSS in CodeIgniter

Material Design is a design language or design convention for modern applications and websites.

Developed by Google in 2014 and designed by Matias Duarte, the technology or shall we say “art”
became a norm and a trend amongst software designers and developers. The Material Design
(codenamed Quantum Paper) makes use of realistic paper art design with lighting, shadow, depth and
siplicity in a digital form. It boasts physical surfaces and shadows that explicitly gives the viewers
perception of what they can touch.

CSS Frameworks are pre-prepared website components styling that is used to create web design with
standards-compliant features that is built on Cascading Style Sheets(CSS). They help the rapid building of
well-structured web page. It offers grid based-layouts, page responsiveness, animation and transitions,
pre-designed html elements and javascript widgets or plugins. The most popular CSS Frameworks are
Bootstrap and Foundation.

Every CSS Framework has each unique style and some of them offer Material Design.
Examples of Material Design Implementations:
• Polymer Project
• Angular Material
• MaterializeCSS
• Material-UI
• Material Design Lite

In this time of writing, MaterializeCSS rakes more components that its competitors at the unofficial
comparison on Wikipedia. In this chapter, we will study how to use and implement the MaterializeCSS.

MaterializeCSS was created by a team of students from Carnegie Mellon University and all pursuing
Information Systems major with a minor in Human Computer Interaction. They were: Alvin Wang, Alan
Chang, Alex Mark, and Kevin Louie.

Module 15 – MaterializeCSS in CI 1
Web Development

Download

You can download MaterializeCSS at www.materializecss.com

The downloaded zip file contains the folders: css, fonts, and js
|--css/
| |--materialize.css
| |--materialize.min.css
|
|--fonts/
| |--roboto/ (includes roboto fonts)
|
|--js/
| |--materialize.js
| |--materialize.min.js

Module 15 – MaterializeCSS in CI 2
Web Development

MaterializeCSS implementation on CodeIgniter

On a fresh installation of CodeIgniter, create an assets folder on the root project

directory

Then, place the downloaded MaterializeCSS folders inside.

Create the Materialize_Activity controller at application/controllers/materialize_activity.php

We need separate the header, the footer and the content view so that every additional controller
methods use a single header and footer file. In case that there will be changes on pages’ header or
footer, only a single file will be edited.

Module 15 – MaterializeCSS in CI 3
Web Development

Let’s create the materializecss_header view at application/views/materializecss_header.php

According to MaterializeCSS’ documentation, we should include the Google Material Icon font for our
fontsusing its CDN and the materializecss’ css file. We have used url helper’s base_url() function so make
sure it is autoloaded and the base_url config is properly configured.

And also the materializecss_footer view at application/views/materializecss_footer.php

On the footer, we have included the materializecss’ js file to be able to utilize object elements and
events. It uses the jQuery library functions therefore we must include the jQuery CDN just before the
materialize script.

To test it out if it is successfully applied , we can place in a view that will act as the content. We can
check whether the loaded MaterializeCSS files affects this content. Create the materializecss_index view
at application/views/ materializecss_index.php

The Output:

Module 15 – MaterializeCSS in CI 4
Web Development

The MaterializeCSS Installation will be successful if it exactly shows just like the figure above.

Module 15 – MaterializeCSS in CI 5