profstein

p5.js Draw a Window with Vars

combining simple shapes to create a more complex one. This time using variables to make the drawing more understandable and flexible.

A Pen by Christopher Stein on CodePen.

License.

p5.js Draw a Window

combining simple shapes to create a more complex one

A Pen by Christopher Stein on CodePen.

License.

This is similar to the breakpoint-mixin I created but that requires you to use a version of Sass that understands Maps. If that is causing errors then you can use this mixin. It's not quite as flexible but has a simlar syntax.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Candidates for 2016 Elections</title>
	</head>
	<body>
	Candidates for the 2016 Elections

	This page lists candidates for state and federal elections for the districts that serve the part of Manhattan where the Borough of Manhattan Community College is located.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Window</title>
	</head>
	<body>
	<h1>Assignment of window</h1>
	<script src="p5.min.js"></script>
	<script src="main.js"></script>

	// ----
	// Sass (v3.4.9)
	// Compass (v1.0.1)
	// ----

	$bg-color: #ddd;

	.box {
	color: $bg-color;
	border:1px solid darken($bg-color, 25%);

	// ----
	// Sass (v3.4.9)
	// Compass (v1.0.1)
	// ----

	@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;

	// ----
	// Sass (v3.4.9)
	// Compass (v1.0.1)
	// ----

	.container { width: 100%; }

	article[role="main"] {
	float: left;
	width: 600px / 960px * 100%;

	// ----
	// Sass (v3.4.9)
	// Compass (v1.0.1)
	// ----

	$font-stack: Helvetica, sans-serif;
	$primary-color: #333;

	body {
	font: 100% $font-stack;