diff --git a/_src/styleguide.md b/_src/styleguide.md new file mode 100644 index 0000000..cbb2059 --- /dev/null +++ b/_src/styleguide.md @@ -0,0 +1,131 @@ +--- +layout: page + +title: Style Guide +sitemap: false +--- + +## Colors + +### Primary + +
+ {% for color in site.data.colors.primary %} +
+
+ ${{ color.name }} + #{{ color.hex }} +
+
+ {% endfor %} +
+ +### Grays + +
+ {% for color in site.data.colors.grays %} +
+
+ ${{ color.name }} + #{{ color.hex }} +
+
+ {% endfor %} +
+ +### Errors + +
+ {% for color in site.data.colors.errors %} +
+
+ ${{ color.name }} + #{{ color.hex }} +
+
+ {% endfor %} +
+ + +# Typography + +## Body Copy + +Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**. + +Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. + +```html +

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

+ +

Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

+``` + +

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

+ +```html +

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

+``` + +Maecenas sed diam eget risus varius blandit sit amet non magna. + +```html +Maecenas sed diam eget risus varius blandit sit amet non magna. +``` + +

Maecenas sed diam eget risus varius blandit sit amet non magna.

+ +```html +

Maecenas sed diam eget risus varius blandit sit amet non magna.

+``` + + +## Headings + +# Heading 1 +## Heading 2 +### Heading 3 +#### Heading 4 + + +## Lists + +* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. +* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. +* Maecenas sed diam eget risus varius blandit sit amet non magna. + +1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. +2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. +3. Maecenas sed diam eget risus varius blandit sit amet non magna. + + +## Components + +### Buttons + +Button Button Button Button + +```html +Button +Button +Button +Button +``` + + +### Alerts + +
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+
Lucas ipsum Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+ +```html +
Lucas ipsumLucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+ +
Lucas ipsumLucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+ +
Lucas ipsumLucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+ +
Lucas ipsumLucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
+```