Almost Profound

code { box-sizing: border-box; color: #19A89D; background: #F7F7F7; padding: 0.2em; border-radius: 5px 10px; }

The keyboard, where our hands are placed most of the time (as developers), is the fastest navigation method by default. I always think devs look so slick and badass when navigating their systems without touching their trackpad/mouse. They're like little ninjas -- slick, fast and know how to move with ease.

If you're not convinced yet, let's break it down:

Performance optimization — you care about it on your projects. Why not care about it in your workflow?

Switching between tabs and windows and a keyboard and mouse is clunky and error-prone and fumbly. Like runon sentances.

You'll look like you know what you're doing. (Isn't that reason enough? :P)

The Sticky Note Method

If you want to become a keyboard ninja, try putting a sticky note (or two) on the top of your trackpad. Why? because a few things:

It will remind you not to use it, causing you to Google alternative navigation flows (you'll learn a lot this way)

You can still easily access the trackpad by simply lifting the sticky note from below or on the edge (where you'd be accessing it anyway)

Make sure to write down new shortcuts you learn on that sticky note — use a felt tip pen so you don't need press too hard and accidentally click on something.

When you've covered your sticky with shortcut reminders, put it somewhere visible for a while (i.e. next to your track pad on your laptop or on your desk). Soon, you'll have a great collection of shortcuts you find useful, and will quickly memorize them!

To use this method with a mouse — not a track pad — put the sticky underneath the mouse to disable the motion sensor. You'll need a separate sticky to write new commands down on.

A few Things I've learned:

cmd + w closes a tab (general rule)

ctrl + tab navigates my tabs (general rule)

Use the terminal to make and navigate files

cmd + shift + p in Sublime Text (and Atom Editor) and you can probably do anything you need from there

just cmd + p in Sublime Text (and Atom Editor) and you can fuzzy search for any file in your project

Fuzzy search is your friend

Navigate the Sublime Text (and Atom) sidebar with cmd + 0 to focus on the sidebar, and your arrow keys. Enter will open the file. (see plugin below for more fun)

Some Tools to Help!

Download Alfred to help your workflow out a TON. Alfred is a great tool for navigating not only your applications but also acts as an awesome quick Google search tool. HIGHLY Recommend for future keyboard ninjas!

There's a great Sublime Text plugin that will help you focus on which file you have open. Type cmd + k, cmd + f to open the sdiebar right to the directory of the current file.

*TIP: when first practicing moving files in terminal, have a text editor with a sidebar open (cmd + k, cmd + b) so you can visually see the changes. This is also a great way to illustrate how git works. *

More Fun Resources

Chrome Shortcuts

Sublime Text Shortcuts

Getting Started with Terminal

How to Become an ST2 Power User w/@wesbos Slides

Become an Alfred Expert

General Table of Keyboard Shortcuts

Keyboard Shortcuts for Bash

code { box-sizing: border-box; color: #19A89D; background: #F7F7F7; padding: 0.2em; border-radius: 5px 10px; }

Media queries are infants. The first Media Query public working draft was published in 2001, and they became a W3C recommendation after browser support increased in 2012. 2012! That's TWO years! Hard to believe, considering how essential they've become in our web workflows today. Media queries are most often used to build flexible web designs which adapt to various browsers properties. Here are some pointers from the smart people at Google.

Media Query Capabilities

If you're familiar with building responsive websites, you're probably familiar with something like: @media screen and (max-width: 700px), but did you know that you can use media queries to specify how to handle paged braille printers or TVs or how to use logic in your media queries? Yeah, they're pretty rad.

Here's a list of current media types you can target:

all — all the media types below

braille* — braille tactile feedback devices

embossed* — paged braille printers

handheld* — handheld devices like mobile phones

print — printed material

projection* — projected presentations

screen — color computer screens

speech — speech synthesizers

tty* — teletypes, terminals, and other devices with limited display capabilities

tv* — televisions and television like devices

NOTE: (asterisk = they are deprecated as media types, but can be used similarly as media features -- read on)

And this is what you can specify (expressions) for each of those media types:

width — width of the current window

height — height of the current window

device-width — width of the device

device-height — height of the device

orientation — either landscape or portrait

aspect-ratio — aspect ratio of the current window

device-aspect-ratio — aspect ratio of the device

color — number of color bits per color component

color-index — number of available colors on the device

monochrome — number of bits per pixel in a monochrome frame buffer

resolution — resolution of the device

scan — either progressive or interlace

grid — is the device grid-based?

This list was stolen from here, by the way.

Responsive Beyond the Browser Size

Media queries are most often used for their screen size properties to allow for "Responsive Web Design", or RWD. But viewing "responsive design" as just a means for detecting screen sizes and browsers is narrow-minded. Responsive principles go far past the browser and stretch into the real world — how can the products we design respond to a users location, or the weather, or the lighting? How can we really personalize experiences for our users?

Well media queries are helping us get one step closer! As devices are able to detect more, browsers are keeping up to date with these capabilities.

The Future of Media Queries

The Media Queries 4 spec brings insight to technological capabilities that are coming up soon (this is based on the Editor’s Draft, October 10, 2014).

Media Features vs Types

*One important distinction to note is that all of the media types listed above will eventually become deprecated and replaced with more specific media features *

Media features are always wrapped in parentheses and combined with the and keyword rather than being separated with semicolons.

Here's an example from the spec:

(color) and (min-width: 600px)

@media (light-level) : dim | normal | washed

The light-level media feature is for detection ambient lighting. (Ambient is such a fun word).

Values:

dim — lighting in a dim environment (i.e. nighttime)

normal — lighting in the "ideal screen range"

washed — lighting in an overly bright environment (i.e. broad daylight)

Here's an example:

// change text coloring due to lighting for better legibility @media (light-level: dim) { body { background: dimgrey; color: white; } } @media (light-level: washed) { body { background: white; color: black; font-size: 2em; } }

@media (pointer) : none | course | fine

The pointer media feature detects the presence and accuracy of a pointing device.

Values:

none — there is no pointing device present (i.e. TV, printer)

course — the primary input mechanism is of limited accuracy (i.e. Nintendo Wii, Kinect, Google Glass)

fine — the primary input mechanism is an accurate pointing device (i.e. stylus, mouse, touchpad)

Here's an example:

// Make input larger for inaccurate pointing devices @media (pointer:coarse) { input[type="text"] { font-size: 3em; padding: .5em; } }

@media (hover) : none | on-demand | hover

The hover media feature detects the ability of the primary pointing mechanism to hover over elements.

Values:

none — there primary pointing mechanism can't hover

on-demand — the user can hover but it requires significant action (i.e. touch screens)

fine — the primary pointing system can easily hover

* If different input devices have different characteristics, there are also any-pointer and any-hover media features

Here's an example:

//If hover is difficult, display the menu differently @media (hover:none) and (hover:on-demand) { .menu { display: block; position absolute; ... } }

@media (update-frequency) : none | slow | normal

The update-frequency media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered.

Values:

none — once rendered, the layout will not update (i.e. printed materials)

slow — the layout may change dynamically but not smoothly (i.e. e-ink displays)

normal — the output device is not constrained

Here's an example (stolen right from the spec):

//If a page styles its links to only add underlines on hover, it may want to always display underlines when printed: a { text-decoration: none; } a:hover, a:focus { text-decoration: underline; } @media (update-frequency: none) { a { text-decoration: underline; } }

@media (scripting) : none | initial-only | enabled

The scripting media feature detects whether or not Javascript is enabled in the browser.

Values:

none — scripting is not supported by the user agent, or innactive

enabled — scripting is supported and active

initial-only — scripting is supported on initial page load, but not afterwards

This section also borrowed heavily from the these slides, which break down the information from the spec really well.

Keeping Your Sass Squeeky Clean with Adam Onishi (@onishiweb)

CSS Grids

Sass for IE

Breakup Sass Components

Extends

We Are Architecht Front End BoilerPlate

Idiomatic CSS Guidelines

Idiomatic Sass Guidelines

We Are Architecht Guideline

Causes Linters

unCSS

Grunt ucss

Shame.css

Autoprefixer

Multiple Stylesheets

Talk Slides

Building an Artful Web with Smith Schwartz (@smithschwartz)

Andy Goldsworthy Rain Shadows

Wolf Kahn

Art & Fear Book

Owl Rat

Talk Slides

Tab Atkins Keynote on the Future of CSS (@tabatkins)

:matches pseudoclass

CSS Extensions

Selectors Level 4

Responsive Images Community Group

Talk Slides

Spreading the Sass Love with Una Kravets (@una)

Sass Bites Podcast

Sass News Sign Up

nvite

Meetup

Talk Slides

Sassy Colors with Katie Kurkoski (@KatieK2)

Lab Index

Mountains Example

Boat Example

Why Use Mix instead of Lighten/Darken

Talk Slides

Style as a Service: Maintaining Style Across Multiple Websites with Shay Howe (@shayhowe)

Belly Rolodex

Talk Slides

Future Tools: Beyond Live Style Guides with Adam Detrick (@akdetrick)

Sassquatch

Hologram

Meetup Swatches

Bower

Making Meetup

Thinking (Inside the Box)x3 with Mason Wendell (@codingdesigner)

Typecast

Sassy Modular Scale

Modular Scale

Color Schemer

Pattern Lab

Singularity

Breakpoint

Talk Slides

Refactoring Workshop (@elyseholladay and @gina)

Workshop Files

Pragmatic Font Sizing

Sassy Starter

Grunt CSS Comb

Gulp CSS Comb

Workshop Slides

UI Regression Workshop (@klamping)

Workshop Files

Optimising the Critical Rendering Path with Patrick Hamann (@patrickhamann)

Workshop Page

Expanding Your Sass Arsenal with Anthony DiSpezio (@adispezio)

Workshop Slides

Around the Web

Lighten & Darken vs. Mix from @flipstewart

Tinting & Shading by @scottkellum

LibSass

Style Stats

Learn to Code HTML & CSS

Color Oracle

Unconference Sessions

Eric Suzanne -- Map Magic

Eric Suzanne -- Map Magic Demo

Scott Kellum -- Grid Demo #1

Scott Kellum -- Grid Demo #2

Scott Kellum -- Grid Demo #3

Beautiful Open

Now, more than ever, I'm seeing animated gifs pop up more and more. I think it's fantastic. They're all over Dribbble (now featuring a little gif badge!), in conference talks, on social media, and in case studies on agency websites. The animated gif is a great way to display interactivity. [THIS](https://www.behance.net/gallery/VICE-VERSA-diagonal-UI-optimized-for-a-single-hand-IX/12419409) site is my favorite recent gif-using creation, and I'm so excited to see them taking off for uses other than rainbow unicorns (RIP Geocities) and funny memes.  ## A Professional Use ### Demonstrations / Instructionals Gifs can be used in a very silly manner, or as a simple means of demonstration. For instance, they can be used to mimic the effect on the [Sublime Text](http://www.sublimetext.com/) homepage. Demonstration goes beyond just technical means you would see online. A physical product is much better understood when animated, such as in this example:  ### Case Studies I've used gifs in a lot of the case studies I included on my new portfolio website. They're a great way of demonstrating prototypes and interactive elements. Here's a great example from Viget, from their [Bill of Rights](http://viget.com/work/bill-of-rights-institute) case study. ### Email Marketing Look! It's an animated email by [Tiffany's](http://cps8.00b.net/506/content_load/2007-10-08/index.htm). It's a subtle effect, just text moving around, but it does make an impact. I'd like to stress subtlety when using gifs in emails. Gif Brewery even wrote a handy [Guide to Animated Gifs in Email](https://litmus.com/blog/a-guide-to-animated-gifs-in-email). ### Detail Work Animated gifs and flow smoothly and quietly into the background of your webpage. On this [really awesome New Years site](http://www.tasarimgezegeni.com/2014/en/), there's a little fireplace that burns in the background. It's a nice little touch which goes a long way. ### Fine Art Artists like [Paolo Ceric](http://patakk.tumblr.com/about) use gifs as an art medium, and look an [entire animated sketchblog!](http://animatedsketchblog.tumblr.com/).  ## Tools of the Trade ### Photoshop This program has been used for making animated gifs since CS2. (Does anyone remember Jasc Animation Shop?!). The good thing about Photoshop is that you have the power to edit each frame (go to Window > Timeline to open the edit screen), and control the playback timing of your gif upon saving. Make sure to "Save for Web" as a gif and pay attention to the bottom right part of the save screen. This is where you'll specify looping options.  Creating gifs in Photoshop is a great tool if you want to illustrate a point, or animate your project directly. It's also a good place to post-edit your gifs created by other means (see tools below). [This](http://boagworld.com/design/practicalities-of-using-animated-gifs/) is great article on how to optimize your gifs in Photoshop. ### LiceCap [LiceCap](http://www.cockos.com/licecap/) is a wonderful free software tool for Windows or Mac which allows you to simply screen capture and save as a gif. You can control the size ( viewing area when "filming") and the frames per second. Then you simple hit record, and the program acts as a frame, capturing whatever is behind it.  ### GIFBrewey There are a few free services online which convert files to gifs, but they take FOREVER and return a poor quality. Well, [GIFBrewery]("https://itunes.apple.com/us/app/gif-brewery/id435989461?mt=12) is the solution to that on a Mac. It costs $4.99 from the App Store, but got great reviews, and is a simple-to-use tool for converting movie clips into high quality gifs.  ## A Tradeoff I recently had to work with animated gifs for a prototype project -- I was using video on an iPhone's mobile web browser (web app) to simulate the camera function but with my own overlay. So what I needed to do was, film a scene on the iPhone, and re-inact it in real life. The thing is, however, iPhone's film mov movies. And since iOS 6, auto play of movies is disabled on the iPhone. This is great from a user's standpoint, and avoids downloading large movie files to stream, taking up data without permission. But, for my needs it became an issue. I ended up converting the mov files to gifs and using them behind my other elements as faux backgrounds. (It was quite the process, and you can read more about it [here](http://unakravets.com/fruit-story/).

move (563 kb)

gif (5.8 mb)

There is a distinct loss in quality of the gif file. Not only that, but the gif file size is actually about 4x LARGER than the mov. (563 kb vs 5.8mb). There are definitely tradeoffs when it comes to using animated gifs, so be sure to consider your audience.

h4 { margin-bottom: -0.7em; }

The Basics

So, what is the Sass &? Well, it's a lot of things -- but it's basically is a way to merge selectors. The parent element takes the place of the ampersand. The best way to understand it is to see some examples:

SCSS

.unicorn { background-color: blue; &:hover { outline: 2px solid yellow; } &.pink { background-color: pink; &wat { color: red; } &:hover { outine: 2px solid green; } } }

CSS Output

.unicorn { background-color: blue; } .unicorn:hover { outline: 2px solid yellow; } .unicorn.pink { background-color: pink; } .unicorn.pinkwat { color: red; } .unicorn.pink:hover { outine: 2px solid green; }

See how it just combines whatever phrase you insert after the & directly onto the end of its parent. This is great for element states such as hovers, and for focusing on specific elements. It works with pretty much anything now (as of the 3rd release candidate of Sass 3.3) (i.e. .unicorn { &wat { ... } } became .unicornwat { ... }. It's a great too for BEM syntax (see 'A Much Simpler @at-root')!

The Trailing Ampersand

The trailing ampersand does the same thing as the prepended one -- it switches out with the parent element when outputted. Why would you use one? Well its a great organizational tool, and its awesome to use in mixins. Here are a few examples:

SCSS

.unicorn { .set-one & { display: none; } } .button--large { .sidebar & { font-size: 80%; } }

CSS Output

.set-one .unicorn { display: none; } .sidebar .button--large { font-size: 80%; }

Another use for the trailing ampersand is in mixins. It would take the parent element (aka whatever you use the mixin on) in place of the ampersand. Joel Oliveira wrote an awesome example. Here's another one:

SCSS

@mixin highlight() { color: coral; .sub-nav &, .active &, .sidebar & { background-color: gold; } } li a { @include highlight; }

CSS Output

li a { color: coral; } .sub-nav li a, .active li a, .sidebar li a { background-color: gold; }

In this example, all of your list links are coral with no background color except for ones within your 'sub-nav' class, 'active' class, or 'sidebar' -- they get a gold background.

A Much Simpler @at-Root

As mentioned earlier, the Sass Ampersand just got even cooler. With the recent release of Sass 3.3.0rc3, basically everything from this post on BEM & at-root outdated (however, @at-root will still be usable in the release of Sass 3.3). The concepts are the same, but now, instead of prepending with @at-root #{&}, one simply needs to use a &- or &_. **Previously, &- or &_ or even &words would cause error, but this fix is really awesome :)

Previous Markup (Sass 3.3rc1)

.speech-bubble{ color: purple; @at-root #{&}__header{ color: orange; } @at-root #{&}__text{ color: black; @at-root #{&}--link{ color: green; } } }

New Markup (Sass 3.3rc3)

.speech-bubble{ color: purple; &__header{ color: orange; } &__text{ color: black; &--link{ color: green; } } }

The result (CSS Output)

.speech-bubble{ color: purple; } .speech-bubble__header{ color: orange; } .speech-bubble__text{ color: black; } .speech-bubble__text--link{ color: green; }

Scott's Post is another great read on this topic.

The Double Ampersand

This fun trick by Guil Hernandez of Treehouse, is also pretty cool. He combines ampersands with the CSS adjacent sibling combinator -- aka the +. The + is used to target an element’s immediate sibling (i.e. an image or subtitle immediately following an h1). For instance, you can use this in styling blog posts -- where that first image could always be the author, and may need its own unique style.

My favorite example of his is for columns. If you have two, using the double ampersand can really come handy.

SCSS

.column--half { color: dimgrey; & + & { margin-left: 30px; } }

CSS Output

.column--half { color: dimgrey; } .column--half + .column--half { margin-left: 30px; }

This gives both of the 'column--half' class elements the same color (dimgrey), but only the second 'column--half' element will get the left margin. The first one will flush left of the page.

Analogies always help me with comprehension. And this one, explaining git, is Holiday Flavored :)

So, lets say you are making holiday gifts. You and your sibling want to make baskets for your friends and family, filled with homemade cookies, candy, and trinkets.

Baking the cookies is you doing your work. When you're finished baking them, you can add them to your basket (git add).

You can also remove(git rm) cookies or rearrange them. The basket is your staging area.

A git merge occurs when you add the brownies that your brother has been baking to the basket.

When you commit (git commit), you are wrapping up the basket with a pretty bow and a nice holiday card (your commit message).

You can do a git rebase to correct any errors. Say you forgot to add the candy canes! A rebase is when you unwrap the gift, change something in it, and rewrap it with a new bow and message.

A git push is when you are giving the basket away to your Mom or other recipient, and git clone is a whole other story. It is taking a finished set of baskets and making a perfect copy of it.

We'll leave that kind of magic to Santa.

Happy Holidays!!

Last month, I wrote a little article about the new Sass 3.3 feature @root. That was a lot of fun to explore -- and now I want to focus on another sweet feature in Sass 3.3 -- MAPS!

HERE'S A LIVE DEMO OF WHAT I'M ABOUT TO WALK YOU THROUGH

To do this, we must first install Sass 3.3:

gem install sass --pre

Then, we mark up our HTML:

<ul class="color-list"> <li class="color-box brick-red"></li> <li class="color-box strawberry"></li> <li class="color-box deep-orange"></li> <li class="color-box tangerine"></li> <li class="color-box gold"></li> <li class="color-box sunshine"></li> <li class="color-box grass-green"></li> <li class="color-box lime"></li> <li class="color-box funky-purple"></li> <li class="color-box clay"></li> </ul>

I'm using the class "color-box" as a uniform style for each of the colors in my Styleguide, and then classing them with the actual name of the color. We'll get to the why of it later, but it's important to keep some consistency in this step.

Now, I style the "color-box" however I want (in this case, I give it a defined size and display: inline-block) etc. etc.. I also give color-box:before and color-box:after a display: block to increase their legibility (in a moment, we'll get to the good stuff and you'll see why).

This is where the magic happens (.scss)!

$colors: ( brick-red: #89231a, strawberry: #be1e2d, deep-orange: #b94126, tangerine: #f16521, gold: #eeaf21, sunshine: #ffdd17, grass-green: #4a893f, lime: #8cc63e, grape-juice: #452e8b, funky-purple: #7e3f98, clay: #3b2314, );

Woah! Look at that Sass Map action! $colors is my map, and it contains a comma-separated list of keys and values ($color: $bgcolor) which I can reference in the each loop. I'm basically going through each key ($color), which is the name of the color (i.e. brick-red), and grabbing it's $bgcolor hex code (i.e. #89231a). I have access to both elements!

Now, let's make that baby loop (.scss):

@each $color, $bgcolor in $colors { .color-box.#{$color} { @include contrasted($bgcolor); &:before { content: '$#{$color}'; } &:after { content: '#{$bgcolor}'; } } }

Here's where markup is important: I'm using $color to create the class. You can see this int he 2nd line of the each loop: .color-box.#{$color}. In each of these divs, I then use the Compass contrasted feature, which you can read more about here to set the background color -- AND FONT COLOR AT THE SAME TIME! (sorry, I think it's just such a cool Compass feature)

Then, I use pseudo elements (:before and :after) to read the $color (name) and $bgcolor (hex code) associated with it. So, .color-box:before will have the color's name inserted into the content (prepended by a '$' to optionally display it like a variable), and .color-box:after contains the hex value ($bgcolor). This is what you get:

CSS Output for one iteration of the loop (one color):

.color-box.strawberry { background-color: #be1e2d; color: white; } .color-box.strawberry:before { content: "$strawberry"; } .color-box.strawberry:after { content: "#be1e2d"; }

For further reading, there's a great example with nesting maps on the Sass 3.3 Changelog and another example of how you can use them in this great article by Jason Garber. Mehdi Kabab also created this pen showing how you can alternatively do all of the above with nested Sass lists instead of maps! Pretty cool :)

Recently, I've been coding websites via a modular approach -- meaning, focusing on styling distinct (repeated) elements (like sidebars, buttons, entry fields, etc.), and reusing them throughout the page. Modules ensure consistency throughout your project, and increase efficiency since you're reusing as much code as possible.

Right now I want to focus on buttons.

(click the buttons to open their Codepen)

Mixing Modules

When I began creating the buttons for the website that inspired this post, I originally styled them individually, but quickly realized, I can do better than that! Why not create a module mixin to make the code more universal and efficient? With this mixin, the only thing I'd need to do to create new buttons is specify their color and size (big or small): much more human and semantic. .button1 { @include button($toad-blue, big); }

I'm using @if statements and color functions to do the rest of the work -- change element padding/sizing, darken the border color by a variable percentage, and determine the font color based on the darkness of the background.

There's a lot going on here, so let's break it down.

Setting up Compass Color-Contrast

Compass' Color Functions are one of the reasons why its SO FREAKING AWESOME. Seriously, color contrast is AMAZING. All you need to do is

@import "compass/utilities/color/contrast"

and then, a simple statement:

@include contrasted($color)

gives you a background-color of $color while simultaneously determining what text-color to assign.

The default is a 30% threshold, and the font-color will be black on light backgrounds (white on dark backgrounds), but you can configure these settings with this setup:

@import "compass/utilities/color/contrast"; $contrasted-dark-default: #333333; //text color on light bgs $contrasted-light-default: #e7e7e7; //text color on dark bgs $contrasted-lightness-threshold: 50%; //contrast threshold

And then you just include the @include contrasted() statement, and bam! It's like magic.

The Mixin

@mixin button($color, $size) { //defaults: $push-height: 2px; $border-color: darken($color, 40%); $font-size: 1em; // a larger button has a bigger area of movement and font-size @if $size == "big" { $push-height: 6px; $font-size: 1.5em; } //the following determine how dark to make the bottom-border of the button depending on the lightness of the actual background color of the button @if lightness($color) < 20%{ $border-color: darken($color, 80%); } @if lightness($color) > 80%{ $border-color: darken($color, 10%); } @include contrasted($color); //this is magical border: none; //as a reset border-bottom: $push-height*2 $border-color solid; font-size: $font-size; margin-top: 0; //must start at 0 bc movement illusion achieved via margin-top padding: 0.4em 2em; position: absolute; &:hover { margin-top: $push-height; border-bottom: $push-height $border-color solid; } &:active, &:focus { outline-color: transparent; //reset styling outline-style: none; //reset styling border-bottom: none; //reset styling margin-top: $push-height*2; margin-bottom:-2px; } }

Checking Lightness

The mixin reads the lightness of $color and darkens the bottom part of the button accordingly (because 10% darkening is really dramatic on light colors, but barely shows up on darker colors). Unlike other languages, there are no characters encapsulating the statements (which can be a little confusing), just write them straight out on the same line.

In this example, I first set a default (this is important!) $border-color: darken($color, 40%) and then checked the actual lightness of $color to see if any of the following rules apply:

@if lightness($color) < 20%{ $border-color: darken($color, 80%); } @if lightness($color) > 80%{ $border-color: darken($color, 10%); }

Sass Boolean Functions

@if statements like the one above (and other control directives) are really fun to use in mixins. You can even extend the use of these with "and," "or," and "not" statements. The full list of Sass functions is here and I'd highly recommend checking it out.

Conclusion

In the end, this little line of code: .button1 { @include button($toad-blue, big); }, compiles to this:

.button1 { background-color: #93d0ff; color: #333333; border: none; border-bottom: 12px #0070c6 solid; font-size: 1.5em; margin-top: 0; padding: 0.4em 2em; position: absolute; } .button1:hover { margin-top: 6px; border-bottom: 6px #0070c6 solid; } .button1:active, .button1:focus { outline-color: transparent; outline-style: none; border-bottom: none; margin-top: 12px; margin-bottom: -2px; }

CSS shapes are really fun, and making images out of them is awesome! We see shapes being used everywhere on the web these days, from icons to navigation to tooltips. And its great! I mean, doesn't typing a bit of code and getting a cool image out of it without touching Illustrator make you feel like a badass?

Well, it definitely makes me feel like one. Which is why I made this (based on this dribbble shot):

Click on that image to open the code pen for it!

And most of the markup looks like some variation of this:

.neck { @include shape(circle, 180px, $tan); margin: 200px 210px; }

What? That's like ... two lines. Yep, its pretty easy to make shapes without much effort when you use Sass and a really simple little mixin I wrote called "Shape"

The CSS that the above code compiles to looks like this:

.neck { width: 180px; height: 180px; background-color: #f4e5be; border-radius: 50%; margin: 200px 210px; }

But we don't need all of that! All you need to do in order to instantiate the shape is state what shape it is (options include circle, triangle, right-triangle, square, pentagon, hexagon, and octagon), it's size, and the color you want it to be. It's super easy (which makes more complex shapes easier to make)!.

For instance, the way I made freckles was like this:

%freckles { @include shape(circle, 15px, $darkbrown); margin-top: 285px; &:before { @include shape(circle, 15px, $darkbrown); content: ""; margin: -20px 15px; } &:after{ @include shape(circle, 15px, $darkbrown); content: ""; margin: -20px -15px; } } .freckles--left { @extend %freckles; margin-left: 220px; }

Instead of all of this:

.freckles--left, .freckles--right { width: 15px; height: 15px; background-color: #523026; border-radius: 50%; margin-top: 285px; } .freckles--left:before, .freckles--right:before { width: 15px; height: 15px; background-color: #523026; border-radius: 50%; content: ""; margin: -20px 15px; } .freckles--left:after, .freckles--right:after { width: 15px; height: 15px; background-color: #523026; border-radius: 50%; content: ""; margin: -20px -15px; } .freckles--left { margin-left: 220px; }

Not only does it simply look neater, but it makes more semantic sense to anyone reading your code. Here is a shape: the shape is a circle, the circle is this big and this color. You don't have to worry about borders and transparency etc., and can always edit the shape right below the @include.

Grab the mixin right here: https://gist.github.com/una/7198256#file-shape-mixin

Missed SassConf? Don't worry! Here's a collection of links I gathered just for you (in a somewhat chronological order)!

Slides from Cheap Sass Tricks! (John W. Long)

Speakerdeck (John W. Long)

Sass at Github Slides (Ben Bleikamp)

Github's Style Guide

What is KSS?

Roughdraft.io -- Pretty blog gists from Github

Sass to CSS converter in browser

Libsass (Sass Implementer written in C!)

Chris Eppstein's Keynote

Sass 3.3 Changelog!

Blog post -- Clean Out Your Sass Junk Drawer (Dale Sande)

YIQ Color Contrast

Photoshop Blend Modes in Sass

Show Your Work and Share Your Toys Slides (Eric Meyer)

Sweating the Small Stuff Slides (Tim Hettler)

$lists: For Fun & For Profit (Roy Tomeij) Files

Normalize.scss (Edit this file for each project!)

Style Prototype from Team Sass

Managing Complex Projects w/Design Components (John Wilkins)

Redesigned Sass Website!

Takana (Sass + LiveReload using Libsass)

Visual Guide to Sass & Compass Color Functions

Designing in the Browser Slides (Mason Wendell)

Sass Color Schemer

Singularity Grid Framework

Foundation 4 Documentation

Refactoring Web Interfaces Slides (Jina Bolton)

**NOTE: THIS ARTICLE IS OUT OF DATE AS OF MARCH 2014. SEE [THIS ONE](http://unakravets.tumblr.com/post/78744593423/sass-snippets-the-almighty-ampersand) ABOUT USING AMPERSANDS FOR BEM INSTEAD**

A few months ago, when I was interning at Viget, I found myself engaged in a conversation about naming conventions. Tommy had read an article about BEM (Block, Element, Modifier) syntax and was explaining the practicality of its use to me. Sure, it seemed like a good idea, but being a little stubborn, I thought of it as a passing trend, and never actually used it.

Well, yesterday I was at SassConf (which was AWESOME by the way), where they showed us new features of Sass 3.3! And it brought back this whole idea of BEM syntax. It really does make a lot of sense -- and with the new @at-root directive, your code for it is about to get a whole lot cleaner.

Woah, New Sass Stuff!

First off, to install the brand new version of Sass: just make sure you have Ruby installed (it already is on Macs), then open terminal and type:

gem install sass --pre

YAY! Now you have the latest version of Sass! Go get a treat! Be aware that this is an unreleased version since it's still in development, but why not start playing around in it now?

You can see the feature list here!

A quick primer on BEM:

In short, BEM (Block, Element, Modifier) uses the following pattern of naming conventions for classes:

block{} //the section of content .block__element{} //an individual element inside of the content section .block--modifier{} //specifically edited element pieces

Take the following example:

There is a header, some text, and some colored links inside of the text. You could break up the elements in the speech bubble like this:

.speech-bubble{} .speech-bubble__header{} .speech-bubble__text{} .speech-bubble__text--link{}

Lets Get Sassy

This new @at-root feature allows nesting in your Sass files without nesting the output! That's great for structuring your files without sacrificing speed and efficient output! So let's see what happens when we try to nest now (I'm also using BEM syntax, and this makes absolutely no sense to do):

SCSS:

// Nesting: (this aint cute. never do this) .speech-bubble{ color: purple; .speech-bubble__header{ color: orange; } .speech-bubble__text{ color: black; .speech-bubble__text--link{ color: green; } } }

CSS Output:

.speech-bubble { color: purple; } .speech-bubble .speech-bubble__header { color: orange; } .speech-bubble .speech-bubble__text { color: black; } .speech-bubble .speech-bubble__text .speech-bubble__text--link { color: green; }

Yikes!! But let's see what @at-root will do for us!

SCSS:

// Nesting, but using @at-root .speech-bubble{ color: purple; @at-root #{&}__header{ color: orange; } @at-root #{&}__text{ color: black; @at-root #{&}--link{ color: green; } } }

CSS Output:

.speech-bubble { color: purple; } .speech-bubble__header { color: orange; } .speech-bubble__text { color: black; } .speech-bubble__text--link { color: green; }

Now, that's SO much better!

You can also get fancier with @at-root by using rules such as "with" and "without." You can use this, for example, as a different approach to writing media queries.

SCSS:

@media screen and (max-width: 320px){ .sidebar { width: 40%; @at-root (without: media screen) { width: 100%; } } }

CSS Output:

@media screen and (max-width: 320px) { .sidebar { width: 40%; } } .sidebar { width: 100%; }

For more information on the new Sass features, make sure to read the Changelog, and stay tuned for more posts from SassConf!

TL;DR: @at-root is great for nesting without the efficiency loss

Edit:

After all of the awesome discussion going on in the comments, Scott Kellum created this gist to make the syntax of @at-root more concise (read: pretty). So using that mixin,, the earlier example would look like this:

Scott's Rad Mixins:

//elements get appended with "__" and the $name @mixin e($name) { @at-root #{&}__#{$name} { @content; } } //modifiers get appended with "--" and the $name @mixin m($name) { @at-root #{&}--#{$name} { @content; } }

SCSS

.speech-bubble{ color: purple; @include e(header){ //header element color: orange; } @include e(text){ //text element color: black; @include m(link){ //link modifier color: green; } } }

And we get the same CSS output!

CSS Output:

.speech-bubble { color: purple; } .speech-bubble__header { color: orange; } .speech-bubble__text { color: black; } .speech-bubble__text--link { color: green; }

This blog post assumes that you've never set up any kind of server environment on your system before and have no idea how to get started. It's not the only way, but its an inclusive set of directions to follow. If you've already read the Craft Installation Docs, and were confused, then this post is for you.

First you'll want to install a program like MAMP or XAMPP. These programs basically bundle install Apache, MySQL, and PHP on your system, and make it easy to access them with a GUI that gives you start and stop buttons.

Install Sequel Pro to help you manage your MySQL databases.

Open MAMP (not MAMP Pro!) and click the "Start Servers" button.

In MAMP, click "Open Start Page" button right below "Start Servers". The first chart on this page will show your your login parameters

Open Sequel Pro and use these parameters to open a connection. Your host should be "localhost" or "127.0.0.1" and your use name and password are probably both "root."

After hitting "Connect," create a new database by clicking Database > Add Database, or option + shift + A. Name your database something that makes sense to your project.

Go to buildwithcraft.com and install the latest version of Craft.

Unzip the file and place it in the httdocs folder inside of the MAMP Application.

Navigate to craft/config/db.php and open the db.php file in any text editor.

Edit this file with your MySQL and database information. If you used MAMP, yours will look similar to this example, except for the database name:

<?php return array( /** * The database server name or IP address. */ 'server' => '127.0.0.1', /** * The database username to connect with. */ 'user' => 'root', /** * The database password to connect with. */ 'password' => 'root', /** * The name of the database to select. */ 'database' => 'unicorns', /** * The prefix to use when naming tables. This can be no more than 5 characters. */ 'tablePrefix' => 'craft', );

Rename your "htaccess" file to ".htaccess" (just add a "." in front of it) and delete the web config file. This can be tricky, as your computer may complain. If it says that this is a reserved name, make sure to go to enable hidden files. To do this, open your Terminal and type in:

defaults write com.apple.Finder AppleShowAllFiles YES

Restart finder and try to rename the file again.

At this point, if you followed those instructions directly, you should be able to go to localhost/Craft/public/admin or 127.0.0.1/Craft/public/admin in your web browser. This is how you will access the admin panel later.

From here, press the big Install button and let Craft take you through the setup process

Your (public-facing) website should be accessible at localhost/Craft/public or 127.0.0.1/Craft/public/

Read about my experience using Craft to build Proofessor HERE. That post will also show you how to get a little fancier and set up a virtual host. It also shows you the back end of how to actually use Craft.

Compass is a beautiful, beautiful thing and its image helpers make working with visuals just that much more beautiful. Here are two methods to let compass do all of the work for you. Just hit ⌘s!

Image-Url

Image-url is FANTASTIC. Basically, you must first set up your compass.rb or config.rb (whatever your compass configuration file is) and update the images path to its correct directory in relation to this file (like, "public/images" or just "images" if they're on the same level). Here's a great link with more detail on relative paths and how to set them up.

Config.rb :

# Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"

Then, all you have to do is link to the specific image you're looking for in the sass file:

SCSS:

.my-little-pony { background: image-url("rainbow_unicorn.jpg"); }

CSS output:

.my-little-pony { background: url("/images/rainbow_unicorn.jpg?1375810680"); }

Compass does all of the work for you! It links to your images directory, and pulls the file (no more searching confusingly through directories: ../../images), AND it does a clever little thing called cache-busting. You may be wondering what all of the numbers after the "?" in that CSS are. Well, what Compass did was added these numbers so that if I changed that image, the numbers would change and a user's cache wouldn't be loading the old image anymore. It's called "cache-busting." Pretty clever, Compass. The only downside is that image-url doesn't support .svg's yet. It can't read the file's image size properly (well, neither can your computer). A good rule of thumb is: if your system can return information on a file's dimensions, you can use that file format for image-url.

Image-Height & Image-Width

Compass can also read the width and height of your image, so you don't have to!

SCSS:

.my-little-pony {$image: "rainbow_unicorn.jpg"; // note: no svgs here either :( background: image-url($image); // see! image-url rocks height: image-height($image); width: image-width($image);

CSS output:

.my-little-pony { background: url("/images/rainbow_unicorn.jpg"); height: 204px; width: 163px; }

Now isn't that nice? :)

TL;DR: Use image-url as much as possible, & know about other Compass image helpers :)

http://blog.grayghostvisuals.com/compass/image-url/