Closed maiamachine closed 9 years ago
Hi Maia!
Thank you so much for submitting to SassConf this year!
Unfortunately, we weren’t able to select your talk.
We had an incredible number of submissions this year: 81, in fact, enough to fill up over two weeks of Sassy goodness! But we only have two days, and we couldn’t pick everything.
If you have any questions at all about our selection process, your submission, or anything else at all, please reach out: elyse@sassconf.com and I’ll gladly give you more details.
Again, thank you for submitting. It’s people like you, who are willing to put themselves out there and work hard and submit and give talks that make it possible to even have SassConf. I hope you will submit again next year and continue to be part of the Sass community!
See you in November!
Color Harmony with Code
Type of Presentation (required)
[ x ] Standard Length Talk [ x ] Lightning Talk [ ] Workshop [ ] Moderated Discussion
Description (required)
This talk will be about color, and specifically how you can achieve color harmony using CSS, Sass, and a little bit of math.
I am not a designer but I love design and the part of design that has always impressed me the most is color. The way that designers, artists, and illustrators are able to take a flat white space, or in the case of the browser a glowing white rectangle, and turn it into something with depth and emotion has always impressed me. Since I'm a front-end developer and not a designer, I wanted to find a way to create harmonious color palettes using the tools that I'm most familiar with: CSS, Sass, and JavaScript. Fortunately for anyone who has studied basic color theory, there are some rules you can follow which can make achieving color harmony a bit easier for us non-designers. Even better, there are developer tools that can be leveraged to make finding the right color as easy as typing in some code.
Here is what I would like to cover in more detail:
-Color Harmony Overview: quick overview of the basic rules for selecting harmonious colors such as complementary colors, split complementary colors, tetrads, analogous colors.
-HSL vs RGB vs HEX: Overview of the difference between these CSS color values, and explanation of how using the CSS3 HSL (hue, saturation, lightness) color value can help to more closely align code with the traditional color wheel -Manipulating Color with Sass: Using Sass to lighten, darken, saturation, or desaturate a color -Rotating the Color Wheel Code: Using CSS, Sass, and the amazing color-schemer toolset to rotate around the color wheel and pick a color's complement, split complement, analogous neighbor. -Easier Form Colors: Set one basic color for a success message (green) and generate the colors for other error and warning messages using Sass. -Fun Color Functions: A few things that aren't practical but are fun, such as using the random function in Sass to create random colors
Here are some exmaples of my work which show these concepts in action:
Here is some of the code examples I would show:
.classname {background-color:hsl(0,100%,50%);}
.classname {background-color: ryb-adjust-hue(#FF000, 30);}
.classname {background-color: ryb-adjust-hue(#FF000, 180);}
.classname {background-color: rgb(random(255), random(255), random(255));}
Speaker Info (required)
Social Media:
Bio:
I am a front-end developer with a passion for beautiful design. I enjoy using code to express my creativity. I also build large scale web applications for clients using HTML5, CSS3, SASS/LESS, JavaScript, AngularJS, JQuery, and more. Before becoming a developer I was a technical project manager for 6 years on all types of projects at a variety of different companies. It was a love for Flash animation that originally got me interested in becoming a developer and I'm still having so much learning in this exciting field.
Photo: