Greg Whitworth gregwhitworth

## custom-props-set-property.js
var myComponent = document.getElementsByClassName('my-component')[0];
myComponent.style.setProperty('--primary', 'green');

## custom-props-scoping.css
body {
  --primary: blue;
  background: var(--primary);
}

.my-component {
  --primary: yellow;
  background: var(--primary);
}

## custom-props-animate.css
div {
  --pos: 0;
  left: var(--pos);
  animation: move 1s;
}

@keyframes move {
  to {
    --pos: 50px;
  }

## custom-props-feature-detection-2.css
:root {
  --foo: true;
}

body {
  background: red;
}

@supports(--foo: false) {
  body {

## custom-props-feature-detection.css
body {
  background: red;
}

@supports(--foo: blue) {
  body {
    background: green;
  }
}

## custom-props-invalid.css
div {
  --primary: blue;
  margin-top: var(--primary, 12px);
}

## creating-fallbacks.html
<!doctype html>
<html>
<head>
    <title>Fallbacks!!!</title>
    <style>
    #test {
        width: 100px;
        height: 100px;
        background: red;
    }

## css-grid-3-by-three.css
.puzzle-game {
	display: grid;
	grid-area: game;
	align-self: start;
	justify-self: center;
	max-width: 35vw;
	border: 10px solid cornflowerblue;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	background: rgba(0, 0, 0, .5);
}

## css-grid-example-of-longhands.css
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;

## index.html
<p>Variable Fonts</p>
	var myComponent = document.getElementsByClassName('my-component')[0];
	myComponent.style.setProperty('--primary', 'green');
	body {
	--primary: blue;
	background: var(--primary);
	}

	.my-component {
	--primary: yellow;
	background: var(--primary);
	}
	div {
	--pos: 0;
	left: var(--pos);
	animation: move 1s;
	}

	@keyframes move {
	to {
	--pos: 50px;
	}
	:root {
	--foo: true;
	}

	body {
	background: red;
	}

	@supports(--foo: false) {
	body {
	body {
	background: red;
	}

	@supports(--foo: blue) {
	body {
	background: green;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Fallbacks!!!</title>
	<style>
	#test {
	width: 100px;
	height: 100px;
	background: red;
	}
	.puzzle-game {
	display: grid;
	grid-area: game;
	align-self: start;
	justify-self: center;
	max-width: 35vw;
	border: 10px solid cornflowerblue;
	grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
	background: rgba(0, 0, 0, .5);
	}
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;