-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rearrange content structure to match wires and start work on colour s…
…watches
- Loading branch information
1 parent
37de184
commit d419f26
Showing
12 changed files
with
320 additions
and
69 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .swatch { | ||
| border-radius: 999px; | ||
| display: block; | ||
| float: left; | ||
| height: 100px; | ||
| line-height: 100px; | ||
| margin: 0 8px 8px; | ||
| text-align: center; | ||
| width: 100px; | ||
|
|
||
| @each $name, $palette in $palettes { | ||
|
|
||
| @each $key, $hex in $palette { | ||
| &--#{$name}-#{$key} { | ||
| background: $hex; | ||
|
|
||
| &:after { | ||
| color: invert($hex); | ||
| content: '#{$hex}'; | ||
| // TODO: Change colour based on hex | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,5 +5,6 @@ | |
|
|
||
| // Components | ||
| @import 'components/example'; | ||
| @import 'components/swatch'; | ||
|
|
||
| // Other | ||
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <nav> | ||
| <ul> | ||
| <li><a href="/style-guide">Style guide</a></li> | ||
| <li><a href="/style-guide/layout">Layout</a></li> | ||
| <li><a href="/style-guide/typography">Typography</a></li> | ||
| <li><a href="/style-guide/buttons">Buttons</a></li> | ||
| <li><a href="/style-guide/colour">Colour</a></li> | ||
| </ul> | ||
| </nav> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| {% extends "../layouts/_sidebar.njk" %} | ||
| {% set title = "Buttons" %} | ||
|
|
||
| {% block sidebar %} | ||
|
|
||
| {% include "partials/style-guide-nav.njk" %} | ||
|
|
||
| {% endblock %} | ||
|
|
||
|
|
||
| {% block main %} | ||
|
|
||
| <h1>Buttons</h1> | ||
|
|
||
| <nav> | ||
| <ul> | ||
| <li><a href="#styles">Styles</a></li> | ||
| <li><a href="#sizes">Sizes</a></li> | ||
| <li><a href="#groups">Groups</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <section id="styles"> | ||
| <h2>Button styles</h2> | ||
|
|
||
| <ul> | ||
| <li>Buttons can be <code><a></code>, <code><button></code> or <code><input></code></li> | ||
| <li>Use BEM mofifiers for different types</li> | ||
| </ul> | ||
|
|
||
| {% example -%} | ||
| <div class="panel panel--dark"> | ||
| <p><button type="button" class="btn">Default button</button></p> | ||
| <p><a href="#" class="btn btn--primary">Primary button</a></p> | ||
| <p><input type="button" class="btn btn--secondary" value="Subtle secondary" /></p> | ||
| </div> | ||
| {%- endexample %} | ||
| </section> | ||
|
|
||
| <section id="sizes"> | ||
| <h2>Sizes</h2> | ||
|
|
||
| <ul> | ||
| <li>Use BEM modifiers for sizes</li> | ||
| <li>Size and type modifiers can be combined</li> | ||
| </ul> | ||
|
|
||
| {% example -%} | ||
| <div class="grid"> | ||
| <div class="grid__item one-half"> | ||
| <p><button type="button" class="btn btn--xs">Large button</button></p> | ||
| <p><button type="button" class="btn btn--sm">Large button</button></p> | ||
| <p><button type="button" class="btn">Default button</button></p> | ||
| <p><button type="button" class="btn btn--lg">Large button</button></p> | ||
| <p><button type="button" class="btn btn--xl">XL button</button></p> | ||
| </div> | ||
| <div class="grid__item one-half"> | ||
| <p><button type="button" class="btn btn--secondary btn--xs">Large button</button></p> | ||
| <p><button type="button" class="btn btn--secondary btn--sm">Large button</button></p> | ||
| <p><button type="button" class="btn btn--secondary">Default button</button></p> | ||
| <p><button type="button" class="btn btn--secondary btn--lg">Large button</button></p> | ||
| <p><button type="button" class="btn btn--secondary btn--xl">XL button</button></p> | ||
| </div> | ||
| </div> | ||
| {%- endexample %} | ||
| </section> | ||
|
|
||
| <section id="groups"> | ||
| <h2>Groups</h2> | ||
|
|
||
| <ul> | ||
| <li>Buttons can be grouped together</li> | ||
| <li>Typically a default/primary and a secondary</li> | ||
| <li>Don't group more than 3 buttons</li> | ||
| </ul> | ||
|
|
||
| {% example -%} | ||
| <p> | ||
| <button type="button" class="btn">Primary action</button> | ||
| <button type="button" class="btn btn--secondary">Secondary action</button> | ||
| </p> | ||
| {%- endexample %} | ||
| </section> | ||
|
|
||
| {% endblock %} |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| {% extends "../layouts/_sidebar.njk" %} | ||
| {% set title = "Colour" %} | ||
|
|
||
| {% block sidebar %} | ||
|
|
||
| {% include "partials/style-guide-nav.njk" %} | ||
|
|
||
| {% endblock %} | ||
|
|
||
|
|
||
| {% block main %} | ||
|
|
||
| <h1>Colours</h1> | ||
|
|
||
| <nav> | ||
| <ul> | ||
| <li><a href="#usage">Usage</a></li> | ||
| <li><a href="#palette">Palettes</a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <section id="usage"> | ||
| <h2>Usage</h2> | ||
|
|
||
| </section> | ||
|
|
||
|
|
||
| <section id="groups"> | ||
| <h2>Palettes</h2> | ||
|
|
||
| <h3>Oranges</h3> | ||
|
|
||
| <div class="swatch swatch--orange-base"></div> | ||
|
|
||
| <h3>Blues</h3> | ||
|
|
||
| <div class="swatch swatch--blue-x-light"></div> | ||
| <div class="swatch swatch--blue-light"></div> | ||
| <div class="swatch swatch--blue-base"></div> | ||
| <div class="swatch swatch--blue-dark"></div> | ||
|
|
||
| <h3>Purples</h3> | ||
|
|
||
| <div class="swatch swatch--purple-base"></div> | ||
|
|
||
| </section> | ||
|
|
||
| {% endblock %} |
This file contains 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
Oops, something went wrong.