We've recently remodeled our website and we're pretty excited about it. We built a completely custom design for it, and I'm going to share a bit of what led up to the new design.

The site is built on the Open Source publishing software, Ghost. When we first stood up the site we used the out-of-the-box theme for Ghost, Casper. It is a beautiful theme and it instantly gave a nice professional look to our first posts. The cool part was that we didn't have to do any work to make it look good, and that was how we left the site for the next year and a half.

A few months ago, though, I had to migrate another blog to Ghost, and for that site we tried the Massively theme. It worked so well for that site that we tried it for our site as well. After doing some testing and modification of the Massively theme, we decided that Casper was closer to what we wanted and that we would tweak it until we got what we were looking for. It was time for a facelift.

After some changes, we were almost satisfied with our customized Casper theme until I realized that the horizontal nav-bar didn't collapse for mobile devices, which left the links in the bar to get cut off on smaller screen sizes. That was unacceptable.

Now, I'm fairly experienced in web design, but I've still never built a menu drawer from scratch. I've never had to. I usually make a practice out of using things that people have already made, when possible, so that I don't waste time. We have a lot of work to do over here, spanning everything from server management to video game development, and we're careful to be as efficient as possible, not spending time doing things that we don't have to. Still, we needed a menu drawer and I had to figure out how to work one into the theme.

As I thought about how I could get a menu drawer into the theme, I remembered a web framework that I had experimented with in the past that had lots of powerful features, including menu drawers. It was called the Quasar Framework. The Quasar Framework allows you to build JavaScript apps that can run on the web or as desktop/mobile phone applications. Quasar is cool because it has all of the bells and whistles. It supplies all kinds of components that you can use to build your app, like buttons, dialogs, text-boxes, nav-bars, layouts, and nearly everything else. Then you are left with putting them all together and designing anything that doesn't come with it.

If we used Quasar for the site, it would mean developing the Quasar app to talk to the Ghost API and get the post data before rendering the data on the site. Designing the site in Quasar would be quite a bit more work than just adding some code to the Casper theme, but there were other advantages to Quasar, too:

  • Because Quasar comes with so many components, there could be things other than the menu drawer that might come in handy, like an image carousel for instance.
  • Quasar could load data from anything, not just from Ghost. If we wanted to hook our site up to our development platform to display the latest commits or pull pinned chats from public channels on our chat server, all of that would be possible to combine into the same site.
  • Quasar would be completely customizable. Not that the Ghost themes aren't, but because Quasar builds single paged applications ( i.e. apps that don't refresh the page as you navigate ), we would be able to further customize the user experience.

Essentially, we would never grow out of Quasar. It would always be able to grow with our business needs, even though we would have to do the work to design it.

I decided to do a proof of concept to see how much work it was going to take to get the site built. Even though we wanted an awesome website, we didn't want to spend the next six months designing it. After just a day, I had a list of posts with their feature images rendering in a simple Quasar app. It was decided, we were going with Quasar.

After that, I got fully into the development of the site. I had experimented with Quasar before, so I knew my way around a bit, but this was the first production app that I was making with it so I had some stuff to brush up on. In Gods perfect timing, Quasar 1.0 Beta was coming out, so we got to use that and not have to worry about upgrading later; not to mention all of the new features that were coming out!

The site development went great, and in just over a month it was done! We took inspiration from Casper, Massively, and Quasar, and, of course we put a lot of our own style into it too. We even custom designed and rendered the header image in Blender. We're thankful to the Ghost folks for their awesome themes, and their great publishing platform, and very thankful to God for giving us the tools and ability to make our site.

Katharostech.com represents the first "product" that we have delivered as an organization. It was a refreshing experience to be able to fully design something original and to put our own character into it. We hope that our quest for quality and attention to detail will show through, and that our site will give us the opportunity to share pure innovation with the world.