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.

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


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.


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


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.


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



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.


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


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


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.


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.


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.

Leave a Reply

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