« Back to home

Adding styling to my application

My last post described how I setup Angular 2 on the client-side of my Project. I was a bit surprised how long that post turned out. That’s why I decided to write about how I added styling to my application in another post. This post is just about the research which I did to chose a visual style for my application and about my final choice. I think about the posts in the “Daj się poznać” series as diary for what I have done in my contest project, and that’s I’m writing this post.

I really had a dilemma about which CSS framework to choose for my application but among many unknowns I had one certain thing - I wanted to have Material Design in my application. Learning Material Design was on my to-do list for a very long time, so I’m killing two birds with one stone.

There are a lot of libraries and CSS frameworks that give you ready-to-use material design components. I wanted to use one of them but it wasn’t an easy task to choose one. I only going mention a few which interested me the most.

I am qutie good at Angular 1.x and for this framework there is already a well-tested implementation of Material Design. You can look at it on this page. This framework would be an obvious choice if I used Angular 1.x on the client-side part of my application. This framework has everything that I need. For Angular 2, the choice wasn’t so obvious.

There is already an official Material Design for Angular 2 but at the moment this post was written, it is currently in the early alpha stage and includes only 6 components. I have gotten used to using Bleeding Edge stuff in my project but this Edge is too sharp for me. I wanted something more stable and reliable.

Nature abhors a vacuum especially in the JS/CSS world, so if there is a lack of something it will appear quickly. I wouldn’t have searched for too long to find an alternative implementation. On this page I found an implementation of Material Design components for Angular 2. This implementation has everything that I need but my gut told me: “you shouldn’t use this”. I believe never to argue with my gut feeling. Maybe it’s a bit too heavy, maybe it is too young. I don’t know but my gut probably knows better.

Another material design framework which I was willing to use was Materialize. This framework is quite mature and has a lot components. Far much more than I need. It has even Angular 2 support. But this support seems to me to be a bit immature.

Bootstrap has also its own Material Design versions but I am quite familiar with Bootstrap and I wanted to learn something new that’s why I did not consider it.

While researching, I looked at the Pluralsight course Angular 2: First Look by John Papa. He’s a great authority for me in all things client-side. I found out in this course how he added Material Design to his application. He used a library called Material Design Lite(MDL). This library doesn’t rely on any JavaScript frameworks so I can use it in Angular 2 without almost any trouble. But using this library has some drawbacks. I will have to implement Angular 2 reusable components that will wrap MDL components. I am okay with this because I want to learn a lot during the contest and this is a perfect occasion to find out something more about Angular 2. I’ll describe what I mean by creating wrappers around MDL components in my next post.

Enough words let’s get to practice.

To add MDL to my application, I issued npm install material-design-lite --save in my terminal. After a while, I had downloaded MDL to my node_modules folder and it was also saved in my package.json file. Now I must copy the needed files to the wwwroot as I did with the Angular 2 files. MDL requires two files. I added them to my config in gulpfile.js so after it looked like this:

var config = {
   libBase: 'node_modules',
   lib: [
       require.resolve('es6-shim/es6-shim.min.js'),
       require.resolve('es6-shim/es6-shim.map'),
       require.resolve('systemjs/dist/system-polyfills.js'),
       require.resolve('systemjs/dist/system-polyfills.js.map'),
       require.resolve('angular2/es6/dev/src/testing/shims_for_IE.js'),
       require.resolve('systemjs/dist/system.src.js'),
       require.resolve('angular2/bundles/angular2-polyfills.js'),
       require.resolve('rxjs/bundles/Rx.js'),
       require.resolve('angular2/bundles/angular2.dev.js'),
       require.resolve('angular2/bundles/router.dev.js'),
       require.resolve('angular2/bundles/http.dev.js'),
       require.resolve('material-design-lite/dist/material.blue-teal.min.css'),
       require.resolve('material-design-lite/material.min.js')
   ]
};

I chose the color template blue-teal but there are a lot of other options. You can even customize the color set by yourself on the MDL page. To copy these files to wwwroot/lib I executed gulp build-dev in the terminal. Then I added links to these files in _Layou.cshtml so the head part of this file look like this:

   <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Notifier</title>
        <base href="/" />
        
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="lib/material-design-lite/dist/material.blue-teal.min.css">
        <script src="lib/material-design-lite/material.min.js"></script>
    </head>

As you can see MDL also requires fonts which are included from googleapis.

To see if my import succeeded, I changed my app.component.ts so it looked like this:

import {Component} from 'angular2/core';
@Component({
   selector: 'notifier',
   template: `<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
       <header class="mdl-layout__header"><h1>{{title}}</h1></header>
   </div>`
})
export class AppComponent {
   title = "Notifier!!!";
}

And after recompilation of .ts files (npm run tsc), this is what I got:

Final result

You may not see it in this post but I spent a lot of time doing research on what CSS framework or library to choose. Finally, I will stick with Material Design Lite but I am not 100% sure about my decision. I’ll be watching what’s going on in the Angular 2 world and if something more attractive appears, maybe I’ll change my decision. I hope that it won’t be too late. Maybe someone will read this post and suggest a better choice to me. Anyway, in the next post I’ll continue with MDL and I’ll explain what I mean by wrapping MDL components.

You're here. I appreciate it.

Adding styling to my application

Related posts:

Comments