moar styleguide
This commit is contained in:
Mark Moser
@ -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"
|
||||
|
||||
24
site/assets/scss/components/_styleguide.scss
Normal file
24
site/assets/scss/components/_styleguide.scss
Normal file
@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
41
site/assets/scss/elements/_cta.scss
Normal file
41
site/assets/scss/elements/_cta.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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);
|
||||
|
||||
BIN
site/favicon.ico
Executable file
BIN
site/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -8,6 +8,13 @@
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, 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.</p>
|
||||
<h3>Looking at styling for an h3</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, 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.</p>
|
||||
<ul>
|
||||
<li>item 1 in unordered list</li>
|
||||
<li>item 2 in unordered list</li>
|
||||
<li>item 3 in unordered list</li>
|
||||
<li>item 4 in unordered list</li>
|
||||
<li>item 5 in unordered list</li>
|
||||
</ul>
|
||||
<h4>Looking at styling for an h4</h4>
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, 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.</p>
|
||||
<h5>Looking at styling for an h5</h5>
|
||||
@ -21,16 +28,23 @@
|
||||
<h2>Colors</h2>
|
||||
|
||||
<div class="color-samples">
|
||||
<div class="color-a"><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div class="color-b"><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div class="color-c"><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div class="color-d"><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div class="color-e"><div></div><div></div><div></div><div></div><div></div></div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Misc elements</h2>
|
||||
|
||||
<h2>Code Samples</h2>
|
||||
<code>
|
||||
function thing1(thing2) {
|
||||
var thing3 = 'some default value';
|
||||
@ -38,10 +52,3 @@
|
||||
}
|
||||
</code>
|
||||
|
||||
<ul>
|
||||
<li>item 1 in unordered list</li>
|
||||
<li>item 2 in unordered list</li>
|
||||
<li>item 3 in unordered list</li>
|
||||
<li>item 4 in unordered list</li>
|
||||
<li>item 5 in unordered list</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user