Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="wrapper">

<div class="box flex">
  <div>I am flex item 1</div>
  <div>I am flex item 2</div>
  <div>I am flex item 3</div>
  <div>I am flex item 4</div>
</div>

<div class="box grid">
  <div>I am grid item 1</div>
  <div>I am grid item 2</div>
  <div>I am grid item 3</div>
  <div>I am grid item 4</div>
</div>
<div class="box multicol">

<p>As the moment for departure drew near, friends became impatient, and every one anxiously watched the final arrangements, which were made by Mr Coxwell, on whom was laid the important duty of letting go. His hand was on the catch, his countenance was fixed, and his expression stern, as he gazed up into the heavens. He was waiting for the right moment, for the sky was partially cloudy, and it was necessary to wait until the balloon was midway between the cloud that had just passed and the next that was approaching, so that the aeronauts might have a clear sky, and be able to see the earth they were about to quit for a time. Nor was this all; he knew that in every wind, however strong it might be, there are periods of calm. If he could start in one of these he would avoid much rotatory motion. The deciding, therefore, of the exact moment for making a fair start was not so easy a matter as one might suppose.</p>

<p>Some one at this critical time, with the characteristic eagerness of poor human nature to “put its finger in the pie,” cried out “Now!” and another shouted “Pull!” but Mr Coxwell, regardless of every one, decided for himself; and, just when the wind lulled and the sun shone bright, and the balloon stood proudly erect, he pulled the trigger and they were free.</p>

<p>But they were more than free. They were suddenly in profound repose, for—however high the wind may be, however agitated the balloon, swaying to and fro with sudden and violent action, despite the efforts of many hands that endeavour to restrain it,—no sooner do aeronauts quit their hold of earth, than, in an instant, all agitation ceases and they are in perfect stillness, without any sense of motion whatever; and this freedom continues throughout the entire flight—except, indeed, when they sink so low as to come into contact with mother earth, when the serenity of their flight is terribly and violently interrupted, as shall be seen in the case of another balloon voyage hereafter to be described.</p>
</div>
  
</div>
            
          
!
            
              @mixin gridded($type: grid, $col: 20em, $gap: $gap) {
  @if ($type == 'flex') {
    display: flex;
    flex-wrap: wrap;
    margin-left:  -#{$gap} ;
    > * {
      flex: 1 1 $col;
      margin: 0 0 $gap $gap;
    }
  }
  @if ($type == 'grid') {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($col,1fr));
    grid-gap: $gap;
  }

  @if ($type == 'multicol') {
    column-gap: $gap;
    column-width: $col;
  }    
}

* { box-sizing: border-box; }

.wrapper {
  width: 90%;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}

.box {
  margin-bottom: 2em;
}

.box > div {
  border: 5px solid rgb(61, 63, 112);
  background-color: rgba(61, 63, 112,.7);
  color: #fff;
  border-radius: 10px;
  padding: 10px;
}

body {
  padding: 40px;
  background-color: rgb(255,255,255);
  color: rgb(61, 63, 112);
  font: 1.1em/1.4 "Open Sans", sans-serif;
}

.multicol {
  @include gridded('multicol',200px,20px);
}

.grid{
  @include gridded('grid',200px,20px);
}

.flex {
  @include gridded('flex',200px,20px);
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console