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

              
                <h1 class="marker">Multiple layouts, one flexible partial</h1>

<div class="o-page-grid o-container">
  <h2 class="marker h-accessibility">Headers</h2>
  <h3 class="marker o-grid__item--full"><span class="o-container" id="generic">01. Generic Header</span></h3>
  <header class="c-page-header o-grid__item--full">
    <div class="c-page-header__container o-container">
      <h1 class="c-page-header__title h-text--h1"><span class="c-page-header__title-text">0 1 2 3 4 5 6 7 8 9 10 11 12</span></h1><a class="c-page-header__pretitle h-text--pretitle" href="#">Generic</a><span class="c-page-header__posttitle h-text--extra-large">Resize to see the col constraint on title change</span>
    </div>
  </header>
  <h3 class="marker o-grid__item--full" id="home"><span class="o-container">02. Home Page Header</span></h3>
  <header class="c-page-header o-grid__item--full c-page-header--homepage" style="background-image:url('https://images.pexels.com/photos/39391/landscape-nature-mountains-road-39391.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260'); background-size:cover; background-position: right top;">
    <div class="c-page-header__container o-container">
      <h1 class="c-page-header__title h-text--h1">

        <span class="c-page-header__keyword"><span id="typer">Political</span>

        </span>

        <span class="c-page-header__title-text">Theatre Venue</span></h1><span class="c-page-header__posttitle h-text--extra-large">Welcome to Scotland's most exciting theatre</span>
    </div>
  </header>
  <h3 class="marker o-grid__item--full"  id="hero"><span class="o-container">03. Hero Header</span></h3>
  <header class="c-page-header o-grid__item--full c-page-header--hero">
    <div class="c-page-header__image"><img src="https://images.pexels.com/photos/179845/pexels-photo-179845.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260" /></div>
    <div class="c-page-header__container o-container">
      <h1 class="c-page-header__title h-text--h1"><span class="c-page-header__keyword"></span><span class="c-page-header__title-text">Hero header title text</span></h1><span class="c-page-header__pretitle h-text--pretitle">Category</span>
      <nav class="c-page-header__nav c-nav c-nav--secondary h-text--h6 h-text--black">
        <ul class="c-nav__list">
          <li class="c-nav__item"><a class="c-nav__link" href="#">Calendar</a></li>
          <li class="c-nav__item"><a class="c-nav__link" href="#">Access</a></li>
          <li class="c-nav__item"><a class="c-nav__link" href="#">Listings</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <h3 class="marker o-grid__item--full" id="event"><span class="o-container">04. Event Header</span></h3>
  <header class="c-page-header c-page-header--event o-grid__item--full">
    <div class="c-page-header__image">
      <img src="https://images.pexels.com/photos/358010/pexels-photo-358010.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="A stock image of ballet dancers" />
    </div>
    <div class="c-page-header__container o-container">
      <h1 class="c-page-header__title h-text--h1"><span class="c-page-header__title-text">
        The event title with ten fields, five are free text
      </span></h1>
      <span class="c-page-header__producer h-text--pretitle h-text--bold"> Producer or Company<span class="h-accessibility">.</span></span>
      <span class="c-page-header__credit h-text--extra-large">
        Credit for Writer<span class="h-accessibility">.</span>
      </span>

      <div class="c-page-header__quote h-only-desktop">
        <blockquote class="c-quote c-quote--featured">
          <p class="c-quote__rating c-quote__rating--five">
            <span class="c-quote__rating--text">Five Stars</span>
          </p>

          <p class="c-quote__text h-text--extra-large">Example quote that might go on a while. It could be 140ch</p>
          <footer class="c-quote__footer"><cite class="c-quote__cite h-text--pretitle">Example Blurber</cite></footer>
        </blockquote>
      </div>
    </div>
    <section class="c-page-header__infobar">
      <span class="o-container o-page-grid">
      <span class="c-page-header__date h-text--h4 h-text--black h-text--uppercase o-page-grid__item--sidebar">
        <time datetime="2019-03-30T20:30:00+00:00" itemprop="startDate">Sat 30 Mar 2019</time> – <time datetime="2021-01-01T20:15:00+00:00" itemprop="endDate">Fri 1 Jan 2021</time></span>
      <a href="#datesandtimes" class="o-page-grid__sidebar c-page-header__action o-button">Choose dates &amp; Book</a></span>
    </section>

  </header>
  <h3 class="marker o-grid__item--full" id="search"><span class="o-container">05. Search Header</span></h3>
  <header class="c-page-header c-page-header--search o-grid__item--full">
    <div class="c-page-header__container o-container">
      <h1 class="c-page-header__title h-text--h1">
        <span class="c-page-header__title-text">Search Page, results are in Search Results List</span></h1>
      <div class="c-page-header__search">
        <div class="c-form__field">
          <label for="search-page" class="h-accessibility">Enter search terms</label>
          <input id="search-page" name="search-page" type="Search" placeholder="Search" class="c-form__input c-form__input--search" /></div>
      </div>

    </div>
  </header>
</div>
              
            
!

