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.
profstein
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
profstein
/ p5.js Draw a Window with Vars.markdown
Created
October 12, 2015 17:35
p5.js Draw a Window with Vars
combining simple shapes to create a more complex one
A Pen by Christopher Stein on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| $bg-color: #ddd; | |
| .box { | |
| color: $bg-color; | |
| border:1px solid darken($bg-color, 25%); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| .container { width: 100%; } | |
| article[role="main"] { | |
| float: left; | |
| width: 600px / 960px * 100%; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| nav { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.9) | |
| // Compass (v1.0.1) | |
| // ---- | |
| $font-stack: Helvetica, sans-serif; | |
| $primary-color: #333; | |
| body { | |
| font: 100% $font-stack; |
profstein
/ breakpoint-mixin-non-map.md
Last active
August 29, 2015 14:10
Sass Breakpoint Mixin (non map version)
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.
This mixin is based on work by Hugo Giraudel http://www.sitepoint.com/managing-responsive-breakpoints-sass/. It uses Sass Maps http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps, interpolation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_ and an if..else to convert the breakpoints you enter into media queries.
You don't have to know how the mixing works exactly (although the article goes into some explanation), but you do have to know how to modify it to set your own breakpoints. Lines 10-15 show how that is done. This technique is nice in that it allows you to decide if you are going to use min-width, max-width or a combination of the two. Alternatively you could set what is given in ems here as variables and use those.