Skip to content

Instantly share code, notes, and snippets.

@danny-englander
Created October 1, 2014 02:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danny-englander/f021c1007a556828ce06 to your computer and use it in GitHub Desktop.
Save danny-englander/f021c1007a556828ce06 to your computer and use it in GitHub Desktop.
Sass Color Palettes using @each directive loop and Susy grids.
<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>
// ----
// 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);
}
}
}
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;
}
}
<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