8th March 2018

Numiko Dashboard

Numiko Dashboard

Case Study


The Dashboard is aimed to be like a homepage, and also great for people who are just joining the team. It has a list of all the websites and applications most used here and also has lots of important info at the bottom such as First Aid, WiFi and Contact Details. As a bonus, I animated each link box by adding a hover effect. When the mouse is hovered over each link box, they increase in size.

Following a Design

We were asked to follow a design, created by the design team and then given a very basic HTML file which had all the link boxes on. Our job was to style and follow the layout of the design, and add a gradient border around the page. This was very interesting, and after some research I figured out how to the border which involved me using a border-image tag.

You can see the Design below.

Mobile First

Numiko follow the ‘Mobile First’ Rule, that involves creating sites to various Breakpoints including; Mobile (Tiny/Small), Tablet (Medium), Laptop (Large) and PC (Huge). I followed the Mobile First Rule to create the Dashboard. The screenshots below show the various screen sizes of the Dashboard. I think the Mobile First Rule is the best way of working and I will use this when creating sites or working on projects in the future.

Screenshot Gallery

What did I Learn?

As the Dashboard was created using Sass, I had to have some knowledge of Gulp. Gulp is what is called a ‘Task Runner’ and is used to compile Sass, into regular CSS so that it can be read by the Browser. I had basic knowledge of this from Treehouse and Codecademy Lessons.

The Dashboard was created using Sass. So to create the Dashboard I had to have some understanding in this language. In the past, I have completed lessons on sites such as Treehouse and Codecademy, but while creating the Dashboard I learnt lots of new ways to use Sass.

As previously said, Numiko use the Mobile-First rule. So I learnt this way of work by sitting with one of the Front-End team. We created Mobile together, then I was given the task to create Tablet (Medium), Laptop (Large) and Desktop (Huge) Screen sizes.

I think the Mobile First Rule is the best way of work, as sizing up is easier than sizing down.

The Command Line was used in creating the Dashboard. We used this to see where files were stored and to run Gulp.

When I first started here at Numiko, we had a run through using the Command Line with one of the Back-End team. But using the Command Line with the Dashboard, was a great to learn.

When talking with a member of the Front-End team, he felt it would be beneficial to create Jira tickets for the Dashboard, and also a space to commit changes to the Dashboard to BitBucket.