diff --git a/.gitignore b/.gitignore index 3bf3c45..63ce9ac 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ _site .sass-cache -/.brackets.json +.brackets.json +.jekyll-metadata diff --git a/_colors/brand-colors.html b/_colors/brand-colors.html new file mode 100644 index 0000000..3322598 --- /dev/null +++ b/_colors/brand-colors.html @@ -0,0 +1,17 @@ +--- +title: "Brand Colors" +type: colors +usage: "Colors associated with Dash itself" +--- + +
+ $black +
+ +
+ $white +
+ +
+ $blue +
diff --git a/_colors/site-colors.html b/_colors/site-colors.html new file mode 100644 index 0000000..6ba4450 --- /dev/null +++ b/_colors/site-colors.html @@ -0,0 +1,20 @@ +--- +title: "Site Colors" +type: colors +--- + +
+ $red +
+ +
+ $green +
+ +
+ $gray +
+ +
+ $dark-blue +
diff --git a/_config.yml b/_config.yml index ee0295e..d94d78c 100644 --- a/_config.yml +++ b/_config.yml @@ -1,5 +1,8 @@ markdown: kramdown -exclude: [README.md, rss.xml, _posts/README.md] +exclude: + - README.md + - rss.xml + - _posts/README.md paginate: 5 paginate_path: "/blog/page:num/" name: Dash @@ -16,3 +19,9 @@ sass: gems: - jekyll-paginate - jekyll-multiple-languages-plugin + +collections: + components: # style guide + output: false + colors: # style guide + output: false diff --git a/_includes/component-color.html b/_includes/component-color.html new file mode 100644 index 0000000..38e5b28 --- /dev/null +++ b/_includes/component-color.html @@ -0,0 +1,13 @@ +
+
+

{{ entry.title }}

+ {% if entry.usage %}

Usage: {{ entry.usage }}

{% endif %} +
+ +
+
+ {{ entry.content }} +
+
+ +
diff --git a/_includes/component.html b/_includes/component.html new file mode 100644 index 0000000..cb1b223 --- /dev/null +++ b/_includes/component.html @@ -0,0 +1,19 @@ +
+
+

{{ entry.title }}

+ {% if entry.usage %}

Usage: {{ entry.usage }}

{% endif %} +
+ +
+
+ {{ entry.content }} +
+
+ +{% highlight html %} +{{ entry.content }} +{% endhighlight %} + +
+
+
diff --git a/_layouts/styleguide.html b/_layouts/styleguide.html new file mode 100644 index 0000000..c571d59 --- /dev/null +++ b/_layouts/styleguide.html @@ -0,0 +1,8 @@ +--- +layout: default +--- + +
+

{{ page.title }}

+ {{ content }} +
diff --git a/_sass/_colors.scss b/_sass/_colors.scss index 2624b97..e5c133c 100644 --- a/_sass/_colors.scss +++ b/_sass/_colors.scss @@ -1,9 +1,38 @@ +// brand colors $black: #2f2f2f; $white: #ffffff; - $blue: #1c75bc; + +// site colors $red: #ec2227; $green: #1dd68a; - $gray: #f0f0f0; -$dark-blue: #0b3b5a; \ No newline at end of file +$dark-blue: #0b3b5a; + +// for the style guide: + +@function contrast-color($color, $dark, $light) { + @if (lightness($color) > 50) { + @return $dark; // Lighter backgorund, return dark color + } @else { + @return $light; // Darker background, return light color + } +} + +$color: + ('black', $black), + ('white', $white), + + ('blue', $blue), + ('red', $red), + ('green', $green), + + ('gray', $gray), + ('dark-blue', $dark-blue); + +@each $name, $bgcolor in $color { + .color__tile--#{$name}-bg { + background-color: $bgcolor; + color: contrast-color($bgcolor, #000, #fff); + } +} diff --git a/_sass/_styleguide.scss b/_sass/_styleguide.scss new file mode 100644 index 0000000..beeb026 --- /dev/null +++ b/_sass/_styleguide.scss @@ -0,0 +1,19 @@ +#styleguide { + .component { + &:after { // TODO clearfix mixin + content: ''; + display: table; + clear: both; + } + } + .component + .component { + margin-top: 10px; + } + + .color__tile { + display: inline-block; + padding: 20px; + text-align: center; + width: 10em; + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 91a4872..d65ed03 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -73,6 +73,7 @@ a.blog_link { @import "interior"; @import "post"; @import "header"; +@import "styleguide"; @import "1024"; @import "768"; diff --git a/style-guide/index.html b/style-guide/index.html new file mode 100644 index 0000000..165b637 --- /dev/null +++ b/style-guide/index.html @@ -0,0 +1,39 @@ +--- +layout: styleguide +title: Style guide +description: Collection of website components used on dash.org +--- + +Here are all the pieces that make up this website. + +{% assign colors = site.colors %} +{% assign componentsByType = site.components | group_by:"type" %} + + + +

Colors

+{% for entry in colors %} + {% include component-color.html %} +{% endfor %} +{% for type in componentsByType %} +

{{ type.name | capitalize }}

+{% for entry in type.items %} + {% include component.html %} +{% endfor %} +{% endfor %}