Flexible style guide palette demo by the Lincoln Loop team.
Happy Friday!
Forked from Lincoln Loop's Pen Color Palette - Flexbox Friday Demo 2.
A Pen by Christopher Clarke on CodePen.
Flexible style guide palette demo by the Lincoln Loop team.
Happy Friday!
Forked from Lincoln Loop's Pen Color Palette - Flexbox Friday Demo 2.
A Pen by Christopher Clarke on CodePen.
<div class="color-list"> | |
<section class="color" style="background: hsl(4,99%,66%);"> | |
<h2 class="name">Persimmon</h2> | |
<ul class="details"> | |
<li>hsl(4,99%,66%)</li> | |
<li>#FE5E52</li> | |
<li>178 C</li> | |
<li>485 U</li> | |
<li>Primary</li> | |
</ul> | |
</section> | |
<section class="color" style="background: hsl(233,21%,56%);"> | |
<h2 class="name">Kimberly</h2> | |
<ul class="details"> | |
<li>hsl(233,21%,56%)</li> | |
<li>#777DA6</li> | |
<li>7675 C</li> | |
<li>7669 U</li> | |
<li>Primary</li> | |
</ul> | |
</section> | |
<section class="color" style="background: hsl(357,26%,42%);"> | |
<h2 class="name">Au Chico</h2> | |
<ul class="details"> | |
<li>hsl(357,26%,42%)</li> | |
<li>#874F52</li> | |
<li>4985 C</li> | |
<li>188 U</li> | |
<li>Secondary</li> | |
</ul> | |
</section> | |
<section class="color" style="background: hsl(144,33%,68%);"> | |
<h2 class="name">Shade Green</h2> | |
<ul class="details"> | |
<li>hsl(144,33%,68%)</li> | |
<li>#92C8A8</li> | |
<li>345 C</li> | |
<li>344 U</li> | |
<li>Secondary</li> | |
</ul> | |
</section> | |
<section class="color" style="background: hsl(97,62%,80%);"> | |
<h2 class="name">Tea Green</h2> | |
<ul class="details"> | |
<li>hsl(97,62%,80%)</li> | |
<li>#C5ECAC</li> | |
<li>7486 C</li> | |
<li>7486 U</li> | |
<li>Secondary</li> | |
</ul> | |
</section> | |
</div> |
/* | |
COLOR PALETTE | |
Flexbox Fridays Week 2 brought to you by team Lincoln Loop | |
https://lincolnloop.com/ | |
Inspired by this pen: | |
http://codepen.io/Nyloxz/pen/Bqpdh | |
Thanks app.coolors.co for being so awesome! | |
*/ |
body { | |
font-family: 'Open Sans', sans-serif; | |
} | |
* { | |
/* Ensure sane sizing of all elements */ | |
box-sizing: border-box; | |
} | |
.color-list { | |
display: flex; | |
/* | |
On small displays we want each .color stacked. | |
Flexbox let's us determine stacking direction via | |
flex-direction: column; | |
*/ | |
flex-direction: column; | |
height: 100vh; | |
} | |
.color { | |
/* | |
Each .color is also a flex item. We do this so that we have reasonable | |
distribution of space between elements. We use flex-direction so that | |
flexbox knows which way to position each element (in this case, vertical). | |
*/ | |
display: flex; | |
flex-direction: column; | |
/* | |
.color can grow but not shrink (we want space for first three elements). | |
10em is enough space to see name, hsl, and hex values. | |
Try shrinking vertically on a small display. | |
*/ | |
flex: 1 0 10em; | |
box-shadow: 0 0 30px #424242; | |
/* Handles any clipping/overflow issues on transition */ | |
overflow: hidden; | |
padding: 1em; | |
color: white; | |
transition: flex-basis 500ms ease-in-out; | |
} | |
.color:hover { | |
/* | |
Change the flex-basis so that we know what | |
size to transition to on hover. Arbitrary, | |
based on our design/content. | |
*/ | |
flex-basis: 20em; | |
} | |
.color:hover .details { | |
opacity: 1; | |
} | |
.name { | |
font-size: 1.2em; | |
font-weight: 600; | |
} | |
.details { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
opacity: 0; | |
transition: opacity 500ms ease-in-out; | |
} | |
.details li { | |
font-size: 1em; | |
line-height: 2em; | |
} | |
@media (min-width: 600px) { | |
.color-list { | |
/* | |
Change the direction so that each .color | |
aligns horizontally | |
*/ | |
flex-direction: row; | |
} | |
.color { | |
/* | |
No scrollbars on mobile | |
*/ | |
flex-shrink: 1; | |
} | |
} | |
/* Fonts, OK at the end for this demo! */ | |
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600); |