Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Jason Melgoza jasonmelgoza

🏠
Working from home
View GitHub Profile
View button-reset.scss
%button-reset {
width: auto;
padding: 0;
margin: 0;
overflow: visible;
font: inherit;
line-height: normal;
color: inherit;
text-decoration: none;
text-transform: none;
@jasonmelgoza
jasonmelgoza / GIF-Screencast-OSX.md
Created Feb 22, 2021 — forked from dergachev/GIF-Screencast-OSX.md
OS X Screencast to animated GIF
View GIF-Screencast-OSX.md

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.

Screencapture GIF

Instructions

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

@jasonmelgoza
jasonmelgoza / input.scss
Created Feb 5, 2021
Generated by SassMeister.com.
View input.scss
// lists
$widths: 0, 1, 2, 3, 4;
@each $width in $widths {
.bw#{$width} {
border-width: #{$width}px !important;
}
}
@jasonmelgoza
jasonmelgoza / input.scss
Created Feb 5, 2021
Generated by SassMeister.com.
View input.scss
// lists
$directions: (
"t": top,
"r": right,
"b": bottom,
"l": left
);
// borders
.ba {
@jasonmelgoza
jasonmelgoza / input.scss
Created Feb 5, 2021
Generated by SassMeister.com.
View input.scss
//
// Spacing Utilities
//
// Spacing System
//
$space-unit: 4px;
$space-2xs: $space-unit; // 4px
@jasonmelgoza
jasonmelgoza / input.scss
Created Jan 27, 2021
Generated by SassMeister.com.
View input.scss
$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
jasonmelgoza / input.scss
Created Jan 27, 2021
Generated by SassMeister.com.
View input.scss
$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
jasonmelgoza / input.scss
Created Sep 30, 2020
Generated by SassMeister.com.
View input.scss
/// Flex sass mixin
///
/// // Example
/// .element {
/// @include flex($align-items: center, $justify-content: center);
/// }
///
/// // CSS Output
/// .element {
/// background-color: #664a20;
@jasonmelgoza
jasonmelgoza / input.scss
Created Sep 29, 2020
Generated by SassMeister.com.
View input.scss
//
// Spacing Utilities
//
// Spacing System
//
$space-unit: 4px;
$space-xxs: $space-unit; // 4px
View Layout.jsx
<Box
p="0"
w="100%"
h="100%"
bg="white"
d="flex"
flexDirection="column"
flex="0 0 auto"
>
<Box w="100%" h="50px" p="20px" bg="#333943" d="flex" flex="0 0 auto" />