marrel.css

marrel.css

Marrel is the CSS as used on Inktweb.nl. 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="//marrel.inktweb.nl/marrel.min.css">

Or stick with a specific version:

<link rel="stylesheet" href="//marrel.inktweb.nl/1.4.0/marrel.min.css"> <link rel="stylesheet" href="//marrel.inktweb.nl/1.3.1/marrel.min.css"> <link rel="stylesheet" href="//marrel.inktweb.nl/1.3.0/marrel.min.css"> <link rel="stylesheet" href="//marrel.inktweb.nl/1.2.2/marrel.min.css"> <link rel="stylesheet" href="//marrel.inktweb.nl/1.2.1/marrel.min.css">

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="//fonts.googleapis.com/css?family=PT+Sans:400,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 Inktweb.nl