From 36d0108e73cc4357ea4d859a08f518c704d2e01a Mon Sep 17 00:00:00 2001 From: Mark Moser Date: Sun, 6 Aug 2017 21:20:25 -0500 Subject: [PATCH] moar styleguide --- package.json | 3 +- site/assets/scss/components/_styleguide.scss | 24 +++++ site/assets/scss/elements/_cta.scss | 41 ++++++++ site/assets/scss/elements/_typography.scss | 24 ++++- site/assets/scss/main.scss | 3 +- site/assets/scss/settings/_colors.scss | 94 ++----------------- site/favicon.ico | Bin 0 -> 1043 bytes site/pages/styleguide.hbs | 35 ++++--- 8 files changed, 119 insertions(+), 105 deletions(-) create mode 100644 site/assets/scss/components/_styleguide.scss create mode 100644 site/assets/scss/elements/_cta.scss create mode 100755 site/favicon.ico diff --git a/package.json b/package.json index 5195ae3..b25fb0a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "grunt-postcss": "^0.8.0", "grunt-sass": "^2.0.0", "grunt-sass-lint": "^0.2.2", - "load-grunt-tasks": "^3.5.2" + "load-grunt-tasks": "^3.5.2", + "sass-lint": "^1.10.2" }, "dependencies": { "normalize.css": "^7.0.0" diff --git a/site/assets/scss/components/_styleguide.scss b/site/assets/scss/components/_styleguide.scss new file mode 100644 index 0000000..4b24d4c --- /dev/null +++ b/site/assets/scss/components/_styleguide.scss @@ -0,0 +1,24 @@ + + +.color-samples { + > div { + display: flex; + margin: $gutter 0; + height: 100px; + + div { flex: 1 1 auto; } + + :nth-child(1) { background-color: $white; } + :nth-child(2) { background-color: $light; } + :nth-child(3) { background-color: $light-grey; } + :nth-child(4) { background-color: $dark-grey; } + :nth-child(5) { background-color: $black; } + + :nth-child(6) { background-color: $dark-blue; } + :nth-child(7) { background-color: $blue; } + :nth-child(8) { background-color: $red; } + :nth-child(9) { background-color: $orange; } + :nth-child(10) { background-color: $yellow; } + } +} + diff --git a/site/assets/scss/elements/_cta.scss b/site/assets/scss/elements/_cta.scss new file mode 100644 index 0000000..a8cefbc --- /dev/null +++ b/site/assets/scss/elements/_cta.scss @@ -0,0 +1,41 @@ +.cta-primary, +.cta-secondary { + &, + &:visited { + display: inline-block; + margin: $gutter; + margin-left: 0; + border: 1px solid $red; + background-color: $white; + padding: $gutter; + text-decoration: none; + color: $red; + } + + &:hover, + &:active { + margin: $gutter - 1px; + margin-left: -1px; + border-width: 2px; + border-color: $red; + background-color: $light; + text-decoration: none; + color: $red; + } +} + +.cta-secondary { + &, + &:visited { + border-color: $dark-grey; + color: $dark-grey; + } + + &:hover, + &:active { + border-width: 2px; + border-color: $black; + background-color: $light; + color: $black; + } +} diff --git a/site/assets/scss/elements/_typography.scss b/site/assets/scss/elements/_typography.scss index 2ba89e8..5efc69c 100644 --- a/site/assets/scss/elements/_typography.scss +++ b/site/assets/scss/elements/_typography.scss @@ -1,6 +1,8 @@ html, body { @include font-default; + background-color: $light; + color: $black; } .h1, @@ -57,11 +59,19 @@ p { line-height: 1.4; } -// a { -// &:visited { } -// &:hover { } -// &:active { } -// } +a { + &, + &:visited { + text-decoration: underline; + color: $blue; + } + + &:hover, + &:active { + text-decoration: underline; + color: $dark-blue; + } +} .small { @include font-roboto; @@ -75,7 +85,11 @@ code { @include font-mono; display: block; margin: $gutter; + background-color: $dark-grey; + padding: 0 0 $gutter; + width: auto; line-height: 1.35; white-space: pre; + color: $light; font-size: 18px; } diff --git a/site/assets/scss/main.scss b/site/assets/scss/main.scss index 404a261..3b9264c 100644 --- a/site/assets/scss/main.scss +++ b/site/assets/scss/main.scss @@ -9,6 +9,7 @@ @import 'elements/typography'; @import 'elements/nav'; @import 'elements/icons'; +@import 'elements/cta'; @import 'elements/layout'; -// @import 'components/thing'; +@import 'components/styleguide'; diff --git a/site/assets/scss/settings/_colors.scss b/site/assets/scss/settings/_colors.scss index 3fc9e1b..5c440a9 100644 --- a/site/assets/scss/settings/_colors.scss +++ b/site/assets/scss/settings/_colors.scss @@ -1,85 +1,11 @@ +$white: #fff; +$light: rgba(246, 244, 243, 1); +$light-grey: rgba(191, 189, 193, 1); +$dark-grey: rgba(46, 47, 47, 1); +$black: #000; - -$color-a1: rgba(191, 189, 193, 1); -$color-a2: rgba(109, 106, 117, 1); -$color-a3: rgba(55, 50, 62, 1); -$color-a4: rgba(222, 184, 65, 1); -$color-a5: rgba(222, 158, 54, 1); - - -$color-b1: rgba(187, 225, 195, 1); -$color-b2: rgba(167, 205, 189, 1); -$color-b3: rgba(134, 157, 122, 1); -$color-b4: rgba(145, 120, 93, 1); -$color-b5: rgba(139, 93, 51, 1); - - -$color-c1: rgba(240, 58, 71, 1); -$color-c2: rgba(175, 91, 91, 1); -$color-c3: rgba(246, 244, 243, 1); -$color-c4: rgba(39, 111, 191, 1); -$color-c5: rgba(24, 48, 89, 1); - - -$color-d1: rgba(172, 189, 186, 1); -$color-d2: rgba(205, 221, 221, 1); -$color-d3: rgba(165, 153, 181, 1); -$color-d4: rgba(46, 47, 47, 1); -$color-d5: rgba(5, 16, 20, 1); - - -$color-e1: rgba(255, 200, 87, 1); -$color-e2: rgba(233, 114, 76, 1); -$color-e3: rgba(197, 40, 61, 1); -$color-e4: rgba(72, 29, 36, 1); -$color-e5: rgba(37, 95, 133, 1); - -.color-samples { - > div { - display: flex; - margin: $gutter 0; - height: 100px; - - > div { flex: 1 1 auto; } - } - - .color-a { - :nth-child(1) { background-color: $color-a1; } - :nth-child(2) { background-color: $color-a2; } - :nth-child(3) { background-color: $color-a3; } - :nth-child(4) { background-color: $color-a4; } - :nth-child(5) { background-color: $color-a5; } - } - - .color-b { - :nth-child(1) { background-color: $color-b1; } - :nth-child(2) { background-color: $color-b2; } - :nth-child(3) { background-color: $color-b3; } - :nth-child(4) { background-color: $color-b4; } - :nth-child(5) { background-color: $color-b5; } - } - - .color-c { - :nth-child(1) { background-color: $color-c1; } - :nth-child(2) { background-color: $color-c2; } - :nth-child(3) { background-color: $color-c3; } - :nth-child(4) { background-color: $color-c4; } - :nth-child(5) { background-color: $color-c5; } - } - - .color-d { - :nth-child(1) { background-color: $color-d1; } - :nth-child(2) { background-color: $color-d2; } - :nth-child(3) { background-color: $color-d3; } - :nth-child(4) { background-color: $color-d4; } - :nth-child(5) { background-color: $color-d5; } - } - - .color-e { - :nth-child(1) { background-color: $color-e1; } - :nth-child(2) { background-color: $color-e2; } - :nth-child(3) { background-color: $color-e3; } - :nth-child(4) { background-color: $color-e4; } - :nth-child(5) { background-color: $color-e5; } - } -} +$yellow: rgba(255, 200, 87, 1); +$orange: rgba(233, 114, 76, 1); +$red: rgba(197, 40, 61, 1); +$blue: rgba(37, 95, 133, 1); +$dark-blue: rgba(24, 48, 89, 1); diff --git a/site/favicon.ico b/site/favicon.ico new file mode 100755 index 0000000000000000000000000000000000000000..2a47582dca5925038cfb8046d83ab4d2888e5a5f GIT binary patch literal 1043 zcmZ?wbhEHb6krfw_&ym_;(cj2z{?@atcS8O|`q-ns)#1@|5 zAuJ&(C(I|%TGT`BOUcK7BFz@F--W`(9!ex@ge{E z&F8P(-?(cXgXh`vi{coZN(HQwN*X4{=5~ZkyJ_y~%V1h)Z_3ReVUt>t#t{7M%crMu z%1Ww|OzrKR43bW)T*4wUVsB1$@@bi_*m+jh)Xgb4jg^sQi+I@Em=Utk;c3*T#xtxOZ%flu6?*3;G z3z)IxYC~hYNyWiyFTUM-_;kYTokm*1a$4GofmOPSoD7zknep+@-hcl1>GQf>8`INs z8O^fJ$I5z|Cr@Aa`|lr{q~g{!3u_x< zL!IpJ-nsMh*Pr%^GD#5`RS9N&L%IL||1;1XDE?$&WMH_-paZfQlqVcGJ}_+Nl(Fz? z?``A|c0F{}iA9}Fo5iC$pqYDODD!!i*va@Wf>-u1V4o=@1E_>$JTc63zv{Wgk;3u ziv~WClVz7~l1wP%aP4#T`=P=0MB`v*$m~t32h)}ci)L4aaAYo67Q}8DziDRDCKeXH qlwySin#n6Trp!#6=ktT{`K%3sQyP|vMkvj0$|>9=>Lek+U=097agsX# literal 0 HcmV?d00001 diff --git a/site/pages/styleguide.hbs b/site/pages/styleguide.hbs index 27cd3e9..8e5072e 100644 --- a/site/pages/styleguide.hbs +++ b/site/pages/styleguide.hbs @@ -8,6 +8,13 @@

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Looking at styling for an h3

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
    +
  • item 1 in unordered list
    • +
  • item 2 in unordered list
    • +
  • item 3 in unordered list
    • +
  • item 4 in unordered list
    • +
  • item 5 in unordered list
    • +

Looking at styling for an h4

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Looking at styling for an h5
@@ -21,16 +28,23 @@

Colors

-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-

Misc elements

- +

Code Samples

function thing1(thing2) { var thing3 = 'some default value'; @@ -38,10 +52,3 @@ } -
    -
  • item 1 in unordered list
    • -
  • item 2 in unordered list
    • -
  • item 3 in unordered list
    • -
  • item 4 in unordered list
    • -
  • item 5 in unordered list
    • -