Using CSS Frameworks and Inuit CSS

In a break from the usual client based news we thought we’d share a news item about some internal work we have been doing that has ended up with a more public facing element.

As a digital development agency we are proud of our ability to work with different platforms and technologies. Whether it’s adopting a client’s existing Magento 1 site while building a new Magento 2 ecommerce site or creating completely custom web applications, we place a strong emphasis on working as efficiently and effectively as possible.

One area of development that is particularly important to us is our core technology platform. Core is something that we are constantly working on and using to create new custom projects for our clients. As part of this work some of the team have recently been looking at the application of a new frontend CSS framework for the platform.

CSS and CSS Frameworks

For those unfamiliar with the term CSS, it stands for Cascading Style Sheets and it’s a web language that looks after the formatting and presentation of content such as colours, fonts and layouts on a web page. The pages content such as the text is kept separately in HTML or Hypertext Markup Language. Keeping the two separate can help improve accessibility and gives more control over the presentation of the content. It also means that web pages can share the same formatting hence reducing complexity and repetition.

A CSS framework pre-packages a number of elements and provides a common structure so that developers don’t have to start from scratch each time they build the front end of a website.

The frameworks help by doing a lot of the heavy lifting by providing configurable features like typography, forms, buttons, icons and other reusable components built to provide navigation, alerts, images frames, HTML templates, custom settings, etc. They also ensure that everything works seamlessly across all major browsers and devices. This means we can be more effective and concentrate the majority of our efforts on creating awesome websites rather than spending time on repetitive work.

Because of their usefulness there are a lot of different frameworks out there so to help us narrow down our choices we treated this internal project like we would any client project. We set project objectives and goals, looked at opportunities and barriers to success and formed a scope of work. In this case the scope of work was to carry out some R&D around which of the frameworks would be most appropriate for our approach to web development.

Choosing a CSS Framework

Of the tens of frameworks we reviewed against our objectives and business needs here are just three that we looked at: Bootstrap, Skeleton and Inuit.

• Developed by Twitter, Bootstrap is one of the most popular HTML, CSS, and JS frameworks for developing responsive, mobile first projects on the web. Its popularity is due to the fact that it can do a lot but this does mean that it has an out-of-the box file size of around 276K, which is quite large considering it's just CSS. Much of this can be trimmed when you have decided which styles you aren’t using but we still felt it was a bit too heavy and restrictive for our needs.
• Skeleton sits at the other end of the CSS framework scale from Bootstrap. It’s really minimalist including a grid system and styling for a handful of standard HTML elements. While this could be really useful for smaller projects or when the utility of larger frameworks isn’t needed we felt that it wasn’t right for us.
• We had been using an older version of Inuit CSS for some time so it made sense to look using the latest version. Inuit CSS sits somewhere in between the two frameworks mentioned above and offers a good balance for our needs. It’s an open-source, Sass-based, OOCSS framework with a strong focus on performance, scalability, and a small footprint. Inuit is ideal for larger more complex projects and as a framework provides a powerful collection of design-free objects and abstractions which build the skeleton of a site which we can then lay the required design elements over.

It also helped that the framework happens to have been developed by a local lad Harry Roberts also known as CSS Wizardry. Harry is a well-known front end web developer and consultant for Google, UN, Etsy, Kickstarter, BBC, Unilever and Deloitte amongst others.

Using Inuit CSS

We chose to use the latest Inuit CSS framework because its underlying philosophy suits our approach to web development, our core technology platform and the particularly custom project work that we often end up doing for our clients.

While working with the latest version of Inuit one of our developers noticed that it didn’t have as much accompanying information as previous versions (earlier versions had an excellent resource called “The Kitchen Sink”). In the spirit of working with and on open source software projects we decided to put back into the community by working on a Kitchen Sink resource for the latest version of Inuit.

Inuit CSS Kitchen Sink

You can find our Inuit CSS Kitchen Sink at http://inuitcss-kitchensink.enigma-interactive.co.uk/

With the resource we have provided plenty of examples and notes on how to use the new version of Inuit. There are also plenty of practical code snippets which can easily be copied and reused as needed. As we continue to work with Inuit we will be adding to the site so keep an eye out for updates.

Are you a developer? Do you use CSS frameworks? Have you found our Inuit CSS info useful? Would you like to see anything added in future? Let us know via Twitter or Contact us.