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!
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.
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:
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.
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!
Thousands of people and some of the world’s biggest companies trust us with their data. Here’s an overview of Patternry's security practices, and how we keep your data safe, accessible and available.
We protect your data and privacy
Our servers are protected by 24/7 physical security and use integrated server hardening. Regular full-system virus scans and system patching is run on servers. The data center we use is SSAE16 (SOC1) compliant and runs regular security profile reviews and recommendations.
Redundant, best-in-class infrastructure
Our servers are located in data centers that maintain multiple power feeds, fiber links, dedicated generators, and battery backup. They are built from industry-leading hardware and equipment, ensuring the highest level of performance, reliability, and interoperability.
Few days ago we rolled out an a small but significant feature: file upload. From now on you can add any files to your patterns, for example Photoshop or Illustrator files. Files are limited to a maximum of 50MB. This feature has been a popular request from Patternry users and it broadens the utility of our service.
Files can be uploaded to patterns under the new “Attachments” headline. Just click “Add” and select the file you want to upload.
As you already might have noticed we refreshed the design of Patternry few days ago, have a look if haven’t already. We will keep tweaking the design bit by bit over the coming months. Let us know what you think of the changes!