From a948bde923175171a5583386c7504ba7499fb6f4 Mon Sep 17 00:00:00 2001 From: "Clark, Chancellor A" Date: Mon, 13 Feb 2017 15:34:28 -0600 Subject: [PATCH] feat(typography): Add link lists --- rocketbelt/base/_typography.scss | 14 ++ rocketbelt/tools/mixins/_link-list.scss | 44 +++++ rocketbelt/tools/mixins/_mixins.scss | 1 + templates/base/typography/index.pug | 219 +++++++++++++++++------- 4 files changed, 213 insertions(+), 65 deletions(-) create mode 100644 rocketbelt/tools/mixins/_link-list.scss diff --git a/rocketbelt/base/_typography.scss b/rocketbelt/base/_typography.scss index 789b78ea..262fcc35 100644 --- a/rocketbelt/base/_typography.scss +++ b/rocketbelt/base/_typography.scss @@ -216,6 +216,20 @@ h4 { @include list-reset($horizontal: true); } +.link-list:first-of-type { + padding-left: 0; +} + +.link-list { + @include link-list(); + display: inline-block; + padding: 0 1em; +} + +.link-list:last-of-type { + padding-right: 0; +} + a { color: color(primary); transition: color 100ms linear; diff --git a/rocketbelt/tools/mixins/_link-list.scss b/rocketbelt/tools/mixins/_link-list.scss new file mode 100644 index 00000000..ba460bb9 --- /dev/null +++ b/rocketbelt/tools/mixins/_link-list.scss @@ -0,0 +1,44 @@ +@mixin link-list() { + @include list-reset() + + li { + text-transform: capitalize; + line-height: 1.75; + + a { + color: color(gray); + cursor: pointer; + transition: color 100ms linear; + + &:hover { + color: color(gray, plus1); + transition: color 100ms linear; + } + + &:active { + color: color(gray, minus1); + transition: color 100ms linear; + } + } + } + + .title { + text-transform: uppercase; + + a { + color: color(black); + cursor: pointer; + transition: color 100ms linear; + + &:hover { + color: color(gray, minus2); + transition: color 100ms linear; + } + + &:active { + color: color(black); + transition: color 100ms linear; + } + } + } +} diff --git a/rocketbelt/tools/mixins/_mixins.scss b/rocketbelt/tools/mixins/_mixins.scss index 9c0d06a9..9d1578b5 100644 --- a/rocketbelt/tools/mixins/_mixins.scss +++ b/rocketbelt/tools/mixins/_mixins.scss @@ -4,6 +4,7 @@ 'clearfix', 'centered', 'color-families', + 'link-list', 'list-reset', 'overlay', 'triangle', diff --git a/templates/base/typography/index.pug b/templates/base/typography/index.pug index 395335dc..c7ec138c 100644 --- a/templates/base/typography/index.pug +++ b/templates/base/typography/index.pug @@ -7,9 +7,9 @@ block content article h1 Typography p Here is some short front matter about typography. - + h2 Downloads - + ul.list-reset li a(href='./OpenSans.zip') Open Sans @@ -24,7 +24,7 @@ block content h2 h2. Pier 1 Imports h3 h3. Pier 1 Imports h4 h4. Pier 1 Imports - + h2 Headings With Secondary Text h3 Consideration: Semantics div(class="bg_secondary-lighter" style="padding: 40px; width: 250px;") @@ -36,8 +36,8 @@ block content h3 Consideration: SEO h1.heading-group span.preheading Preheadline #[span.heading Headline] - - + + h2 Font Faces .grid-fluid .row @@ -46,15 +46,15 @@ block content div.font-sans h4 Open Sans p. - Let it a sleek, hand-painted in a little sunshine and proud + Let it a sleek, hand-painted in a little sunshine and proud heritage dating back and hang. We’d say white stoneware mug with - bold and a beaded number. You’ll love a nostalgic, weathered - sign is either way, our elegant simplicity. Collect a - windowsill, but this unit in and it's a naked niche? Nothing - spices up the deer pillar of warm colors and plum—all in our - classic lines with flashy fringe. This little pillow features + bold and a beaded number. You’ll love a nostalgic, weathered + sign is either way, our elegant simplicity. Collect a + windowsill, but this unit in and it's a naked niche? Nothing + spices up the deer pillar of warm colors and plum—all in our + classic lines with flashy fringe. This little pillow features applique and intricate piecework and fest. - + a(href='./OpenSans.zip') Download Open Sans—Brand Sans .grid-fluid .row @@ -63,72 +63,72 @@ block content .font-serif h4 Crimson Text p. - Self-welting and just a favorite chair, sofa something good to - smell the holiday entertaining with built-in timers for extra - limber draft stopper makes it instantly brighten your affinity + Self-welting and just a favorite chair, sofa something good to + smell the holiday entertaining with built-in timers for extra + limber draft stopper makes it instantly brighten your affinity for exceptional comfort, our embroidered in every bird) is crafted - with oversized pillow has a soft, polyester construction ensures - long-lasting comfort. Whether you just the wood and kitchen or a - touch to hang anything but you at a braided wire, and stops. Buy - one bouquet of a hint of textures to be the right rhythm. + with oversized pillow has a soft, polyester construction ensures + long-lasting comfort. Whether you just the wood and kitchen or a + touch to hang anything but you at a braided wire, and stops. Buy + one bouquet of a hint of textures to be the right rhythm. Flaunting iron and sharing, rich hues of sophistication? - a(href='./CrimsonText.zip') Download Crimson Text—Brand Serif + a(href='./CrimsonText.zip') Download Crimson Text—Brand Serif h3 UI Text Sizes .grid.margin-0 .row .col.xs.ellipsis +exampleWithCode - .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - + .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .grid.margin-0 .row .col.xs.ellipsis +exampleWithCode .font-serif - .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. h2 Non-UI Text Sizes - + .grid.margin-0 .row .col.xs.ellipsis +exampleWithCode - .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - + .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .grid.margin-0 .row .col.xs.ellipsis +exampleWithCode .font-serif - .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. - + .font-minus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-minus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + div We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-1 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-2 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-3 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + .font-plus-4 We concur with zesty orange, vanilla musk—all in shades of life, but plays well with perfectly suited for you. + h2 Lists - h3 Reset + h3 Reset +exampleWithCode ul.list-reset li One @@ -137,21 +137,110 @@ block content li A li B li Three - + h3 Horizontal Reset +exampleWithCode ul.list-inline li One li Two li Three - + + // Does title need modifier, or use first-of-type/first-child? + h2 Link Lists + h3 Title + +exampleWithCode + ul.link-list + li.title Living Room + li + a Chairs + li + a Ottomans + li + a Sectionals + li + a Sofas & Loveseats + li + a Accent & Coffee Tables + li + a TV & Media Stands + li + a Cabinets + li + a Shelves and Bookcases + li + a Living Room Collections + ul.link-list + li.title Dining & Kitchen + li + a Dining Tables + li + a Dining Chairs + li + a Sectionals + li + a Sofas & Loveseats + li + a Accent & Coffee Tables + li + a TV & Media Stands + li + a Cabinets + li + a Shelves and Bookcases + li + a Living Room Collections + ul.link-list + li Living Room + li + a Chairs + li + a Ottomans + li + a Sectionals + li + a Sofas & Loveseats + li + a Accent & Coffee Tables + li + a TV & Media Stands + li + a Cabinets + li + a Shelves and Bookcases + li + a Living Room Collections + + h3 Title + Link + +exampleWithCode + ul.link-list + li.title + a Living Room + li + a Chairs + li + a Ottomans + li + a Sectionals + li + a Sofas & Loveseats + li + a Accent & Coffee Tables + li + a TV & Media Stands + li + a Cabinets + li + a Shelves and Bookcases + li + a Living Room Collections + h3 Font Weights .font-plus-4 +exampleWithCode .font-weight-light Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qu Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 div Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qu Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 .font-weight-semibold Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qu Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 - + .font-plus-4 +exampleWithCode .font-style-italic @@ -160,12 +249,12 @@ block content +exampleWithCode .font-serif div Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qu Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 - + .font-plus-4 +exampleWithCode .font-serif.font-style-italic div Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qu Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 - + h3 Block Quotes .grid-fluid .row @@ -177,21 +266,21 @@ block content +exampleWithCode .group blockquote.pull.float-right - p.quote Simply because we were licked a hundred years before we + p.quote Simply because we were licked a hundred years before we | started is no reason for us not to try to win. .source Harper Lee, #[span.font-style-italic To Kill A Mockingbird] - h3 Lead Copy + h3 Lead Copy .grid-fluid .row.xs-center .col.md-6.xs-12 +exampleWithCode .lead-first-line. - Gerbera daisies bloom at a skilled artisan, with Mother Nature's - showing off at home which features a luxe in so good. Our ornate - Chinese theme, use as the timeless frame. Crafted of texture and - plush texture. Plus, it’s stood the sun, too. Weave them to line - brought that touch of these two taper candle for you. Maybe using + Gerbera daisies bloom at a skilled artisan, with Mother Nature's + showing off at home which features a luxe in so good. Our ornate + Chinese theme, use as the timeless frame. Crafted of texture and + plush texture. Plus, it’s stood the sun, too. Weave them to line + brought that touch of these two taper candle for you. Maybe using never-forgetting elephant and “home” sculpture. .col.md-6.xs-12 +exampleWithCode