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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

            
              .wrapper-container
  .container
    section.leadin
      h1 Flexbox, your friend
      p Flexbox is more intuitive layout for the web. Now, instead of worrying about floats, clears, and the like you can rely on flexbox. Flexbox lets the content adapt to its parent container all by itself – saving time and frustration.

      p  It’s conducive to the responsive, content driven, web of today. Once you understand a few basics you can achieve excellent layouts with just a few lines of code. W3C has set it up to be the future of layout on the web. You should start using it now.

.container
  section
    h1 Why bother?
    h3 Layout via floats is fragile and breaks easily when the content changes
    p For example, a typical horizontal navigation bar:
    img src="https://i.imgur.com/gukTSpI.png?1" alt="horizontal-nav"/

    nav.old-school
      ul
        - for i in (1..6)
          li #{i}
          
  section
    h1 How to flex
    h3 Using flexbox is as easy as setting the display property to flex on the parent selector of your elements
    pre
      |
        .parent {
          display: flex;
        }
  
  section
    h1 Check this out
    h3 Flexbox adapts to the content automatically
    p Once again, our navigation bar:
    img src="https://i.imgur.com/gukTSpI.png?1" alt="horizontal-nav"/

    nav.new-school
      ul
        - for i in (1..8)
          li #{i}
          
  section
    h1 The flex container
    h3 It's all about the axes
    p This graphic makes it look complicated, but trust me, it's not that bad.
    img src="https://mdn.mozillademos.org/files/3739/flex_terms.png" alt="MDN Flex graphic"/
    pre
      |
        .parent {
          flex-direction: row; //default, sets your main axis Left to Right and cross axis Top to Bottom
        }
    
    ul.flex-content.flex-direction
      - for i in (1..6)
        li #{i}
        
    pre
      |
        .parent {
          flex-direction: column; //Sets your main axis Top to Bottom and cross axis Left to Right
        }
    ul.flex-content.flex-direction.column
      - for i in (1..6)
        li #{i}
        
  section
    h1 Justification and alignment
    h3 Move things around
    p These are the coolest properties Flexbox has going. They make altering your layout super easy. Justification tells the browser how to layout the flex children along the main axis. The latter defines there alignment along the cross-axis.
    pre
      |
        .parent {
          justify-content: flex-start | flex-end | center | space-between | space-around;
          align-items: flex-start | flex-end | center | baseline | stretch;
        }
    
    ul.flex-content.flex-justification
      - for i in (1..3)
        li #{i}
        
  section
    h1 Flex order
    h3 Reorder your elements without touching the markup
    pre
      |
        .item {
          order: integer;
        }
    ul.flex-content.flex-order
      - for i in (1..6)
        li Item # #{i}
        
  section
    h1 Flex grow
    h3 How much space does an element take up compared to others?
    p By default every flex-item takes up the same amount of space.
    pre
      |
        .item {
          flex-grow: number;
        }
    ul.flex-content.flex-grow
      - for i in (1..3)
        li Item # #{i}
        
  section
    h1 Flex basis and shrink
    h3 Put flex to work
    p The former is the default size of an element before space is distributed and the latter is how much it will shrink if necessary.
    pre
      |
        .item {
          flex-basis: length;
        }
    pre
      |
        .item {
          flex-shrink: number;
        }

    ul.flex-content.flex-basis
      li flex-basis: 40%;
      li flex-shrink: 1;
      li flex-basis: 40%;
      
  section
    h1 Grow, Shrink, and Basis in one
    h3 Shorthand
    p The former is the default size of an element before space is distributed and the latter is how much it will shrink if necessary.
    pre
      |
        .item {
          flex: flex-grow flex-shrink flex-basis; //default, 0 1 auto – flex-shrink and flex-basis are optional
        }
    
    ul.flex-content.flex-shorthand
      li flex: 1;
      li flex: 2;
          
  section
    h1 Learn more ...
    h3 One can do incredible things with Flexbox! I've provided a brief introduction but if you want to learn even more check out these quality resources.
    ul.external-links
      li
        a href="https://youtu.be/Vj7NZ6FiQvo?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid" What the Flexbox 
        p  A 20 video tutorial by <a href="//twitter.com/wesbos">Wes Bos</a> to get you up to speed.
      li
        a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" CSSTricks Flexbox cheat sheet
        p  The go to site for all things styling has an excellent reference sheet.
      li
        a href="https://philipwalton.github.io/solved-by-flexbox/" Solved by Flexbox
        p  Common layout problems succinctly solved with flexbox.
      li
        a href="https://github.com/postcss/autoprefixer" Autoprefixer
        p Flexbox is getting some major action on production sites but you still have to prefix it for the best support. This is the best tool out there for that.
      li
        a href="http://jonibologna.com/flexbox-cheatsheet/" Flexbox Cheatsheet Cheatsheet
        p Another great cheatsheet, this one by <a href="https://twitter.com/JoniTrythall">Joni Trythall</a>.

.wrapper-container
  footer    

            
          
!

CSS

            
              @import "bourbon";
@import "neat";
$base-font-family: 'Libre Baskerville', serif;
$heading-font-family: 'Archivo Narrow', sans-serif;
$subtle-border: 1px dashed tint(gray, 50%);
$primary-color: adjust-hue(coral, -125deg);
@mixin element-border($border-width: 1px, $border-color: gray, $padding: 1em) {
  border: $border-width solid tint($border-color, 50%);
  padding: $padding;
}

