When Google released Material Design guidelines, I knew it would be cool to use it in live projects. Material design is intuitive and easy to use. Its guidelines resulted in creation of Material Design Lite, which is a styling kit made by Google. It has all major elements prepared for use out of the box. You will learn how we turned Material Design Lite blog template into Baasic AngularJS blog starter kit theme (you can see demo here).

As you probably know, we have recently published Baasic AngularJS blog starter kit but it included only the default theme. We decided that is time to offer some visual diversity to our users.

One of the new themes that we offer as a part of a theme gallery in Baasic AngularJS blog starter kit is based on Material Design Lite Blog Template. It required only a couple of simple adjustments. All those familiar with AngularJS will find this very easy to do, but I will explain what was adjusted and how.

Making List of Blog Posts

Our blog starter kit uses ng-repeat to display blog posts on the page, so only one block is needed, along with the white box with logo and + button. The first blog post has different width, so we apply separate styling to it.

ng-class="{'classes-for-first-post': $first, 'classes-for-other-posts':!$first}"

This code will apply css ‘classes-for-first-post’ only to the first item in ng-repeat. This is all you have to do to style featured posts - in our case, this is the newest blog post. All other elements, including blog title and blog excerpt are called with AngularJS expressions.

That worked nicely, but white box is now on the left while it should be on the right. We can fix that with CSS order property since articles are displayed in flexbox.

White box before and after ordering White box before and after ordering

There are a few HTML blocks that are affected by the order property. I used it to place the white box immediately after the first item in ng-repeat.

Code for the white box with logo and search field:

<div class="mdl-card something-else mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--4-col-phone box--secondary">
...
</div>

Code for blog list items:

<div ng-if="hasBlogs" ng-repeat="blog in blogList.item" ng-class=" { 'mdl-card mdl-cell mdl-cell--8-col mdl-cell--5-col-tablet mdl-cell--4-col-phone box--primary': $first , 'mdl-card mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone box--tertiary': !$first }">
...
</div>

CSS:

.box--primary {
    order: 1;
}
.box--secondary {
    order: 2;
}
.box--tertiary {
    order: 3;
}

Baasic AngularJS blog starter kit includes a pager - one of the essential features of any blog. Pager that is used in this theme is styled according to Material Design Lite blog template. Pager buttons are shown only when needed. If we don’t have enough posts for multiple pages, buttons will not be shown.

Code for the pager:

<pager pager-data="pagerData" ng-show="pager.hasPrevious || pager.hasNext">
    <a class="demo_nav--button link pull" ui-sref="master.main.index({ page: pager.currentPage - 1 })" ng-show="pager.hasPrevious" class="demo-nav__button">
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900">
            <i class="material-icons">arrow_back</i>
        </button>
        <span>Newer</span>
    </a>
    <div class="section-spacer"></div>
    <a ui-sref="master.main.index({ page: pager.currentPage + 1 })" ng-show="pager.hasNext" class="demo-nav__button link push">
        <span>Older</span>
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color-text--grey-900">
            <i class="material-icons">arrow_forward</i>
        </button>
    </a>
</pager>

Now we have a list of blog posts and we can easily navigate to other pages. However, our starter kit has add/edit/delete blog post functionality included, so you don’t have to login to Baasic Dashboard to add or edit articles. Since that part isn’t covered by Material Design Lite blog template, we had to make it from scratch.

Adding missing sections to Material Design Lite blog theme

The “View source” button that we can see in the Material Design Lite blog template preview was moved to the upper right corner and it is used for login or logout. Login page is a simple card with input boxes and a submit button that redirect users to the home page if login is successful.

Circular “+” button on home page is perfect for “add new blog post” functionality. User has to be logged in to add new post, so this button will redirect users to the login form if they are not already authenticated. Naturally, edit and delete buttons are displayed only to authorized users.

Add/Edit blog post page is styled according to the blog template and Material Design Lite. Inputs are extended with AngularJS and data is read/stored via JSON in Baasic.

We also have a search form in our blog starter kit. I wanted to add that to Material Design Lite blog template, so I deleted a dropdown menu and placed a search field into its place.

We have also covered Error 404, that includes a simple error message and a button for navigating back to the home page.

CSS

CSS in Baasic is handled with pleeease postprocessor PostCSS (we switched to PostCSS). It is essential that you @import fonts and other CSS files in app.css. I imported material.css core files with styles.css, which is made for Material Design Lite blog template. There are also a few CSS files that cover parts of the blog theme that were not included in the Material Design Lite blog template such as 404 Error page, login, add/edit posts, etc.

/*------------------------------------*\
# app.css
\*------------------------------------*/

/**
* Fonts
*/
@import url(http://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/**
 * Variables
 * Different variables
 */
@import "vars.typography.css";
@import "vars.responsive.css";

/**
* Material Design Lite
*/
@import "material.css";
@import "styles.css";

/**
 * Base styles
 * The base global classes and styling
 */

@import "base.viewtransitions.css";

/**
* Aditional Components for Baasic Blog
*/
@import "components.pager.css";
@import "components.form.css";
@import "components.search.css";
@import "components.loader.css";
@import "components.footer.css";
@import "components.tags.css";
@import "components.message.css";

/**
* Various Utility Classes
*/
@import "util.floats.css";
@import "util.order.css";
@import "util.spacers.css";
@import "util.validation.css";
@import "util.lost.css";

/**
* Various Plugins Style
*/
@import "plugins.tageditor.css";

Plans for the future features

We plan to implement various new features like blog post comments, user profiles and plenty of other neat features for Baasic in the future, so stay tuned for upcoming updates.

Feel free to leave a comment

comments powered by Disqus