CoralSilver’s gists

CoralSilver / Flex.js

Created January 19, 2018 21:40

Flex react component

	import React from 'react';
	import PropTypes from 'prop-types';
	import { themr } from 'react-css-themr';
	import classnames from 'classnames';
	import { FLEX } from '../identifiers';

	const Flex = ({
	alignContent,
	alignItems,
	children,

CoralSilver / screenreader.scss

Created January 4, 2018 21:44

CSS to hide content visually but still make it accessible to screen readers

	// Only display content to screen readers
	//
	// See: http://a11yproject.com/posts/how-to-hide-content/
	// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

	.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;

CoralSilver / RandomID.js

Last active September 18, 2024 05:46

RandomID - a unique ID/name generator for JavaScript

	// Generate unique IDs for use as pseudo-private/protected names.
	// Similar in concept to
	// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
	//
	// The goals of this function are twofold:
	//
	// * Provide a way to generate a string guaranteed to be unique when compared
	// to other strings generated by this function.
	// * Make the string complex enough that it is highly unlikely to be
	// accidentally duplicated by hand (this is key if you're using `ID`

CoralSilver / reset.css

Created October 25, 2017 14:54

Reset

	/* reset */
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strong, sub, sup, var,
	b, u, i, dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,

CoralSilver / config.js

Last active July 10, 2021 13:37 — forked from vernondegoede/config.js

Storybook config with ThemeProvider

	// File: .storybook/config.js

	import { configure, addDecorator } from '@kadira/storybook';
	import Theme from './../src/ui/theme';
	import React from 'react';
	import { ThemeProvider } from 'styled-components'

	function loadStories() {
	require('../stories');
	}

CoralSilver / Toggle.scss

Created August 15, 2017 21:20

Simple React dumb toggle checkbox

	@import '~shared/sass/base/variables';

	.switch-title {
	font-weight: $bold;
	margin-bottom: 6px;
	}

	.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);

CoralSilver / gulpfile.js

Created April 18, 2017 23:29

	var gulp = require('gulp');
	var sass = require('gulp-sass');
	var prefix = require('gulp-autoprefixer');
	var bourbon = require('node-bourbon');
	bourbon.includePaths
	var imagemin = require('gulp-imagemin');
	var merge = require('merge-stream');
	var sourcemaps = require('gulp-sourcemaps');
	var notify = require('gulp-notify');
	var browserSync = require('browser-sync').create();

CoralSilver / index.html

Created April 18, 2017 01:54

HTML Starter Template with ARIA Roles

	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>HTML Page Template</title>
	<link href="css/main.css" rel="stylesheet">
	</head>
	<body>

CoralSilver / Button css

Created March 26, 2017 20:44

CoralSilver / closure.js

Last active March 12, 2017 03:09

Increment function using closure

	function makeIncrementer(x) {
	return function() {
	return x++;
	};
	}

	var increment = makeIncrementer(0);

	console.log(increment()); //0
	console.log(increment()); //1

Coral Silverman CoralSilver