Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p>You know those portfolios that show an image of an app or site as it would appear in a desktop (usually Mac OSX)? I like them so I created a mixin to help me achieve that look easily on my site (not that I've implemented them yet...) and I decided to share them with you!</p>
<p>This is my first Sass mixin, so any constructive criticism you have would be appreciated. Should work on all major browsers (tested on Chrome, FF, Edge and IE 11) and be responsive.</p>

<!-- Works with any class or element. -->
<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/9/92/Jack-Daniels-1908-ad.jpg" alt="" />
</figure>

<span>Inline</span>

<div class="yar">
  <p>Works on classes too!</p>
</div>

<div class="wut">
  <div class="wut">
    <div class="wut">
      <div class="wut">
         <p>Windowfy-<span>ception</span>!</p>
      </div>
      <div class="wut"></div>
      <div class="wut"></div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                // The mixin. Copy and paste this entire thing to utilize. Comments (should) explain more.

// If any of these optional args aren't passed, their default values will be used instead which gives you a black frame and the default red/yellow/green buttons at .5rem.
@mixin windowfy($element,$frame-color:#111,$button-size:.7vmax,$first-color:#ef5350,$second-color:#ffee58,$third-color:#66bb6a) {
  #{$element} {
    border:solid $frame-color; // window frame and top bar
    border-width:$button-size*3 $button-size/2 $button-size/2; // frame width, as an expression of button size
    border-radius:$button-size/2.5; // makes the frame round-ish
    position:relative;
  }
  #{$element}:before { // use pseudo elements so no extra markup required
    background:$first-color; // first button
    border-radius:$button-size; // make 'em round
    box-shadow: // create the extra buttons
      $button-size*1.5 0 $second-color, // second button
      $button-size*3 0 $third-color; // third button
    content:"";
    height:$button-size;
    position:absolute;
    top:$button-size*-2;
    width:$button-size;
  }
}

// Usage examples.

// Only the element is required! Default values will be used.
@include windowfy(figure);

// Works on inline elements too.
@include windowfy(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 windowfy(".yar");

// Oh, need to use some scoping? Pfft.
@include windowfy(".wut span",gray,.2rem);

// Need advanced selectors? Easy peasy.
@include windowfy(".wut:nth-of-type(3)");

// Change the color of the frame? Sure thing.
@include windowfy(".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 windowfy(".wut:nth-of-type(2)",$first-color:lightblue,$third-color:magenta);



// All the other presentation stuff. None of this is needed for the mixin to work.

body {
  background:#333;
  color:#fff;
  font-size:10px;
}
p {
  font:1rem/1.6 "Open Sans",sans-serif;
  font-size:1rem;
  padding:.5rem 1rem;
}
figure {
  margin:5vmax auto;
  width:50%;
}
div {
  background:#444;
  color:#fff;
  font-size:2rem;
  margin:2rem auto;
  padding:.5rem;
  width:90%;
}
img {
  width:100%;
}
span {
  font-size:2rem;
}
              
            
!

JS

              
                
              
            
!
999px

Console