What is Ornament?

Ornament is a front-end boilerplate for websites built using Ruby on Rails, SASS and Grunt. If you would like to use Ornament for static sites (or anything other than rails, really) there’s the static converter, which will reduce the amount of railsiness in Ornament.

The idea behind Ornament is not to be a prototyping tool like Bootstrap, but instead be a framework of utilities and features that allow you to quickly develop production-level front-end code. Ornament is split in to two sections: utilities and components.

While Bootstrap is more of a set of pre-existing styles, Ornament is more of a classical framework. Bootstrap gives you out of the box styling for forms, headers, footers, menus, lists, buttons and so on. Because of this, every Bootstrap website either looks the same, or has a lot of time spent un-doing a lot of the bootstrap styling to create their own identity.

Ornament on the other hand creates a set of sass utilities that you can use to quickly build up your own styles fast and with ease. The aim of Ornament is to reduce the amount of code you find yourself writing for every project.

Another difference is that Ornament is generated once, while Bootstrap usually lives in the background of your website and you build styles on top of it. After generating Ornament you can throw away the things you don’t like or over-write the things you need to change. It’s very open to customisation and changes.

Ornament gets used daily at Katalyst so bugs are usually logged and resolved during project development and pushed back in to Ornament.
Most of our projects are the standard run-of-the-mill 3-page website with a contact form. We often need to find solutions for complex interface problems. These solutions usually get pulled back in to Ornament in the form of utility mixins or functions so if the same problem comes up again, we can solve it efficiently.

As Ornament is used frequently, it is also tested against browsers and devices frequently. So you can feel pretty safe that if your website was built using Ornament that it will work in as many places as possible. With that being said however, we are dropping support for IE8–9 in Ornament 2.0.

Ornament is completely open-source and available to the public on github and anyone can suggest changes or make pull requests.

One of the main aims of Ornament is to be scalable and flexible. We’ve found BEM to be very helpful in understanding how to separate out components and keep our code maintainable.

The future of Ornament is to remain a framework for quickly building out styles for your website. We do have a prototype branch that is more like Bootstrap, that brings in some out-of-the-box styling for a lot of things but that’s not the direction Katalyst wants for Ornament. The prototype branch is nice for quickly prototyping things, but at it’s core Ornament is all about mixins, utilities and making things easier for the front-end developer.

Like what you read? Give Katalyst Interactive a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.