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

              
                table
  thead
    tr
      th %
      th em
      th rem
  tbody
    tr
      th(colspan=3) default
    tr
      td
        code font-size: 100%
        p.fs-100per Lorem ipsum dolor sit amet,
      td
        code font-size: 1em
        p.fs-1em
          span.block.b-1em
          | Lorem ipsum dolor sit amet,
      td
        code font-size: 1rem
        p.fs-1rem
          span.block.b-1rem
          | Lorem ipsum dolor sit amet,
    tr
      td
        code font-size: 150%
        p.fs-150per consectetur adipiscing elit.
      td
        code font-size: 1.5em
        p.fs-1_5em
          span.block.b-1em
          | consectetur adipiscing elit.
      td
        code font-size: 1.5rem
        p.fs-1_5rem
          span.block.b-1rem
          | consectetur adipiscing elit.
    tr
      th(colspan=3).loudly-box parent font-size: 150%
    tr
      td.loudly-box
        p Sed dapibus ligula nec lacinia efficitur.
        code font-size: 100%
        p.fs-100per Morbi interdum sem volutpat,
      td.loudly-box
        p Sed dapibus ligula nec lacinia efficitur.
        code font-size: 1em
        p.fs-1em
          span.block.b-1em
          | Morbi interdum sem volutpat, 
      td.loudly-box
        p Sed dapibus ligula nec lacinia efficitur.
        code font-size: 1rem
        p.fs-1rem
          span.block.b-1rem
          | Morbi interdum sem volutpat, 
    tr
      td.loudly-box
        code font-size: 150%
        p.fs-150per bibendum justo ac,
      td.loudly-box
        code font-size: 1.5em
        p.fs-1_5em
          span.block.b-1em
          | bibendum justo ac,
      td.loudly-box
        code font-size: 1.5rem
        p.fs-1_5rem
          span.block.b-1rem
          | bibendum justo ac,
    tr
      td.loudly-box
        code font-size: 80%
        p.fs-80per euismod diam.
      td.loudly-box
        code font-size: .8em
        p.fs-08em
          span.block.b-1em
          | euismod diam.
      td.loudly-box
        code font-size: .8rem
        p.fs-08rem
          span.block.b-1rem
          | euismod diam.
              
            
!

CSS

              
                *
  box-sizing: border-box
  
html
  font-size: 16px
  line-height: 1.8

// font-size
.fs-100per
  font-size: 100%
.fs-150per
  font-size: 150%
.fs-80per
  font-size: 80%

.fs-1em
  font-size: 1em
.fs-1_5em
  font-size: 1.5em
.fs-08em
  font-size: .8em

.fs-1rem
  font-size: 1rem
.fs-1_5rem
  font-size: 1.5rem
.fs-08rem
  font-size: .8rem

.block
  display: inline-block
  background-color: #8ab734
  margin-right: .25rem

.b-1em
  width: 1em
  height: 1em
.b-1_5em
  width: 1.5em
  height: 1.5em
.b-08em
  width: .8em
  height: .8em
  
.b-1rem
  width: 1rem
  height: 1rem
.b-1_5rem
  width: 1.5rem
  height: 1.5rem
.b-08rem
  width: .8rem
  height: .8rem
  
code
  color: #333
  font-family: monospace
  font-size: .875rem
  padding: .175rem .35rem
  border-radius: 2px
  background-color: #ddd
  
.container
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: flex-start
  margin: 0 auto
  max-width: 960px

.col
  padding-left: .5em
  padding-right: .5em

.one-third
  width: 33.333%

.loudly-box
  @extends .fs-150per
  border: 2px solid #e93d29
.font-size-box
  border-color: #4fb0ae

p
  margin: 0
  
table
  margin: 1em auto 2em
  table-layout: fixed
  border-collapse: collapse
  width: 100%
  max-width: 85vw
th, td
  padding: .4rem
  border: 1px solid #dbdad8
tbody
  tr > th
    background-color: #9bd5d3
  td
    vertical-align: top
              
            
!

JS

              
                
              
            
!
999px

Console