Design with Outfit

Create documents for print and screen with HTML and CSS.

Slice 1 Created with Sketch ( Slice 1 Created with Sketch (

Take advantage of all the web has to offer

Anything that can be done in your browser can be exported for use in print and on screen. That means, generative Javascript backgrounds, dynamic maps, API requests, Flexbox and @media queries.

Design with code, make everything a website

By designing all of your collateral with HTML and CSS instead of creating them in a design tool, it's easy to add dynamic and customisable content to what would otherwise be a mundane iterative process full of design approvals and content changes.

One template, infinite dimensions

Using max and min aspect ratio media queries, you can create a resizable template that will automatically adapt to the given dimensions.

From website to template in seconds

Easily create dynamic content by replacing hard coded HTML with two curly brackets and the name of your input.

<h1> hello world </h1>

<h1> {{ headline }} </h1>


T    Hello World |

Choose the right input for the job

Let Authors input data with either plain or rich text, images, range sliders, spreadsheets and more.

Easily create a theme with dynamic content and a little CSS

Letting the Authors choose between body classes (and switching out background images when the body has that class) is a great way to create multiple themes.

<div class="{{ theme }}">

From dynamic content to static files

One template can have an infinite amount of dimensions and file types.

What about crop marks?

With CSS you can easily create some crop marks by absolutely positioning some pseudo elements. Because these elements are absolutely positioned, they will adapt to whatever size your document is.

Prefer to work locally?

We do too, so we created a template build tool (complete with CSS pre-processing, Mustache parsing and basic features like typography that scales with the viewport) to speed up the development of templates.

View on Github

Coding isn't your thing?

There are existing base template structures to get you started. You can also import an existing webpage through a URL, by uploading a zip or an svg. Outfit will convert this file into a template for you.

We have even created a tool to easily make basic templates without coding.

Didn't find what you were looking for?