Google’s Material Design is aimed to work well on the Web and also on mobile apps. It’s gaining popularity with developers and if you want to adopt it too, there are many ways to implement Material Design on your site. You can use Polymer or Angular, or you can use Materialize.
Materialize is a CSS framework based on Material Design principles with Sass support for better development. It carries default styling for easy use, and has detailed documentation.
You can find a lot of useful components within: dialog, modal, date picker, material buttons, parallax, cards and more. It also has many navigation options you can choose from, such as drop down, slide in menu and tabs. Materialize also uses a 12-grid system with 3 default screen size media queries: a max width of 600px is a mobile device, 992px tablet device and anymore than 992px is considered a desktop device.
Recommended Reading: What’s In Foundation 4 Responsive Framework
Getting Started
There are two ways to get started with Materialize: use standard CSS or Sass. Both sources can be downloaded here. You can also get them with bower using the following command:
bower install materialize
After you get the sources, make sure to properly link them on your project file or compile the source if you are using the Sass version.
Read Also: How To Install, Update & Remove Web Libraries Easily With Bower
Features
In this section, I will explain some features that Materialize offers.
1. Sass Mixins
This framework carries Sass Mixins which automatically adds all browser prefixes when you write certain CSS properties. It’s a great feature to have to ensure compatibility across all browsers, with as little fuss, and code, as possible.
Take a look at the following animation properties:
-webkit-animation: 0.5s;
-moz-animation: 0.5s;
-o-animation: 0.5s;
-ms-animation: 0.5s;
animation: 0.5s;
Those lines of code can be rewritten with a single line of Sass mixin like so:
@include animation(.5s);
There are about 19 main mixins available. To see the full list, head over to the Sass category in the MIXINS tab.
2. Flow Text
While other frontend frameworks use fixed text, Materialize implements truly responsive text. Text size and line height are also scaled responsively to maintain readability. When it comes to smaller screens, the line height is scaled larger.
To use Flow Text, you can simply add the flow-text class on your desired text. For instance:
<p class="flow-text">This is Flow Text.</p>
Checkout the demo here on the Flow Text section.
3. Ripple effect with Waves
Material Design also comes with interactive feedback, one notable example is the ripple effect. In Materialize, this effect is called Waves. Basically when users click or tap/touch a button, card or any other element, the effect appears. Waves can be easily created by adding waves-effect class onto your elements.
This snippet gives you the waves effect.
<a href="#" class="btn waves-effect">Submit</a>
The ripples are grey by default. But in a situation where you have a dark color background, you may want to change the color. To add a different color, just add waves-(color) to the element. Replace the "(color)" with a name of a color.
<a href="#" class="btn waves-effect waves-light">Submit</a>
You can choose from 7 colors: light, red, yellow, orange, purple, green and teal. You can always create or customize your own colors if those colors don’t fit your needs.
4. Shadow
To deliver relationships between elements, Material Design recommend using elevation on the surfaces. Materialize delivers on this principle with its z-depth-(number) class. You can determine the shadow depth by changing the (number) from 1 to 5:
<div class="card">
<p>Shadow depth 3</p>
<p class="z-depth-3"></p>
</div>
All shadow depths are demonstrate with the image below.
5. Buttons and Icons
In Material Design there are three main button types: raised button, fab (floating action button) and flat button.
(1) Raised button
The raised button is the default button. To create this button, just add a btn class to your elements. If you want to give it the wave effect when clicked or pressed, go with this:
<a href="#" class="btn waves-effect waves-light">Button</a>
Alternatively, you can also give the button an icon to the left or the right of the text. For the icon, you will need to add custom <i> tag with the icon class name and position. For instance:
<a href="#" class="btn waves-effect waves-light"><i class="mdi-file-file-download left"></i>Download</a>
In the above snippet we use mdi-file-file-download class for the download icon. There are about 740 different icons you can use. To see them head over to the Sass page in the Icons tab.
(2) Floating Button
A floating button can be created by appending btn-floating class and your desired icon. For instance:
<a href="#" class="btn-floating waves-effect waves-light"><i class="mdi-content-send"></i></a>
In Material Design, the flat button is often used within the dialog box. To create it, just add btn-flat to your element like so:
<a href="#" class="btn-flat waves-effect waves-red">Decline</a>
Additionally, buttons can be disabled with the disabled class and made larger using btn-large class.
6. Grid
Materialize uses a standard 12-column responsive grid system. The responsiveness is divided into three parts: small (s) for mobile, medium (m) for tablet and large (l) for desktop.
To create columns, use s, m or l to indicate the size, followed by the grid number. For example, when you want to create a half sized layout for mobile device then you should include an s6 class into your layout. s6 stands for small-6 which means 6 column on small device.
You must also include a col class in the layout you create and put it inside an element which has the row class. This is so the layout could be put into columns properly. Here’s an example:
<div class="row">
<div class="col s12">I have 12-columns or full width here</div>
<div class="col s4">4-columns (one-third) here</div>
<div class="col s4">4-columns (one-third) here</div>
<div class="col s4">4-columns (one-third) here</div>
</div>
Here’s the results:
By default, col s12 is fixed-size and optimized for all screen size, basically the same as col s12 m12 l12. But if you want to specify the size fo the columns for different devices. All you need to do is to list the additional sizes like so:
<div class="row">
<div class="col s12">My width always has 12 columns everywhere</div>
<div class="col s12 m6 l9">I have 12 columns on mobile, 6 on tablet and 9 on desktop</div>
</div>
Here’s what this looks like:
Those are just a few features of Materialize. To learn more about their other features, head over to the documentation page.
Materialize – A Material Design CSS Framework
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.