Created
October 1, 2014 02:54
-
-
Save danny-englander/f021c1007a556828ce06 to your computer and use it in GitHub Desktop.
Sass Color Palettes using @each directive loop and Susy grids.
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
<div class="l-main-wrap" role="main"> | |
<h1>Theme Color Palettes</h1> | |
<article> | |
<p>A demo of the Sass @each directive loop for theme color palettes using Susy grids.</p> | |
<ul class="theme-colors"> | |
<li class="cp-turquoise"><span>Turquoise</span></li> | |
<li class="cp-purple"><span>Purple</span></li> | |
<li class="cp-orange"><span>Pumpkin Orange</span></li> | |
<li class="cp-green"><span>Olive Green</span></li> | |
<li class="cp-pomegranate"><span>Pomegranate</span></li> | |
<li class="cp-seafoam"><span>Seafoam</span></li> | |
<li class="cp-greengray"><span>Green Gray</span></li> | |
<li class="cp-pink"><span>Pink</span></li> | |
<li class="cp-mustard"><span>Mustard</span></li> | |
<li class="cp-surf-green"><span>Surf Green</span></li> | |
<li class="cp-maillot-jaune dark"><span>Maillot Jaune (dark)</span></li> | |
<li class="cp-caribe dark"><span>Caribe (dark)</span></li> | |
<li class="cp-chartreuse dark"><span>Chartreuse (dark)</span></li> | |
</ul> | |
</article> | |
</div> |
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
// ---- | |
// Sass (v3.4.4) | |
// Compass (v1.0.1) | |
// Breakpoint (v2.5.0) | |
// Susy (v2.1.3) | |
// ---- | |
@import "susy"; | |
@import "breakpoint"; | |
@import "compass"; | |
// Define susy. | |
$susy: ( | |
columns: 12, | |
gutters: .7, | |
); | |
// The font size set on the root html element. translates to 100%. | |
$base-font-size: 16px; | |
// Vertical rhythm. | |
$base-line-height: 24px; | |
// Vertical rhythm. | |
@include establish-baseline; | |
// Define breakpoints. | |
$mobile: 320px; | |
$tab: 767px; | |
$desk: 1024px; | |
// List reset mixin. | |
@mixin list-reset { | |
list-style-type: none; | |
} | |
// Padding reset mixin. | |
@mixin padding-reset { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
// Render the Box sizing mixin. | |
*, | |
*:after, | |
*:before { | |
@include box-sizing(border-box); | |
} | |
// Color vars. | |
$white: white; | |
$medium_gray: #999999; | |
$sea_green: #16a085; | |
$pomegranate: #c0392b; | |
$orange: #e04604; | |
$orange_hover: #e04604; | |
$olive_green: #6a8500; | |
$pink: #b72898; | |
$purple: #491f70; | |
$purple_light: #b58dd9; | |
$purple_accent: #7629bd; | |
$turquoise: #02b4ce; | |
$turquoise_hover: #02C9E3; | |
$green_gray: #7f8c8d; | |
$mustard: #c3a918; | |
$maroon: #851b1d; | |
$britered: #ef262b; | |
$surf-green: #02aab3; | |
$maillot-jaune: #f0de16; | |
$caribe: #a6c9d1; | |
$chartreuse: #c8dc77; | |
body { | |
font-family: verdana, sans-serif; | |
color: darken($medium_gray, 20%); | |
} | |
// Global page width and layout. | |
.l-main-wrap { | |
@include container(1064px); | |
padding: 0 20px; | |
} | |
h1 { | |
color: darken($medium_gray, 10%); | |
@include adjust-font-size-to(30px); | |
margin: 0 auto rhythm(.4) auto; | |
} | |
p { | |
font-size: 18px; | |
line-height: 24px; | |
margin: 0 auto rhythm(.8) auto; | |
} | |
ul.theme-colors { | |
@include list-reset; | |
@include padding-reset; | |
li { | |
font-weight: bold; | |
color: $white; | |
padding: 10px; | |
margin: 0 0 1% 0; | |
overflow: hidden; | |
&.dark { | |
color: darken($medium_gray, 30%); | |
} | |
} | |
} | |
// Define the palettes. | |
$palette: ("greengray": $green_gray, "pink": $pink, "orange": $orange, "green": $olive_green, | |
"purple": $purple, "turquoise": $turquoise, "pomegranate": $pomegranate, "seafoam": $sea_green, | |
"mustard": $mustard, "surf-green": $surf-green, "maillot-jaune": $maillot-jaune, | |
"caribe": $caribe, "chartreuse": $chartreuse); | |
// @each loop for each color in the palette. | |
@each $hexvar, $color in $palette { | |
li.cp-#{$hexvar} { | |
background-color: $color; | |
} | |
} | |
// Setup breakpoint $tab to $desk. | |
@include breakpoint($tab $desk) { | |
ul.theme-colors { | |
li { | |
@include gallery(6); | |
} | |
} | |
} | |
// Setup breakpoint desk or greater. | |
@include breakpoint($desk) { | |
ul.theme-colors { | |
li { | |
@include gallery(4); | |
} | |
} | |
} |
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
html { | |
font-size: 100%; | |
line-height: 1.5em; | |
} | |
*, | |
*:after, | |
*:before { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: verdana, sans-serif; | |
color: #666666; | |
} | |
.l-main-wrap { | |
max-width: 1064px; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 0 20px; | |
} | |
.l-main-wrap:after { | |
content: " "; | |
display: block; | |
clear: both; | |
} | |
h1 { | |
color: gray; | |
font-size: 1.875em; | |
line-height: 1.6em; | |
margin: 0 auto 0.6em auto; | |
} | |
p { | |
font-size: 18px; | |
line-height: 24px; | |
margin: 0 auto 1.2em auto; | |
} | |
ul.theme-colors { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
ul.theme-colors li { | |
font-weight: bold; | |
color: white; | |
padding: 10px; | |
margin: 0 0 1% 0; | |
overflow: hidden; | |
} | |
ul.theme-colors li.dark { | |
color: #4d4d4d; | |
} | |
li.cp-greengray { | |
background-color: #7f8c8d; | |
} | |
li.cp-pink { | |
background-color: #b72898; | |
} | |
li.cp-orange { | |
background-color: #e04604; | |
} | |
li.cp-green { | |
background-color: #6a8500; | |
} | |
li.cp-purple { | |
background-color: #491f70; | |
} | |
li.cp-turquoise { | |
background-color: #02b4ce; | |
} | |
li.cp-pomegranate { | |
background-color: #c0392b; | |
} | |
li.cp-seafoam { | |
background-color: #16a085; | |
} | |
li.cp-mustard { | |
background-color: #c3a918; | |
} | |
li.cp-surf-green { | |
background-color: #02aab3; | |
} | |
li.cp-maillot-jaune { | |
background-color: #f0de16; | |
} | |
li.cp-caribe { | |
background-color: #a6c9d1; | |
} | |
li.cp-chartreuse { | |
background-color: #c8dc77; | |
} | |
@media (min-width: 767px) and (max-width: 1024px) { | |
ul.theme-colors li { | |
width: 48.22335%; | |
float: left; | |
} | |
ul.theme-colors li:nth-child(2n + 1) { | |
margin-left: 0; | |
margin-right: -100%; | |
clear: both; | |
margin-left: 0; | |
} | |
ul.theme-colors li:nth-child(2n + 2) { | |
margin-left: 51.77665%; | |
margin-right: -100%; | |
clear: none; | |
} | |
} | |
@media (min-width: 1024px) { | |
ul.theme-colors li { | |
width: 30.96447%; | |
float: left; | |
} | |
ul.theme-colors li:nth-child(3n + 1) { | |
margin-left: 0; | |
margin-right: -100%; | |
clear: both; | |
margin-left: 0; | |
} | |
ul.theme-colors li:nth-child(3n + 2) { | |
margin-left: 34.51777%; | |
margin-right: -100%; | |
clear: none; | |
} | |
ul.theme-colors li:nth-child(3n + 3) { | |
margin-left: 69.03553%; | |
margin-right: -100%; | |
clear: none; | |
} | |
} |
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
<div class="l-main-wrap" role="main"> | |
<h1>Theme Color Palettes</h1> | |
<article> | |
<p>A demo of the Sass @each directive loop for theme color palettes using Susy grids.</p> | |
<ul class="theme-colors"> | |
<li class="cp-turquoise"><span>Turquoise</span></li> | |
<li class="cp-purple"><span>Purple</span></li> | |
<li class="cp-orange"><span>Pumpkin Orange</span></li> | |
<li class="cp-green"><span>Olive Green</span></li> | |
<li class="cp-pomegranate"><span>Pomegranate</span></li> | |
<li class="cp-seafoam"><span>Seafoam</span></li> | |
<li class="cp-greengray"><span>Green Gray</span></li> | |
<li class="cp-pink"><span>Pink</span></li> | |
<li class="cp-mustard"><span>Mustard</span></li> | |
<li class="cp-surf-green"><span>Surf Green</span></li> | |
<li class="cp-maillot-jaune dark"><span>Maillot Jaune (dark)</span></li> | |
<li class="cp-caribe dark"><span>Caribe (dark)</span></li> | |
<li class="cp-chartreuse dark"><span>Chartreuse (dark)</span></li> | |
</ul> | |
</article> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment