CSS Recipe Book

receipe.scss

// Fix pixelated images and svg by removing this line.
svg,
img {
  image-rendering: -webkit-optimize-contrast;
}

// Spinning React logo
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// Fancy box shadow
div {
  box-shadow: 0 20px 7px -18px rgba(0, 0, 0, .3);
}

// Dynamic widths based on the number of children.
div:first-child:nth-last-child(1) {
  width: 100%;
}

div:first-child:nth-last-child(2) {
  width: 82%;
}

div:first-child:nth-last-child(2) ~ div {
  width: 18%;
}

@for $i from 1 through 4 {
  li:first-child:nth-last-child(#{$i}),
  li:first-child:nth-last-child(#{$i}) ~ li {
    width: 100% / #{$i} 
  } 
}

recipe.css

// CSS modules composition: https://github.com/css-modules/css-modules
.image {
  width: 50px;
  border-radius: 3px;
}

.squareImage {
  composes: image;
  border-radius: 0;
}


// Scalable and responsive cover image.
.responsive-cover-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}


// Responsive images that scale up to their natural width without stretching.
.responsive-image {
  width: 100%;
  max-width: 100%;
}


// Prevent inline block items from wrapping.
nav > ul { 
  white-space: nowrap;
}

nav > ul > li {
  display: inline-block;
  float: none;
  margin: 0 -3px 0 0;
}

Flexbox 3 cols desktop to 1 col mobile

.box-container {
  margin-top: -5em;
  display: flex;
  text-align: center;
  box-shadow: 0 0 0.75em 0 rgba(105, 54, 206, 0.08);
}

.box {
  flex-basis: 100%;
  min-height: 8em;
  border: 1px solid #eee;
  background: #fff;
  padding: 1em;
}

.box:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.box:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

@media only screen and (min-width: 767px) {
  .box:first-child {
    border-right: 0;
  }

  .box:last-child {
    border-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .box-container {
    flex-direction: column;
  }
  .box:not(:first-child) {
    border-top: 0;
  }
  .box:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
  }
  .box:last-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

Global SCSS

/****************************************************************
* GLOBAL DEFINITIONS
****************************************************************/
$white:  #fff;
$gray-f: #f1f1f1;
$gray-e: #eee;
$gray-d: #ddd;
$gray-c: #ccc;
$gray-b: #bbb;
$gray-a: #aaa;
$gray-9: #999;
$gray-8: #888;
$gray-7: #777;
$gray-6: #666;
$gray-5: #555;
$gray-4: #444;
$gray-3: #333;
$gray-2: #222;
$gray-1: #111;
$gray-0: #080808;
$black:  #000;


// Reusable color palette classes.
$green: #a0cd55;
$blue: #3c94d1;
$purple: #534768;
$maroon: #42213D;
$light-purple: #EBE1FC;
$yellow: #FCF8E3;
$orange: #f5814c;
$pomegranate: #bf4498;

// Reusable color palette classes.
$css-color-classes:
  'green' $green,
  'blue' $blue,
  'purple' $purple,
  'maroon' $maroon,
  'light-purple' $light-purple,
  'yellow' $yellow,
  'orange' $orange,
  'pomegranate' $pomegranate;

// Creates the classes: '.text-green', '.bg-green' etc.
@each $color-tuple in $css-color-classes {
  .text-#{nth($color-tuple, 1)} {
    color: #{nth($color-tuple, 2)};
  }

  .bg-#{nth($color-tuple, 1)} {
    background-color: #{nth($color-tuple, 2)};
  }
}