Patchwork
- Bower:
bower install patchwork-app
Getting Started
Patchwork uses CSS Flexbox to create a convenient CSS framework that leverages the order
property with a responsive approach.
You may well have been asked to re-order elements for different viewports – and this is where Flexbox — and of course Patchwork — excel!
As an example, consider the following markup which positions two elements adjacent to one another with equal widths:
First Second
When viewing on a tablet you may well be asked to place the second section
above the first section
; in days gone by this would have required a little JavaScript, but with Flexbox — and Patchwork — you can simply apply the following:
First Second
Width Enforcement
Consider the following HTML markup:
First Second Third
In cases like this, due to the nature of the Flexbox implementation, the third column will attempt to be squeezed into the remaining space. However, there are times when you want the third column to take up another column in a 12 column layout – for this you can append an exclamation symbol to the large-size
property – this will cause the third column to wrap onto the next line:
/* ... */ Third
Element Break
With Flexbox it's not easy to force a break in the content – that is why Patchwork provides a convenient method for doing so. Simply add an element to your HTML with large-size: break
and/or medium-size: break
— the element itself won't be displayed, but it will wrap your content:
If you would like to break when large and not break when medium, then simply use the value none
: large-size: break, medium-size: none
Alternative
An alternative approach to the break uses the custom HTML element patchwork-break
which accepts a for
attribute which determines at which sizes it breaks the content:
By removing the medium label, the break would not occur when the container is in its medium dimension.
Custom Build
By default Patchwork
uses 16 columns with a maximum width of 960px
– you can modify these defaults by opening up Options.scss
and changing the necessary variables – afterwards invoke gulp build --custom
to initiate a custom build that will output to dist/custom
.