/////
.old-school {
  border: 4px solid gray;
  border-radius: 3px;

  ul li {
    /* float: left; */
    /* width: calc(100% / 6); */
    
    /* @include span-columns(2); */

    border: 1px solid tint(gray, 70%);
    padding: 1em;
    text-align: center;
    
    &:last-of-type {
      @include omega;
    }
  }
}

.new-school {
  border: 4px solid orange;
  border-radius: 3px;

  ul {
    /* display: flex; */
    /* flex-wrap: wrap; */
    justify-content: space-around;
    text-align: center;
    
    & li {
      border: 1px solid tint(orange, 50%);
      flex: 1 0 auto;
      padding: 1em;
      
      /*&:not(:last-of-type) {
        margin-right: 1.5em;
      }*/
    }
  }
}

.flex-content {
  border: $subtle-border;
  padding: 3px;
  display: flex;
  margin-top: 1em;
  text-align: center;

  li {
    @include element-border(1px, $primary-color);
    flex: 1;
    font-family: monospace;
  }
}

.flex-direction {
  &.column {
    flex-direction: column;
  }
}

.flex-justification {
  border: $subtle-border;
  height: 200px;
  padding: 3px;
  justify-content: flex-start;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  
  align-items: flex-start;
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
  /* align-items: stretch; */ //default
  
  li {
    flex-grow: unset;
  }
  
 /* li:nth-child(2) {
    align-self: flex-end;
    background-color: $primary-color;
    color: white;
  }*/
}

.flex-order {
  @for $i from 1 through 6 {
    li:nth-child(#{$i}) {
      order: #{$i}; //by default each flex-item has an order value of 0
    }
  }

   li:nth-child(3) {
    background-color: $primary-color;
    color: white;
    order: 0;
  }
}

.flex-grow {
  li:nth-child(2) {
    background-color: $primary-color;
    color: white;
    flex-grow: 4;
    //default value is 0
    //this child will take up twice as much space as the others.
  }
}

.flex-basis {
  li {
    flex-shrink: 0;
    flex-basis: 40%;
    //This defines the default size of an element before the remaining space is distributed.
  }
  
  li:nth-child(2) {
    background-color: $primary-color;
    color: white;
    flex-shrink: 1;
    //This defines the ability for a flex item to shrink if necessary.
  }
}

.flex-shrink {
  li {
    /* flex-basis: 800px; */
    flex: 1 0 500px;
  }
  
  li:nth-child(2) {
    background-color: $primary-color;
    color: white;
    flex-shrink: 1;
  }
}

.flex-shorthand {
  flex-wrap: wrap;
  
  li {
    flex: 1;
  }
  
  
  li:nth-child(2) {
    flex: 6;
  }
}
/////

body {
  font-family: $base-font-family;
  line-height: 1.5;
}

.wrapper-container {
  background-color: $primary-color;
  
  h1 {
    color: adjust-hue($primary-color, -60%);
  }
  
  p {
    color: white;
  }
}

a {
  border-bottom: 1px solid $primary-color;
  font-family: $heading-font-family;
  font-size: 1.1em;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
  transition: border-bottom-width .15s;
  
  &:hover,
  &:active {
    border-bottom-width: 5px;
  }
}

img {
  max-width: 100%;
  margin-bottom: 2em;
}

pre {
  background-color: tint(gray, 95%);
  border-radius: 3px;
  font-family: monospace;
  font-size: 1.25em;
  line-height: 1.5;
  margin-top: 1em;
  overflow-y: scroll;
  padding: 1em;
  border: 1px solid tint(gray, 75%);
}

.container {
  @include outer-container;
  color: #666;
  padding: 3em;
}

.leadin {
  font-size: 1.75em;
  line-height: 1.6;
  margin: 6em 0;
  
  h1 {
    font-size: 1.35em;
    margin-bottom: .5em;
  }
  
  p {
    margin-bottom: 1em;
  }
}

.leadin,
p {
  max-width: 800px;
}

section {
  margin-top: 6em;
}

h1,
h3,
p {
  margin-bottom: .75em;
}

h1,
h3 {
  color: $primary-color;
  font-family: $heading-font-family;
  font-weight: bold;
}

h1 {
  font-size: 1em;
  letter-spacing: 1px;
  margin-bottom: 0;
  text-transform: uppercase;
}

h3 {
  color: #666;
  font-size: 2em;
  font-weight: normal;
  letter-spacing: .35px;
  line-height: 1.3;
  margin-bottom: 1em;
}

nav {
  font-family: monospace;
  padding: 3em;
  position: relative;
  
  &:before {
    @include position(absolute, 0 null null 0);
    background: tint(gray, 65%);
    content: "nav";
    padding: .25em;
  }
  
  ul {
    @include clearfix;
    border: $subtle-border;
    padding: 2px;
    position: relative;
    
    &:before {
      @include position(absolute, 0 null null 0);
      background: tint(gray, 65%);
      content: "ul";
      padding: .25em;
    }
  }
  
  li {
    position: relative;
    
    &:before {
      @include position(absolute, 0 0 null null);
      background: tint(gray, 85%);
      content: "li";
      padding: .25em;
    }
  }
}

.external-links {
  li {
    font-size: em(14);
    line-height: 1.33;
    margin-bottom: 1em;
    
    &:not(:last-of-type) {
      margin-right: $gutter;
    }
    
    p {
      margin-top: .5em;
    }
  }
}

footer {
  background-image: url("https://media.giphy.com/media/aRIJMeRvt0g6s/giphy.gif");
  border-top: 6px solid $primary-color;
  border-radius: 3px;
  background-size: 25%;
  display: flex;
  justify-content: center;
  margin-top: 3em;
  height: 290px;
}

            
          
!

JS

            
              
            
          
!
999px

Console