Marrel is the CSS as used on This toolkit contains the components we most commonly use in our websites. This prevents us from writing new CSS or copy/pasting in things like <form> styling and buttons. Thus creating a more uniform design across our sites and making it easier for others to use and improve the code.

This is heavily inspired by Github's Primer and @mdo's talk Build your own Bootstrap. As a way to give back (and as a thank you) this code has been released open-source under the MIT license.

The name comes from an abbreviation from Margin Release. A btn often found on typewriters which allows you to write on the margins of a page.

Getting started

Include the latest version in your code (direct link):

<link rel="stylesheet" href="//">

Or stick with a specific version:

<link rel="stylesheet" href="//"> <link rel="stylesheet" href="//"> <link rel="stylesheet" href="//"> <link rel="stylesheet" href="//"> <link rel="stylesheet" href="//">

Add the required meta tags

PT Sans is used in headings. The viewport meta tag is required for the responsiveness to work. The other are optional but recommended. <link rel="stylesheet" href="//,700"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="HandheldFriendly" content="true"> <meta name="theme-color" content="#E43E94"> <meta name="msapplication-TileColor" content="#E43E94">

How does it work?

Marrel is built with Sass on top of the grid system from Bootstrap (via Bootstrip) and normalize.css.

The end goal is not to create a toolkit that works for every use case but instead provides a solid starting point. Therefore the code does not contain twenty table styles and ten button sizes. Still — when using this we encourage you to write as few new lines of CSS as possible and opt for less is more.

Check it out on Github or visit