diff --git a/.eleventy.js b/.eleventy.js index 6041599..3e9c4cc 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -27,6 +27,15 @@ module.exports = function(eleventyConfig) {
${content}
`; }); + eleventyConfig.addPairedShortcode('pattern', function(content, name) { + const href = `/${name.toLowerCase().split(' ').join('-')}/`; + return `
+ +
${content}
+
${name}
+ +
`; + }); // `size` can be `sm`, `md`, `lg` eleventyConfig.addShortcode('circle', function(size) { diff --git a/contents/index.njk b/contents/index.njk index 3070d24..002f708 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -12,325 +12,60 @@ eleventyExcludeFromCollections: true

Display

-
-
- -
{% include "patterns/accordion.njk" %}
-
Accordion
- -
-
- -
{% include "patterns/arrow-buttons.njk" %}
-
Arrow buttons
- -
-
- -
{% include "patterns/avatar.njk" %}
-
Avatar
- -
-
- -
{% include "patterns/avatar-list.njk" %}
-
Avatar list
- -
-
- -
{% include "patterns/badge.njk" %}
-
Badge
- -
-
- -
{% include "patterns/card.njk" %}
-
Card
- -
-
- -
{% include "patterns/centering.njk" %}
-
Centering
- -
-
- -
{% include "patterns/close-button.njk" %}
-
Close button
- -
-
- -
{% include "patterns/color-swatch.njk" %}
-
Color swatch
- -
-
- -
{% include "patterns/concave-corners.njk" %}
-
Concave corners
- -
-
- -
{% include "patterns/cookie-banner.njk" %}
-
Cookie banner
- -
-
- -
{% include "patterns/corner-ribbon.njk" %}
-
Corner ribbon
- -
-
- -
{% include "patterns/curved-background.njk" %}
-
Curved background
- -
-
- -
{% include "patterns/diagonal-section.njk" %}
-
Diagonal section
- -
-
- -
{% include "patterns/docked-at-corner.njk" %}
-
Docked at corner
- -
-
- -
{% include "patterns/dot-leader.njk" %}
-
Dot leader
- -
-
- -
{% include "patterns/drop-area.njk" %}
-
Drop area
- -
-
- -
{% include "patterns/drop-cap.njk" %}
-
Drop cap
- -
-
- -
{% include "patterns/fading-long-section.njk" %}
-
Fading long section
- -
-
- -
{% include "patterns/feature-comparison.njk" %}
-
Feature comparison
- -
-
- -
{% include "patterns/feature-list.njk" %}
-
Feature list
- -
-
- -
{% include "patterns/fixed-at-corner.njk" %}
-
Fixed at corner
- -
-
- -
{% include "patterns/fixed-at-side.njk" %}
-
Fixed at side
- -
-
- -
{% include "patterns/folder-structure.njk" %}
-
Folder structure
- -
-
- -
{% include "patterns/full-background.njk" %}
-
Full background
- -
-
- -
{% include "patterns/initial-avatar.njk" %}
-
Initial avatar
- -
-
- -
{% include "patterns/inverted-corners.njk" %}
-
Inverted corners
- -
-
- -
{% include "patterns/keyboard-shortcut.njk" %}
-
Keyboard shortcut
- -
-
- -
{% include "patterns/layered-card.njk" %}
-
Layered card
- -
-
- -
{% include "patterns/lined-paper.njk" %}
-
Lined paper
- -
-
- -
{% include "patterns/media-object.njk" %}
-
Media object
- -
-
- -
{% include "patterns/overlay-play-button.njk" %}
-
Overlay play button
- -
-
- -
{% include "patterns/price-tag.njk" %}
-
Price tag
- -
-
- -
{% include "patterns/pricing-table.njk" %}
-
Pricing table
- -
-
- -
{% include "patterns/property-list.njk" %}
-
Property list
- -
-
- -
{% include "patterns/questions-and-answers.njk" %}
-
Questions and answers
- -
-
- -
{% include "patterns/ribbon.njk" %}
-
Ribbon
- -
-
- -
{% include "patterns/separator.njk" %}
-
Separator
- -
-
- -
{% include "patterns/stacked-cards.njk" %}
-
Stacked cards
- -
-
- -
{% include "patterns/stamp-border.njk" %}
-
Stamp border
- -
-
- -
{% include "patterns/statistic.njk" %}
-
Statistic
- -
-
- -
{% include "patterns/status-light.njk" %}
-
Status light
- -
-
- -
{% include "patterns/sticky-table-column.njk" %}
-
Sticky table column
- -
-
- -
{% include "patterns/sticky-table-headers.njk" %}
-
Sticky table headers
- -
-
- -
{% include "patterns/teardrop.njk" %}
-
Teardrop
- -
-
- -
{% include "patterns/three-dimensions-card.njk" %}
-
Three dimensions card
- -
-
- -
{% include "patterns/timeline.njk" %}
-
Timeline
- -
-
- -
{% include "patterns/tree-diagram.njk" %}
-
Tree diagram
- -
-
- -
{% include "patterns/triangle-buttons.njk" %}
-
Triangle buttons
- -
-
- -
{% include "patterns/video-background.njk" %}
-
Video background
- -
-
- -
{% include "patterns/voting.njk" %}
-
Voting
- -
-
- -
{% include "patterns/watermark.njk" %}
-
Watermark
- -
-
- -
{% include "patterns/zigzag-timeline.njk" %}
-
Zigzag timeline
- -
+
+ {% pattern "Accordion" %}{% include "patterns/accordion.njk" %}{% endpattern %} + {% pattern "Arrow buttons" %}{% include "patterns/arrow-buttons.njk" %}{% endpattern %} + {% pattern "Avatar" %}{% include "patterns/avatar.njk" %}{% endpattern %} + {% pattern "Avatar list" %}{% include "patterns/avatar-list.njk" %}{% endpattern %} + {% pattern "Badge" %}{% include "patterns/badge.njk" %}{% endpattern %} + {% pattern "Card" %}{% include "patterns/card.njk" %}{% endpattern %} + {% pattern "Centering" %}{% include "patterns/centering.njk" %}{% endpattern %} + {% pattern "Close button" %}{% include "patterns/close-button.njk" %}{% endpattern %} + {% pattern "Color swatch" %}{% include "patterns/color-swatch.njk" %}{% endpattern %} + {% pattern "Concave corners" %}{% include "patterns/concave-corners.njk" %}{% endpattern %} + {% pattern "Cookie banner" %}{% include "patterns/cookie-banner.njk" %}{% endpattern %} + {% pattern "Corner ribbon" %}{% include "patterns/corner-ribbon.njk" %}{% endpattern %} + {% pattern "Curved background" %}{% include "patterns/curved-background.njk" %}{% endpattern %} + {% pattern "Diagonal section" %}{% include "patterns/diagonal-section.njk" %}{% endpattern %} + {% pattern "Docked at corner" %}{% include "patterns/docked-at-corner.njk" %}{% endpattern %} + {% pattern "Dot leader" %}{% include "patterns/dot-leader.njk" %}{% endpattern %} + {% pattern "Drop area" %}{% include "patterns/drop-area.njk" %}{% endpattern %} + {% pattern "Drop cap" %}{% include "patterns/drop-cap.njk" %}{% endpattern %} + {% pattern "Fading long section" %}{% include "patterns/fading-long-section.njk" %}{% endpattern %} + {% pattern "Feature comparison" %}{% include "patterns/feature-comparison.njk" %}{% endpattern %} + {% pattern "Feature list" %}{% include "patterns/feature-list.njk" %}{% endpattern %} + {% pattern "Fixed at corner" %}{% include "patterns/fixed-at-corner.njk" %}{% endpattern %} + {% pattern "Fixed at side" %}{% include "patterns/fixed-at-side.njk" %}{% endpattern %} + {% pattern "Folder structure" %}{% include "patterns/folder-structure.njk" %}{% endpattern %} + {% pattern "Full background" %}{% include "patterns/full-background.njk" %}{% endpattern %} + {% pattern "Initial avatar" %}{% include "patterns/initial-avatar.njk" %}{% endpattern %} + {% pattern "Inverted corners" %}{% include "patterns/inverted-corners.njk" %}{% endpattern %} + {% pattern "Keyboard shortcut" %}{% include "patterns/keyboard-shortcut.njk" %}{% endpattern %} + {% pattern "Layered card" %}{% include "patterns/layered-card.njk" %}{% endpattern %} + {% pattern "Lined paper" %}{% include "patterns/lined-paper.njk" %}{% endpattern %} + {% pattern "Media object" %}{% include "patterns/media-object.njk" %}{% endpattern %} + {% pattern "Overlay play button" %}{% include "patterns/overlay-play-button.njk" %}{% endpattern %} + {% pattern "Price tag" %}{% include "patterns/price-tag.njk" %}{% endpattern %} + {% pattern "Pricing table" %}{% include "patterns/pricing-table.njk" %}{% endpattern %} + {% pattern "Property list" %}{% include "patterns/property-list.njk" %}{% endpattern %} + {% pattern "Questions and answers" %}{% include "patterns/questions-and-answers.njk" %}{% endpattern %} + {% pattern "Ribbon" %}{% include "patterns/ribbon.njk" %}{% endpattern %} + {% pattern "Separator" %}{% include "patterns/separator.njk" %}{% endpattern %} + {% pattern "Stacked cards" %}{% include "patterns/stacked-cards.njk" %}{% endpattern %} + {% pattern "Stamp border" %}{% include "patterns/stamp-border.njk" %}{% endpattern %} + {% pattern "Statistic" %}{% include "patterns/statistic.njk" %}{% endpattern %} + {% pattern "Status light" %}{% include "patterns/status-light.njk" %}{% endpattern %} + {% pattern "Sticky table column" %}{% include "patterns/sticky-table-column.njk" %}{% endpattern %} + {% pattern "Sticky table headers" %}{% include "patterns/sticky-table-headers.njk" %}{% endpattern %} + {% pattern "Teardrop" %}{% include "patterns/teardrop.njk" %}{% endpattern %} + {% pattern "Three dimensions card" %}{% include "patterns/three-dimensions-card.njk" %}{% endpattern %} + {% pattern "Timeline" %}{% include "patterns/timeline.njk" %}{% endpattern %} + {% pattern "Tree diagram" %}{% include "patterns/tree-diagram.njk" %}{% endpattern %} + {% pattern "Triangle buttons" %}{% include "patterns/triangle-buttons.njk" %}{% endpattern %} + {% pattern "Video background" %}{% include "patterns/video-background.njk" %}{% endpattern %} + {% pattern "Voting" %}{% include "patterns/voting.njk" %}{% endpattern %} + {% pattern "Watermark" %}{% include "patterns/Watermark.njk" %}{% endpattern %} + {% pattern "Zigzag timeline" %}{% include "patterns/zigzag-timeline.njk" %}{% endpattern %}