This is just a simple base-line SASS color setup I use in my projects. I find that early style tiles and color choices help focus.
A Pen by sheriffderek on CodePen.
This is just a simple base-line SASS color setup I use in my projects. I find that early style tiles and color choices help focus.
A Pen by sheriffderek on CodePen.
<!-- | |
This isn't the point | |
--> | |
<div class="light"> | |
<div class="white circle"></div> | |
<div class="black circle"></div> | |
<div class="gray-light circle"></div> | |
<div class="gray circle"></div> | |
<div class="gray-dark circle"></div> | |
<div class="color-light circle"></div> | |
<div class="color circle"></div> | |
<div class="color-dark circle"></div> | |
<div class="hightlight-light circle"></div> | |
<div class="hightlight circle"></div> | |
<div class="hightlight-dark circle"></div> | |
</div> | |
<div class="dark"> | |
<div class="white circle"></div> | |
<div class="black circle"></div> | |
<div class="gray-light circle"></div> | |
<div class="gray circle"></div> | |
<div class="gray-dark circle"></div> | |
<div class="color-light circle"></div> | |
<div class="color circle"></div> | |
<div class="color-dark circle"></div> | |
<div class="hightlight-light circle"></div> | |
<div class="hightlight circle"></div> | |
<div class="hightlight-dark circle"></div> | |
</div> | |
<div class="bars"> | |
<div class="white pad">Basic SASS color setup</div> | |
<div class="black"></div> | |
<div class="gray-light"></div> | |
<div class="gray"></div> | |
<div class="gray-dark"></div> | |
<div class="color-light"></div> | |
<div class="color"></div> | |
<div class="color-dark"></div> | |
<div class="hightlight-light"></div> | |
<div class="hightlight"></div> | |
<div class="hightlight-dark"></div> | |
</div> | |
@import "compass"; | |
// $colors | |
$white: #fff; | |
$black: #222; | |
$gray: #eaeaea; | |
$gray-light: lighten($gray, 5%); | |
$gray-dark: darken($gray, 15%); | |
$color: #f06; | |
$color-light: lighten($color, 20%); | |
$color-dark: darken($color, 10%); | |
$highlight: lightblue; | |
$highlight-light: lighten($highlight, 15%); | |
$highlight-dark: darken($highlight, 20%); | |
// $page styles | |
body { | |
padding: 0em; | |
} | |
.pad { | |
padding: 1em; | |
} | |
div { | |
width: 100%; | |
float: left; | |
min-height: 4em; | |
} | |
.circle { | |
width: 4em; | |
height: 4em; | |
border-radius: 50%; | |
float: left; | |
margin: .5em; | |
} | |
.light { | |
background-color: white; | |
padding: 1em; | |
} | |
.dark { | |
background-color: black; | |
padding: 1em; | |
} | |
.white { | |
background-color: $white; | |
} | |
.black { | |
background-color: $black; | |
} | |
.gray { | |
background-color: $gray; | |
} | |
.gray-light { | |
background-color: $gray-light; | |
} | |
.gray-dark { | |
background-color: $gray-dark; | |
} | |
.color { | |
background-color: $color; | |
} | |
.color-light { | |
background-color: $color-light; | |
} | |
.color-dark { | |
background-color: $color-dark; | |
} | |
.hightlight { | |
background-color: $highlight; | |
} | |
.hightlight-light { | |
background-color: $highlight-light; | |
} | |
.hightlight-dark { | |
background-color: $highlight-dark; | |
} | |