August 16, 2014
Using external CSS with your patterns

Would you like to use externally hosted CSS with your patterns? Here is how you can use typeface font hosted elsewhere, but in the same way you can import any other CSS to your patterns.

1. Create a CSS-template: Manage -> CSS templates. Create a CSS template and name it for example “Fonts”.

2. In the first row of the template, type the import tag for your external CSS file, like this (Important: leave http-protocol out from the link):

@import url(//;


3. Go to your pattern where you want to use the fonts and go to edit mode.

4. In the CSS-tab of your pattern, you can see the CSS templates available, and tick the checkbox for the “Fonts”-template.

5. Type in the CSS class you want to use in this pattern, like this:

h1 { font-family: ‘Lato’, sans-serif; }


You can also do this in the pattern template if you want to use the same styles in other patterns too.

6. Choose the HTML-tab, and test that it works, like this:

<h1>h1. This header is Lato.</h1>

<h2>h2. This is Comic Sans.</h2>

Done. Now you should see the H1 text with Lato-font:


Don’t have a Patternry account yet? Sign up for a free trial.

May 19, 2014
New: Nested Libraries

We have been thrilled to see great growth in the average number of patterns created by users with Patternry. This has also created some problems on how to organize patterns. That’s why we are now introducing a new feature: nested pattern libraries. From now on you can create sub-libraries that gives you better control on how to organize your content. See the screenshot below for some ideas.


You can drag-and-drop the libraries to organize them in a way you want. Click the arrow icons to make the library a main library or a sub-library.


We hope you find these improvements helpful, and please let us know if there is something you would like to see improved.

5:20pm  |   URL:
(View comments
Filed under: news 
April 12, 2014
Security Response to Heartbleed

Earlier this week a vulnerability called Heartbleed was exposed in OpenSSL, a protocol most of the Internet uses to encrypt and secure communications. This affected the majority of online services, and Patternry was not an exception.

We don’t believe any of our customer accounts have been compromised, but we have reacted and secured Patternry’s infrastructure against this vulnerability by patching our servers and updating our SSL certificates.

To further minimize risks, we invalidated all user sessions. Because of this, all users will need to log in again. We also recommend you to change your Patternry password.

3:35pm  |   URL:
(View comments
Filed under: news 
March 31, 2014
Email notifications for comments

Communication and collaboration just got easier in Patternry. As you might have already noticed, we have added email notifications for comments. When a new comment is posted to a pattern, an email notification is sent. The email is always sent to everyone in your workspace who can view the pattern and has emailed notifications on.

  1. If the pattern is in a published library, everyone in your workspace will receive the email notification.
  2. If the pattern is not in a library or it’s in library with draft status, the email will be only sent to admins.

If you don’t want to receive these email notifications anymore you can turn them off in ‘My info’.

9:07pm  |   URL:
(View comments
Filed under: news 
March 16, 2014
Save pattern libraries as drafts + improvements to “Edit pattern” view

We have added the possibility to save pattern libraries as drafts. Drafts are libraries that you are not ready to publish to others in your workspace yet and only other workspace admins can see.

By default new libraries are created as drafts. Libraries with the draft status are not shown in the “Pattern Libraries” drop down menu or on the dashboard. They can be accessed from the manage libraries view and the status can also be changed from there. This also means that patterns that are not in any published library are not visible to users with only view-rights. 

We also wanted to make the pattern view less cluttered and more focused on the content of the pattern. From now on the content sections that are empty are hidden in the pattern view (for example, if there are no example images or code snippets added into the pattern, that section is not visible). To add content to empty section go to the pattern’s “Edit” view where all the content sections are visible.

Let us know what you think about these improvements!

10:31pm  |   URL:
(View comments
Filed under: news 
January 28, 2014
You can now use LESS in your HTML patterns!

Hey guys, good news!

A lot of people have requested the ability to use LESS in HTML patterns, and we are now happy to announce that Patternry supports Less CSS.

To use LESS, just create a new HTML pattern (or edit an existing one), click on the CSS-tab in the HTML section, choose “LESS” from the language selection and start typing LESS code. The CSS gets instantly compiled and the HTML example will update as you type.

As always we’d appreciate your feedback and suggestions!

December 17, 2013
Code blocks in text areas + other improvements

One of the main concepts in Patternry is the ability to use HTML, CSS & JavaScript to build live examples of the patterns. In addition to that we have now added the ability to highlight code snippets inside any content area of your patterns. You can use it for example to describe the markup and styles in more detail in addition to the live example, or add other code snippets, for example python or ruby to your patterns. Here’s an example:


To highlight the code snippets, type in the code, highlight it, and click on the code-icon in the text editor. Or, just type your code inside <pre> & <code> tags, like this: <pre><code>Your code here</code></pre>

View patterns as a list instead of thumbnails

In addition to code highlight, we have added an alternative way to view patterns in a library. In the main library view you can now view the patterns also as a list, instead of the thumbnail view. This is handy especially if you have a lot of patterns in your library.

Introducing JavaScript templates

We have improved our HTML pattern concept by adding support for JavaScript templates. This means you can now use your favorite JavaScript framework (AngularJs, KendoUI, Ember.js etc.) with your patterns by creating a new JS template and importing the contents of the JS framework to it. Here is in detail how it works:

  1. Create a JavaScript template (Choose “Manage” -> “JavaScript Templates” from the main navigation).
  2. Copy & paste the JavaScript from the JS framework of your choice in the template content. You can also create several templates.
  3. Choose the pattern(s) where you want to use the JavaScript and go to edit mode.
  4. Choose the JS template(s) you want to use in the pattern (JavaScript tab below the pattern example).
  5. (Extend the JavaScript with your custom JS).

9:16pm  |   URL:
(View comments
Filed under: news 
October 15, 2013
You can use your favorite CSS framework in your HTML patterns

One of the most popular features in Patternry is the ability to use html, CSS & javascript in the “patterns”, which makes creating pattern examples simple and patterns more concrete and useful also for the developers. During the last few weeks we’ve focused in improving this feature, and after the most recent update you can now use multiple CSS templates in your patterns. This means that you can use your favorite CSS framework in your patterns. Here is an example pattern from our public pattern library that uses Twitter Bootstrap front-end framework: Accordion.

How to use CSS frameworks in your patterns?

  1. Create a CSS template (Choose “Manage” -> “CSS templates” from the main navigation).
  2. Copy & paste the CSS from the CSS framework of your choice in the template content.
  3. Choose the pattern(s) where you want to use the CSS framework and go to edit mode.
  4. Choose the CSS template(s) you want to use in the pattern (CSS tab below the pattern example).
  5. (Extend the framework with your custom CSS).

Notice that you can use HTML & CSS only with html-patterns, or patterns with custom templates where you have included HTML & CSS fields.

CSS frameworks

New to front-end frameworks? Here is a list of the most popular HTML/CSS frameworks:

Foundation by Zurb

The most advanced responsive front-end framework in the world.

Twitter Bootstrap

Probably the most popular front-end framework at the moment.

HTML KickStart

Ultra–Lean HTML5, CSS, & JS Building Blocks.


A responsive html/css/less/scss framework.

Semantic UI

Challenger in the front-end framework-space.

What’s coming next?

Support for less & scss, JavaScript templates, and more!

6:53pm  |   URL:
(View comments  
Filed under: news 
October 15, 2013
New Pattern: Typography

We added Typography-pattern to our public pattern library. You can use it to get started with your style guide / pattern library. Just sign up if you haven’t already, add the pattern to your library, create a copy of it and customize to make it fit your needs. 

September 8, 2013
Thumbnail images for HTML patterns are now generated automatically

We made it easier to get thumbnail images working. The thumbnail image shown in the library view is now generated from HTML + CSS used in the pattern. This means that you don’t need to take a screenshot of your pattern and use it as a preview image - just write the HTML code and Patternry generates the thumbnail image for you. And if you change the code, the preview image gets updated instantly (we use iframes to preview the actual HTML & CSS of the pattern).

This feature is something that a lot of people have requested. Thank you Jamund, Hayden and others for the feedback!

8:08pm  |   URL:
(View comments
Filed under: news