Code blocks in text areas + other improvements
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.
October 15, 2013
You can use your favorite CSS framework in your HTML patterns
How to use CSS frameworks in your patterns?
- Create a CSS template (Choose “Manage” -> “CSS templates” from the main navigation).
- Copy & paste the CSS from the CSS framework of your choice in the template content.
- Choose the pattern(s) where you want to use the CSS framework and go to edit mode.
- Choose the CSS template(s) you want to use in the pattern (CSS tab below the pattern example).
- (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.
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.
Probably the most popular front-end framework at the moment.
Ultra–Lean HTML5, CSS, & JS Building Blocks.
A responsive html/css/less/scss framework.
Challenger in the front-end framework-space.
What’s coming next?
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!