CoralSilver’s gists

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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / .editorconfig

Created February 23, 2018 04:15

Editor Config

	# editorconfig.org
	root = true

	[*]
	indent_style = space
	indent_size = 2
	end_of_line = lf
	charset = utf-8
	trim_trailing_whitespace = true
	insert_final_newline = true

CoralSilver / using-eslint-with-prettier.md

Created March 27, 2018 14:55 — forked from yangshun/using-eslint-with-prettier.md

Comparison between tools that allow you to use ESLint and Prettier together.

	`prettier-eslint`	`eslint-plugin-prettier`	`eslint-config-prettier`
What it is	A JavaScript module exporting a single function.	An ESLint plugin.	An ESLint configuration.
What it does	Runs the code (string) through `prettier` then `eslint --fix`. The output is also a string.	Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output.	This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like `eslint-config-airbnb`.
How to use it	Either calling the function in your code or via [`prettier-eslint-cli`](https://github.co

Coral Silverman CoralSilver