Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Jonathan Grupp gruppjo

🎯
Focusing
View GitHub Profile
@gruppjo
gruppjo / jsconfig.json
Last active Apr 30, 2020
[env setup]: jsconfig.json [v1.0]
View jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
}
}
@gruppjo
gruppjo / .env
Last active Apr 30, 2020
[.env setup]: .env
View .env
/* V1.1 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/d6a023802fe8705ed4e2567746fc31ee */
/* - instead of NODE_PATH this setup now uses jsconfig.json for resolving modules absolutely */
REACT_APP_API_BASE_URL= https://localhost:5000/
SASS_PATH=node_modules:src/styles-imports/
PRODUCTION=development
@gruppjo
gruppjo / _colors.scss
Last active May 10, 2020
[scss setu]: _colors.scss
View _colors.scss
/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/2b0111b865bf1d4382a3b60c4e4c7484 */
/* TODO:
- export names should start with dollar $, so in JS it's immediately obivious we are using an imported value
*/
/*
- Named after bootstrap model
https://getbootstrap.com/docs/4.3/getting-started/theming/#theme-colors
@gruppjo
gruppjo / _structure.scss
Last active Apr 30, 2020
[scss-setup]: _structure.scss
View _structure.scss
/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/09d5324b2644a9ca9dd43f5fd3cbc5ce */
// The z-index increases from top to bottom
$zLayers: (
'Buffer1',
'Buffer2',
'HomeHeader',
'MainNavigation',
'Modal'
@gruppjo
gruppjo / _structure.scss
Created Apr 30, 2020
[scss-setup]: _structure.scss
View _structure.scss
/* V1.1 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/b5c6389b1ef71369e815c95cb1b33813 */
// The z-index increases from top to bottom
$zLayers: (
'Buffer1',
'Buffer2',
'HomeHeader',
'MainNavigation',
'Modal'
@gruppjo
gruppjo / shared.scss
Last active Apr 30, 2020
[scss setup] shared.scss
View shared.scss
/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/f55ae78dbdcbd818c4345e15a210613d */
@import 'animations';
@import 'colors';
@import 'responsive';
@import 'spacings';
@import 'structure';
@import 'typography';
@gruppjo
gruppjo / storybook.scss
Last active Apr 30, 2020
global storybook scss file
View storybook.scss
@import "shared.scss";
// each component in storybook is wrapped inside of .root
#root {
// give 100% so we can have an unbroken chain of height: 100%;
// https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height
height: 100%;
}
/* STORY BOOK SPECIFIC GLOBAL STYLES */
@gruppjo
gruppjo / javascript.json
Last active Dec 11, 2020
react-snippets (function components)
View javascript.json
{
// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
@gruppjo
gruppjo / ProjectCSSTransition.js
Last active May 2, 2020
ProjectCSSTransition using global hardwired _animations.scss defaults
View ProjectCSSTransition.js
/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/3e1c33537c1f3613f04fea87dac16a36 */
import React from 'react';
import styles from 'styles-imports/shared.scss';
import { CSSTransition } from 'react-transition-group';
/**
@gruppjo
gruppjo / _animations.scss
Last active May 2, 2020
_animations.scss with global animation defaults and @mixin transition($properties...)
View _animations.scss
/* V1.2 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/b5c6389b1ef71369e815c95cb1b33813 */
$animationDuration: 300ms;
$animationDurationMs: 300;
$animationDurationShort: 150ms;
$animationDurationShortMs: 150;
$animationDurationLong: 30000ms;
$animationDurationLongMs: 30000;
$animationFunction: ease;