In my travels around the internet, I see many interesting portfolios for both designers and developers. Often these portfolios include images of the web site or application as it would look in a desktop window, usually an OSX (Mac) window. I really liked the effect, and I wanted to recreate it in CSS. Once I had done that I thought it was pretty cool, and I wanted to share it so I made a Sass mixin, which proved to be more enlightening that I had originally anticipated.
I’m working on something else where I’ve needed to use Sass functions, so I’ve been learning about how to pass
null and default arguments to both mixins and functions. This turned out to be useful in this case, because I wanted to be able to change the colors and sizes as needed for other projects, but also just use the “set it and forget it” functionality of the design I created in the first place. I also wanted it to be as tightly contained as possible, so you could literally drop it into any Sass page and have it work immediately.
See the Pen Windowfy by Smokie Lee (@xtoq) on CodePen.
Everything is adjustable via arguments, and only the element/class argument is required (the element or class you want to achieve this look on). Passing some arguments and skipping others turned out to be super easy: just pass the actual variable name and value in the arglist of the
@include statement (or the
@mixin statement if you’re using optional variables in your functions). I like Sass more and more every day!
// Only the element is required! Default values will be used. @include window-frame(figure); // Works on inline elements too. @include window-frame(span,$button-size:3px); // Use it with classes; just because you don't have class doesn't mean your apps don't. // Don't forget to pass the name as a string. @include window-frame(".yar"); // Oh, need to use some scoping? Pfft. @include window-frame(".wut span",gray,.2rem); // Need advanced selectors? Easy peasy. @include window-frame(".wut:nth-of-type(3)"); // Change the color of the frame? Sure thing. @include window-frame(".wut",$frame-color:#777); // Only need to change the color of the first and third buttons? No problemo! // Any optional arguments can be skipped by declaring the variable name/value pair in the arglist; default values will be used for those skipped. @include window-frame(".wut:nth-of-type(2)",$first-color:lightblue,$third-color:magenta);
This is my first Sass mixin that I’ve shared with the world at large, so any constructive feedback would be welcome. Should work on all major browsers! Also posted on my CodePen blog.