Last active
June 2, 2017 11:55
-
-
Save mimshwright/32b52ae2902cb2f645bb to your computer and use it in GitHub Desktop.
Example of using responsive placeholder images in PatternLab
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="fpo placeholder {{styleModifier}}"> | |
| {{! #large }} | |
| <img src="../../images/placeholder/{{styleModifier}}.jpg" class="large" alt="Placeholder for {{styleModifier}}, large" /> | |
| {{! / large }} | |
| {{# medium}} | |
| <style> | |
| @media screen and (max-width: 960px) { | |
| .placeholder.{{styleModifier}} img.large { | |
| display: none; | |
| } | |
| .placeholder.{{styleModifier}} img.medium { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| <img src="../../images/placeholder/{{styleModifier}}-medium.jpg" class="medium" alt="Placeholder for {{styleModifier}}, medium" /> | |
| {{/ medium}} | |
| {{# small}} | |
| <style> | |
| @media screen and (max-width: 640px) { | |
| .placeholder.{{styleModifier}} img.medium, | |
| .placeholder.{{styleModifier}} img.large { | |
| display: none; | |
| } | |
| .placeholder.{{styleModifier}} img.small { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| <img src="../../images/placeholder/{{styleModifier}}-small.jpg" class="small" alt="Placeholder for {{styleModifier}}, small" /> | |
| {{/ small}} | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="max-width: 1280px;"> | |
| <h3>Placeholder example (large only)</h3> | |
| <p>This is an example of how you could use the placeholder atom. Use the styleModifier to set the pattern id that you are placeholding. Make sure you add a file with the right name (e.g. <code>organisms-nav.jpg</code>) to the <code>images/placeholder</code> folder.</p> | |
| <p>Placeholder images are always displayed at 100% width by default and are wrapped in pink borders to indicate that they are placeholders. There is an annotation for placeholders to further indicate that they are FPO.</p> | |
| {{> atoms-placeholder:organisms-nav }} | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="max-width: 1280px;"> | |
| <h3>Placeholder example (large, medium small)</h3> | |
| <p>This is an example of a placeholder atom with responsive sizes. Use the styleModifier to set the pattern id that you are placeholding. Add additional sizes by setting <code>medium</code> and/or <code>small</code> to true (it is possible to only use a only medium image or only a small image). The medium size image will appear at page widths smaller than 960px and the small will appear at widths smaller than 640px (large will appear at all other sizes). Make sure you add a file with the right name (e.g. <code>organisms-nav-medium.jpg</code>, <code>organisms-nav-small.jpg</code>. Note: large images do not have any modifier to the name) to the <code>images/placeholder</code> folder. </p> | |
| <p>Placeholder images are always displayed at 100% width by default and are wrapped in pink borders to indicate that they are placeholders. There is an annotation for placeholders to further indicate that they are FPO.</p> | |
| {{> atoms-placeholder:organisms-nav(medium:true, small:true) }} | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .placeholder { | |
| width: 100%; | |
| img { | |
| width: 100%; | |
| // Highlight placeholder images so they're known to be FPO. | |
| border: 2px solid #EC008C; | |
| // by default, hide medium and small | |
| &.medium, &.small { | |
| display: none; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var comments = { | |
| "comments" : [ | |
| { | |
| "el": ".placeholder", | |
| "title" : "Placeholder", | |
| "comment": "This is an in-progress, FPO, placeholder image for a component that has not yet been developed." | |
| } | |
| ]}; |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I created this method for adding 3 responsive placeholder images in patternlab. I use it to cut images from PSDs to embed in organisms so that the template will feel more complete while I work on replacing the organisms with code. It's a top-down approach to using PatternLab starting with templates and working down.
The atom automatically references images in a placeholder folder named {{styleModifier}}.jpg (also -medium.jpg, and -small.jpg). You can use just the large image or add a small and / or medium breakpoint version.