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

              
                <div class="wrap">
  
  <main>
    
    <aside>
      <h1>Sidebar</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi explicabo autem cupiditate, facere quas recusandae itaque voluptates sint accusantium amet illo veniam totam placeat odio magni, quaerat eligendi. Distinctio et cupiditate nemo fugit, praesentium, ea obcaecati dolores non amet autem sequi laboriosam labore vero fugiat dolorem qui voluptatibus omnis eos architecto, recusandae corporis rerum quod. Ea minus et odio voluptate quaerat facere incidunt, impedit repellat eos nihil quis modi vel molestiae, eum vitae nam nemo quasi sit aperiam unde ex fugiat. Magnam dolores, enim consectetur veniam illum error eaque ea necessitatibus nam ipsam maxime dolore temporibus animi odio eum molestiae iure. Ut quos cupiditate ad perferendis dolorum nemo deserunt exercitationem magni ipsa iste ea fugit expedita sapiente numquam reprehenderit dolore, quo minus excepturi asperiores sit voluptatibus accusamus necessitatibus, ipsam. Delectus iste cupiditate asperiores vero repellendus atque aliquid temporibus perspiciatis reiciendis quibusdam similique, nesciunt accusantium tempora voluptatem optio qui odit ullam amet eveniet illum incidunt quis quia repudiandae animi. Recusandae, consequuntur laboriosam praesentium fugit possimus nemo ut porro reiciendis quo aperiam et aliquam fuga consectetur fugiat veritatis necessitatibus officiis, officia repellendus, rem. Voluptatem itaque, dolores autem at, culpa cum quam ratione laborum quo totam, nemo sed dolor, hic nisi nobis illo.
      </p>
    </aside>
    
    <article>
      <h1>Content</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsa vero, nesciunt sunt dolorum distinctio corporis quis totam, dicta, rem maiores possimus impedit deleniti odio a. Quidem similique temporibus, odit vero illo cupiditate excepturi earum tenetur porro ea. Enim ea pariatur animi eius quo earum corporis adipisci, nesciunt at eum neque alias quibusdam dolor vel expedita. Expedita dolorem cumque minima, quas, maiores officiis beatae pariatur quis suscipit! Consequatur iusto porro odio laborum minima, reiciendis quam quos dolores ipsam dignissimos laboriosam ex quasi possimus impedit provident eveniet cumque blanditiis doloremque a voluptatum assumenda optio! Dolorem, quas consectetur quidem! Itaque magni officia magnam impedit qui nam unde sint veniam, quis animi earum officiis perferendis repellendus porro reiciendis quaerat cumque numquam tempora corporis rerum tenetur autem necessitatibus ab minus consectetur. Magni eligendi ducimus, porro cumque a odit omnis neque rerum unde. Dolores sequi aliquid voluptatibus odit odio facilis quis et temporibus nobis ipsa sit laudantium libero, corporis consequatur. Nisi saepe provident id veniam tempore aliquam libero hic error sint, tenetur alias earum, quam est nobis eaque, eius odio eum. Nam dolor deleniti eos tempore sunt sapiente accusantium non hic, quod eligendi sequi dolore quos molestiae voluptas labore eius temporibus enim similique odio, quis quisquam! Impedit, iure aspernatur id praesentium minima, culpa alias veniam. Sapiente maiores architecto placeat, et harum eligendi doloribus vel reiciendis eveniet est beatae sit necessitatibus hic eius, corporis deleniti praesentium velit similique, quaerat unde odit. Repellat magni, nihil, quibusdam doloremque maiores tenetur obcaecati tempora, veniam officia, doloribus ratione reprehenderit. Porro eum iste minima corrupti fuga expedita quo dolore explicabo ea eius vero, magnam illum dolorem ullam hic enim sapiente, odio eaque! Similique tempore laboriosam explicabo fuga eum ipsum, doloribus animi, repudiandae laudantium. Dignissimos, accusamus quasi sit atque nam quidem autem at maxime, soluta, eveniet excepturi quisquam ratione perspiciatis ipsum consectetur facilis odio ad possimus officiis odit molestiae. Exercitationem facere magnam mollitia assumenda odio est doloribus accusamus animi dignissimos veritatis ut excepturi, quia maiores, ipsum sint ex sed a minus quidem temporibus. Ipsum, quod quidem nam quisquam, quaerat accusantium in iusto inventore, fugiat sint mollitia magnam totam distinctio, vel deleniti sit voluptas quibusdam sequi! Officiis quo, facere atque similique a blanditiis, nostrum recusandae aut. Nemo voluptas, nesciunt totam fugit omnis. Laborum qui laudantium quos, inventore minima ipsum ut velit quam nobis eligendi, expedita quo necessitatibus, ea nemo odit sapiente commodi atque! Expedita facere quae modi iste sed, placeat sint eligendi, sapiente.
      </p>
    </article>
    
  </main>
  
</div>
              
            
!

CSS

              
                @import "nib"

html, body
  height: 100%
  line-height: 1.5

.wrap
  height: 100vh
  display: flex

main
  flex: 1
  display: flex
  @media (max-width: 800px)
    flex-direction: column    

aside, article
  overflow-y: scroll
  padding: 2em

aside
  flex: 1
  background: #f7f7f7  

article
  flex: 2
  background: #f0eeee  

h1
  margin-top: 0
              
            
!

JS

              
                
              
            
!
999px

Console