jasonmelgoza

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}

@supports not (gap: 1em) {
  .flex-container {
    margin: -0.5em;

jasonmelgoza

%button-reset {
  width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  font: inherit;
  line-height: normal;
  color: inherit;
  text-decoration: none;
  text-transform: none;

jasonmelgoza

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

jasonmelgoza

// lists
$widths: 0, 1, 2, 3, 4;

@each $width in $widths {
  .bw#{$width} {
    border-width: #{$width}px !important;
  }
}

jasonmelgoza

// lists
$directions: (
  "t": top,
  "r": right,
  "b": bottom,
  "l": left
);

// borders
.ba {

jasonmelgoza

//
// Spacing Utilities
//

// Spacing System
//

$space-unit: 4px;

$space-2xs:  $space-unit;      // 4px

jasonmelgoza

$gray-50:  #999;
$gray-100: #888;
$gray-200: #777;
$gray-300: #666;
$gray-400: #555;
$gray-500: #444;
$gray-600: #333;
$gray-700: #222;
$gray-800: #111;
$gray-900: #000;

jasonmelgoza

$gray-50:  #555;
$gray-100: #000;
$gray-200: #000;
$gray-300: #000;
$gray-400: #000;
$gray-500: #000;
$gray-600: #000;
$gray-700: #000;
$gray-800: #000;
$gray-900: #000;

jasonmelgoza

/// Flex sass mixin
///
///   // Example
///   .element {
///     @include flex($align-items: center, $justify-content: center);
///   }
///
///   // CSS Output
///   .element {
///     background-color: #664a20;

jasonmelgoza

//
// Spacing Utilities
//

// Spacing System
//

$space-unit: 4px;

$space-xxs:  $space-unit;      // 4px