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

              
                .grid
  header.headline
    h1 Lorem ipsum dolor sit amet consectetur adipisicing elit
  .byline 
    h2 by Lorem Ipsum
  article.article
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eos explicabo distinctio maxime voluptatem impedit quis ratione laudantium, quas obcaecati sunt repudiandae numquam labore facere quidem totam ut ea qui! Corporis repudiandae iure, at, eligendi labore provident deserunt vero facere totam ipsum, aspernatur incidunt dolorum qui. Sint praesentium similique suscipit aliquid nemo voluptatibus architecto totam mollitia veniam est. Molestiae, accusamus commodi veniam magnam reiciendis modi voluptatibus explicabo, nemo repellat blanditiis corporis officiis corrupti, tenetur ea, ipsam voluptatum sed dolores ut. 
    
    p Velit non quam quia iusto cupiditate quo maiores magnam facilis expedita dolore, quibusdam, assumenda dolor harum, accusantium possimus tenetur quasi dolorem cum deleniti ab eos. Architecto, praesentium, aliquam illo ea assumenda vel numquam pariatur eos voluptas fugit sapiente, ratione! Eveniet dicta fugit corporis vel officia nostrum, fugiat laboriosam soluta harum quia quis voluptatum error deleniti aliquam ratione, quasi magnam, qui. Dolor dolore, sint dolorem quia accusantium, velit repellendus eaque delectus vel itaque unde dicta minima ex. 
    
    p Illum harum voluptatem, nulla distinctio vitae officia labore eius quibusdam? Eligendi iusto assumenda eaque magnam, tempora odit, pariatur distinctio, vitae, natus a dolore inventore. Quibusdam dolore provident veritatis iste voluptas repellendus et, quidem commodi. Eligendi soluta ratione harum asperiores nisi doloremque enim provident rem animi fugit molestias, deserunt ducimus culpa, fugiat eum quam sequi recusandae amet optio minima sunt. Expedita a facere at consectetur cum molestiae quasi, in, dicta ratione, vero, unde similique dolor neque! Omnis quasi commodi error, sequi dolorum perspiciatis blanditiis eligendi rerum est vitae consequatur consectetur quia laboriosam velit ratione odit atque ullam facere tenetur animi reprehenderit necessitatibus iusto quidem facilis! Quod provident rem, doloremque, quia suscipit voluptates non possimus eligendi molestias libero error! 
    
    p Dolore dolores adipisci incidunt, vero debitis expedita minima ratione ipsum sit voluptate animi itaque veritatis qui distinctio enim velit ad iste error suscipit nihil ex odit. Nobis eum pariatur recusandae in sint voluptas nesciunt, architecto eveniet aspernatur, sed assumenda nemo deserunt dolore illo natus expedita magnam magni! Asperiores incidunt, consequuntur minus ex facere officiis magnam pariatur, voluptatum vel dolorem adipisci quisquam perferendis reprehenderit repellat similique eligendi expedita nobis explicabo laborum molestiae vero modi. Perspiciatis deserunt dicta quaerat hic quis fuga libero enim labore, at voluptate quos nam dignissimos, cupiditate excepturi, sint molestias maiores, consectetur. A facilis corporis dicta, possimus dolor sit sequi unde. Dolore esse a dolorem! Inventore iure ex rem dignissimos fugit mollitia aliquid omnis expedita, quis est et, nisi vel placeat aspernatur, ut magnam? Nulla!
              
            
!

CSS

              
                body
  margin: 0
  font-family: 'Gentium Book Basic', serif
  background: #f9f9f9
  
.grid
  padding: 1rem

@media (min-width: 650px)
  .grid
    display: grid
    grid-template-columns: repeat(12, 1fr)
    grid-gap: 1rem
    padding: 0
  
.headline
  grid-row: 1
  grid-column: 2 / span 10
  
  h1
    font-size: 2.5rem
    margin-bottom: 2rem
    line-height: 1
    text-transform: capitalize
    
  @media (min-width: 400px)
    h1
      font-size: 3.5rem
  
  @media (min-width: 650px)
    h1
      font-size: 5.5rem
  
.byline
  grid-row: 2
  grid-column: 10 / span 3
  
  h2
    font-weight: 400
    font-style: italic
    font-size: 1rem
    margin-top: 0
    margin-bottom: 2rem
    text-transform: uppercase
  
  @media (min-width: 400px)
    h2
      font-size: 1.2rem
  
.article
  grid-row: 3
  grid-column: 2 / span 10
  columns: 3
  column-width: 250px
  column-gap: 1.5rem
  margin-bottom: 2rem
  
  p
    font-size: 1.2rem
    line-height: 1.4
    color: #444
    
    &:first-child
      margin-top: 0
              
            
!

JS

              
                
              
            
!
999px

Console