CSS

              
                .c-page-header {
  //list all possible elements of header, quick ref for fields
  @include template(pretitle, title, producer, credit, quote, posttitle, nav, search);
  
  // generic layout for most headers
  &__container {
    display: grid;
    grid-template-columns: 7fr 1fr 4fr; //A generic page header layout. Title is contained within 7 columns. A sidebar may be present on the page (of 4 cols width).
    grid-template-areas: //A little map of the layout. The auto assign mixin @template places each element in the named area for us. 
      "pretitle  . ."
      "title     . ."
      "posttitle . .";
    @include media(tablet) {
      grid-template-columns: 8fr 1fr 3fr; //5/6 on tablet no sidebar
    }
    @include media(phone) {
      grid-template-columns: 1fr; //stack
      grid-template-areas: "pretitle" "title" "posttitle";
    }
  }
  
  // VARIATIONS: homepage, hero, event, search
  
  &--homepage {
    @include theme; // point to colour rules stored as a theme model
    .c-page-header__container {
      margin-bottom: $b*1.75;
      grid-template-rows: 33vmin 1fr min-content;
      grid-template-columns: 8fr 4fr;
      grid-template-areas:
        ".         . "
        "title     ."
        "posttitle .";
    }
  }
  
  &--hero {
    .c-page-header__container {
      grid-template-columns: 7fr 1fr 4fr; // same as generic but let's write it out for the record this time
      grid-template-areas:
        "pretitle . ."
        "title    . nav";
      @include media(tablet) {
        grid-template-columns: 8fr 4fr; //2/3 on tablet
        grid-template-areas: "pretitle ." "title ." ". nav";
      }
      @include media(phone) {
        grid-template-columns: 1fr;
        grid-template-areas: "pretitle" "title" "nav"; //stack on phone
      }
    }
  }

  &--event {
    .c-page-header__container {
      grid-template-columns: 7fr 1fr 4fr; // same as generic
      grid-template-areas:
        "producer .  . "
        "title    .  quote "
        "credit   .  quote   "
        ".        .  quote";

      @include media(tablet) {
        grid-template-columns: 10fr 2fr;
        grid-template-areas:
          "producer ."
          "title ."
          "credit .";
      }
      @include media(phone) {
        grid-template-columns: 1fr; //We can easily switch to 1 column on phone like this. We set the column template to 1fr and then write one element per row. 
        grid-template-areas:
          "producer"
          "title"
          "credit";
      }
    }
  }
  
  &--search {
    .c-page-header__container {
      margin-top: $b*6;
      grid-template-columns: 3fr 6fr 3fr; 
      grid-template-areas: ". search .";
      @include media(phone) {
        grid-template-columns: 0 1fr 0; // collapsing columns to stack content
      }
    }
    .c-page-header__title {@include screen(hide);} // it's pertinent to note that title is hidden on search only
  }
}

  // NOW ELEMENTS -- we often will be asked to pull elements from one header type to another -- I prefer elements after layout, others prefer elements first. I know I am nearly always looking for the layout first when I backtrack...
 .c-page-header {
    &__image {
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      transform: translateY(-33vw);
      margin-bottom: calc(-33vw + #{$b} );
      //I just budged this up to make this dummy image a better crop -- in production the images are sized in Imager so this would not be here
    }
  }
    &__title {
      margin-bottom: $b*0.75;
      //this designer sets bottom margins individually on elements, not as regular proportions of text size (em) or regular spacing (grid gap) so we set margins per element too to honour the spec. This is a primary reason for eschewing css grid gutters
    }
    &__credit {
      margin-bottom: $b*1.25;
    }
    &__quote {
      @include monotheme;
    }
    //this infobar is arguably a component in itself
    &__infobar {
      @include theme;
      padding: $b 0;
      margin-bottom: $b;
      > .o-page-grid {
        // here we look at adding a page grid as an interior grid
        align-items: center;
        margin-bottom: 0;
      }
      .c-page-header__date {
        @include media(phone) {
          text-align: center;
          grid-area: 1 / 1 / 1 / 13; //sometimes number spec is honestly clearer
        }
      }
      .c-page-header__action {
        padding: 17px 30px;
        @include var(border-color, currentColor);
        @include on-event {
          @include fliptheme;
        }
      }
    }   
    &__search {
      margin: auto #{$b *0.3}; // to align this perfectly with the 12 col grid below (marker) we multiply the grid gap by the sum of the fr units to each side of the column (3 and 3 in this case)
      @include media(phone) {
        margin: 0;
      } // no grid gap no margin adjustment. try removing this line
    }
    &__nav {
      @include media(desktop) {align-self:end}
      > * { margin: 0}
    }
   &__keyword, &__title-text { display: block; }
   &__keyword:not(:empty) {
    @include var(color,theme);
    @media (max-width: 960px) { // just making this word a bit more readable on small screens
      @include theme;
      padding: 0.25em;
      display: inline-block;

    }
  }
   
   
   
   
   
   // --theme: #f50; //bonus round, play with resetting the theme on the fly
  }


//see library for external resources: https://codepen.io/Sally_McGrath/pen/zbzQMB
.marker {font-family: Futura,sans-serif; font-weight:100; @include theme; padding:1rem; margin-bottom:-.5rem;--theme:#222;
}
              
            
!

JS

              
                // in production we use vue-typer but vue is a bit of a pain in Codepen so I have slung https://safi.me.uk/typewriterjs/ in for now

var app = document.getElementById('typer');

var typewriter = new Typewriter(app, {
    loop: true
});

typewriter.typeString('Provocative')
    .deleteAll()
    .typeString('Funny')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Surprising')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Dramatic')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Family')
    .pauseFor(2500)
    .deleteAll()
    .start();



              
            
!
999px

Console