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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                .container
  .row
    .cell
      h1 vw, vh
    .cell
      | Window Size
      .codeBox.align-right
        div vw = 
          span.size-vw
          |  px
        div vh = 
          span.size-vh
          |  px
  .row
    .cell.half
      p vw box
        br
        code width: 10vw
        |  
        code height: 10vw      
      p.bold
        | vw = 
        span.size-vw
        |  px / 10vw = 
        span.size-vw(data-size="10")
        |  px
      span.vwbox.box
    .csll.half
      p vh box
        br
        code width: 10vh
        |  
        code height: 10vh
      p.bold
        | vh = 
        span.size-vh
        |  px / 10vh = 
        span.size-vh(data-size="10")
        |  px
      span.vhbox.box
  hr
  div
    p responsive text:  
      code font-size: 2.105vw
      | 
      small (font-size become 16px when window width is 760px.)
    pre
      | 16px / 760px = 0.02105 -> 2.105% => 2.105vw
      
    .borderBox
      p.fs16-760w Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elementum efficitur magna, sed consequat neque interdum in.
    
    p.bold font size: 
      | vw = 
      span.size-vw
      |  px /  2.105vw = 
      span.size-vw(data-size="2.105")
      |  px
      
  hr
  p
    em
      code vw
      |  and 
      code vh
      |  are not affected by the parent elements width and height.
  span.box.vw100.center
    b 100vw box
  hr
  .row
    .cell
      h1 vw, vh
    .cell
      | Window Size
      .codeBox.align-right
        div vw = 
          span.size-vw
          |  px
        div vh = 
          span.size-vh
          |  px
  .row
    .cell.half
      p
        code vmax
        |  is 1% of the viewport's larger dimension.
      p.bold 10vmax = 
        span.size-vmax(data-size="10")
        |  px
      span.box.vmaxbox
    .cell.half
      p
        code vmin
        |  1% of the viewport's smaller dimension.
      p.bold 10vmin = 
        span.size-vmin(data-size="10")
        |  px
      span.box.vminbox
              
            
!

CSS

              
                .box
  display: block
  background-color: #e6e7e3
  width: 1em
  height: 1em
  
.vwbox
  background-color: #c8d971
  width: 10vw
  height: 10vw

.vhbox
  background-color: #98daed
  width: 10vh
  height: 10vh

.vmaxbox
  background-color: #ee5834
  width: 10vmax
  height: 10vmax
.vminbox
  background-color: #fbc92c
  width: 10vmin
  height: 10vmin
  
.vw100
  background-color: #3bbdcd
  width: 100vw
  height: auto

.fs16-760w  
  font-size: 2.105vw
  
*
  box-sizing: border-box
  
body
  margin: 0
  padding: 0
  background: #ccc

.container
  margin: 0 auto
  padding: 1em 1em 4em
  background: #fff
  width: 80vw
  max-width: 960px
  min-height: 90vh

h1, h2, h3, h4, h5, h6
  margin: 0 0 .25em

code
pre
  font-family: monospace
  padding: .2em .4em
  background: #ccc
  border-radius: 2px

pre
  padding: .5em 1em
  margin: 0 0 1em
  
hr
  border: 0
  background: #d8d4cc
  margin: 2.5em auto
  width: 10vw
  height: 1em

.row
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: flex-start
  > .cell
    padding-left: 1em
    padding-right: 1em
    margin-bottom: 1em

.half
  width: 50%

.center
  text-align: center

.align-right
  text-align: right

.bold
  font-weight: 600
  
.borderBox
  padding: .5em 1em
  margin-bottom: 1em
  border: 1px solid #da5668
  *
    &:first-child
      margin-top: 0
    &:last-child
      margin-bottom: 0

.codeBox
  @extends pre
  display: inline-block
              
            
!

JS

              
                !function() {
const w = window;
const d = document;

function getWindowSize() {
  const width = w.innerWidth || d.documentElement.clientWidth;
  const height = w.innerHeight || d.documentElement.clientHeight;
  return {
    width,
    height,
  }
}

const data = {
  vw: d.querySelectorAll('.size-vw'),
  vh: d.querySelectorAll('.size-vh'),
  vmax: d.querySelectorAll('.size-vmax'),
  vmin: d.querySelectorAll('.size-vmin'),
};
  
function setSizeToView({width, height}) {
  Object.keys(data).forEach((key) => {
    const elms = [...data[key]];
    elms.map((elm) => {
      const size = elm.dataset.size - 0;
      let val = '';
      
      if( key === 'vw' ) {
        val = width;
      } else 
      if( key === 'vh' ) {
        val = height;
      } else
      if( key === 'vmax' ) {
        val = width > height ? width : height
      } else
      if( key === 'vmin' ) {
        val = width < height ? width : height
      } 
      
      if( size ) {
        val = Math.round(val * size * 10) / 1000;
      }
      
      elm.textContent = val;
    });
  }, data);
}

let timer;
function onResizeHandler(e) {
  clearTimeout(timer);
  timer = setTimeout(function() {
    const size = getWindowSize();
    // console.log(size);
    setSizeToView(size);
  }, 100);
}
  
w.addEventListener('resize', onResizeHandler);
  
// init
onResizeHandler();
}();
              
            
!
999px

Console