Meteor JS (Part 5): Styling with Semantic UI

This is a post in a multiple part series on getting started with Meteor JS. If you don’t have Meteor JS installed you will want to start at  the first post in the series. Part 2 is where we start building the application.

Up until now the application has looked pretty drab. In today’s post we are going to fix that using Semantic UI. Semantic UI is an open source, HTML UI, framework. It has a very expressive syntax for expressing UI elements.

Here is the link to their home page and documentation.

http://semantic-ui.com/

First thing we will need to do is add the Semantic UI meteor package to our project.

/pricebook.html

Let’s setup the header menu and put the item list inside a Semantic UI grid. Also let’s add the viewport meta tag to allow the page to scale properly on a mobile device.

/pricebook.css

Create pricebook.css and add the following rule to give the body tag a 5px margin.

/client/views/items/itemlist.html

First, let’s move the add item template outside of the table. Later we will convert the add item template into a collapsible panel. Next, let’s add a message parameter to our itemerrors template. We will use this a little later. Finally, we are going to set each column to be two columns wide using the Semantic UI grid.

/client/views/items/itemerrors.html

Let’s convert our simple errors template into a Semantic UI error message. We want our error to look something like this.

StyleErrors

/client/views/items/item.html

Let’s style the editing template. Now we are using Semantic UI form and input elements. Also we will style the buttons into Semantic UI button elements.

/client/views/items/item.js

Now let’s clear out the validation context when we click cancel or edit within the item template.

/client/views/items/additem.html

Let’s move the add item form into a collapsible accordion panel and style our inputs to make them look a little better.

/client/views/items/additem.js

Let’s move the insert and reset code into their own functions. Next we will catch the events for submit, save, and cancel. After that let’s initialize the accordion and set focus on the first input. Last we will catch when escape is pressed and reset the form.

I want to draw attention to the rendered function. When this function is called, this is set to the template instance. The issue is that when the open event fires on the accordion this will not be the instance of the template. So here we set self equal to this. Self will become our template instance and we will be able to access it within the onOpen callback.

Summary

In this post we styled the Price Book application. The application isn’t finished but it looks a lot better.

Here is a before and after screen shot of the UI.

MeteorJSGettingStartedPart4ItemNormal
Before
StyledApp
After

Over the next post or two we will discuss data security. Also we will talk about authentication and authorization.

I hope you continue to check out this series. If any of you have suggestions please let me know. You can leave a comment here or send a tweet to @dhirshjr on twitter. As always I have put the code from this post up on github at the following link.

https://github.com/dhirshjr/pricebook

7 thoughts on “Meteor JS (Part 5): Styling with Semantic UI”

  1. Thank you for this very nice tutorial. I love your approach of starting out lean and only then adding styling, etc. Is it easier to learn Semantic-ui or Bootstrap ? Small inconsistency in ‘addItem.html’, “description” heading should be “Name”.

    Also found Simple-schema in chapter 4 to be very interesting, not seen it before.

    Keep up the excellent work.

    1. Thank you for the nice compliment.

      Also thank you for pointing out the inconsistency. I have fixed the inconsistency and pushed the change to Github. It is in the item_search branch. Part 7 will be about adding search functionality to the application.

      To respond to your question about learning Bootstrap or Semantic UI. I have found that Semantic UI seems to be much easier. The class names I used in part 4 can understood very easily.

      Thank you again for stopping by and be sure to checkout part 6 which is about authentication and authorization. And like I said above I am working on search functionality which will be what part 7 is about.

  2. Hello again. I already posted a comment in your first post. But while finishing part 5 I realized that all error strings are in English, and I realized that I would be really nice if you could add an internationalization part. Any way once again thank you for the tutorial.

  3. One more thing I noticed while following the tutorial. When adding semantic UI with the package as you do, I got a warning that it is deprecated, and that I should use the official semantic package. I went to the new page here:

    https://atmospherejs.com/semantic/ui

    I tried to installed (removing the other one first) using:

    meteor add semantic:ui flemay:less-autoprefixer

    But I could’nt get it to work. It needs a custom.semantic.json file that I tried to get working, but couldn’t. So I just uninstalled the “official” semantic and got back to using the one you mention. Just thought I should mention it, so if the old package is really deprecated you could update the tutorial. Thanks any way.

    1. The official Semantic UI package was released. I didn’t use a theme. If you install the plain css package by running meteor add semantic:ui-css you shouldn’t get anymore errors.

Leave a Reply

Your email address will not be published. Required fields are marked *