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;
}

CSS Transitions with Transforms

https://jsfiddle.net/sdfdrcw1/

<div class="box">
  Hello World
</div>

// Usage: transition <property> <duration> <timing> <delay>
.box {
  width: 150px;
  height: 150px;
  padding: 10px;
  font-size: 15px;
  background-color: red;

  transition: 
    height .5s ease, 
    width .5s ease, 
    font-size .5s ease,
    background-color 1s ease .5s,
    transform .5s ease;
}

.box:hover {
  width: 250px;
  height: 250px;
  font-size: 25px;
  background-color: orange;
  transform: rotate(180deg);
}

// Browser prefixes.
.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

Pseudo selector events

:hover
:focus
:checked

:link
:active
:visited
:disabled

CSS Animations

• Bouncing box: https://jsfiddle.net/6xc9rwx4/
• Animate border bottom on hover for nav items: https://stackoverflow.com/a/35066773

<div class="box"></div>

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;

  animation: slide-v 1s linear 0s infinite;
}

@keyframes slide-v {
  0% {
    left: 0px;
    top: 0px;
  }

  50% {
    left: 150px;
    top: 100px;
  }

  100% {
    left: 300px;
    top: 0px;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;

  /* short-hand */
  animation-name: slide-v;
  animation-duration: 1s; /* infinite */
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 4;
  animation-direction: alternate; /* forward, alternate, reverse. */

  /* end short-hand */
  animation-play-state: running; /* running, paused. */
  animation-fill-mode: forwards; /* none, forwards, backwards, both. */
}

@keyframes slide-v {
  0% {
    left: 0px;
    top: 0px;
  }

  50% {
    left: 150px;
    top: 100px;
  }

  100% {
    left: 300px;
    top: 0px;
  }
}

Animation Events: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Using_animation_events

animationstart
animationend
animationiteration

Animated nav links

.subnav__link-container {
  position: relative;
  display: inline-block;
  padding: 0.8em 0;
  text-align: center;
  width: 50%;
}

.subnav__link-container.active {
  border-bottom: 3px solid #603cba;
}

.subnav__link-container::after {
  position: absolute;
  left: 50%;
  content: '';
  height: 3px;
  background: #44d1db;
  transition: all 0.3s ease-out;
  width: 0;
  bottom: -3px;
}

.subnav__link-container:hover::after {
  width: 100%;
  left: 0px;
}

.subnav__link:first-child .subnav__link-container,
.subnav__link:first-child .subnav__link-container::after {
  border-bottom-left-radius: 4px;
}

.subnav__link:last-child .subnav__link-container,
.subnav__link:last-child .subnav__link-container::after {
  border-bottom-right-radius: 4px;
}

.subnav__link {
  color: #603cba;
  font-family: 'Walsheim';
  text-decoration: none;
}

https://css-tricks.com/box-sizing/
Adding box-sizing ignores changes to height and width by padding and border.

.div-unpadded {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div-padded {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

/* Earliest border box. */
* {
  box-sizing: border-box;
}


/* Universal border box. Difficult for "content-box" and  "padding-box" */
*, *:before, *:after {
  box-sizing: border-box;
}


/* Best practice with inheritance */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Styling input buttons with bootstrap
https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3

Bulk upload button in Methodology UI

<label className={`${classes['file-upload']} btn btn-primary`}>
  <span><FontAwesome name='upload' /> Bulk Upload</span>
  <input type='file' className={classes['upload']}
    onChange={this._bulkUpload} ref='bulk_upload'
    accept={`
      application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
      application/vnd.ms-excel
    `} />
</label>

.file-upload {
  position: relative;
  overflow: hidden;
}

input.upload {
  display: none;
}

.file-upload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

Fundamentals

Selectors

CSS Priorities

• important > inline > id > class > type

Attribute Selectors

input[name="hasDanger"][value="false"]

Image filters

It is possible to add filters to an image to match the color of a website's theme.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

blur()
brightness()
contrast()
hue-rotation()
opacity()
sepia()

Inline

.hero {
  background-image: 
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.5)
  ), url());
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

Full width hero

.full-width {
  width: 100vw;
  height: 25em;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 0 -50vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.full-width-content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

Pseudo Elements

.hero {
  position: relative;
  height: 320px;
  border-radius: 4px;
  color: #fff;
  padding: 32px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 0 12px 0 rgba(105, 54, 206, 0.08);
}

.hero::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  content: "";
}

CSS Hacks and Tricks

Transparent Border

When hovering over elements and adding a border, you should default to a transparent border.

button {
  border: 2px solid transparent;
}

button:hover {
  border-color: black; 
}

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)};
  }
}