css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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="logo">
  <img src="https://printdealcdn.s3.amazonaws.com/img/logo-drukwerkdeal-339a576219.png" alt="logo" width="222" height="42">
</div>

<ol class="slides BareList" id="slides">
  
<li class="slide">
  <h1 class="h--alt slide_title">Professional front-end development</h1>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-orange-bricks.jpg" alt="">
  </div>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">#bada55 CSS</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-badass-css.jpg" alt="">
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Inhoud</h1>
  <ul class="IconList IconList--Arrow">
    <li>Responsive</li>
    <li><abbr title="">CSS</abbr> Architecture</li>
    <li>Tools, Testing &amp; Quality Control</li>
    <li>DWD Style Guide</li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Responsive</h1>
  <ul class="IconList IconList--Check">
    <li><strong>1 codebase</strong> voor alle devices (geen m-dot domein)</li>
    <li>Flexibele images</li>
    <li>Flexibel/fluid grid</li>
    <li><code>@media</code> queries</li>
    <li>Nieuwe workflow en mindset</li>
  </ul>
  <p>Conventies, best practices, net als bij &lsquo;normaal&rsquo; programmeren</p>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Kort: <abbr title="">CSS</abbr> selector best practices</h1>
  <ul class="BareList">
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Cross--Alt"></i>
      </div>
      <div class="Media__Body">
        <p>Selector nesting: <code>#header h1</code>, <code>.myElem ~ h1 > span</code></p>
      </div>
    </li>
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Cross--Alt"></i>
      </div>
      <div class="Media__Body">
        <p>Gebruik van ID's: <code>#myFooter</code>.</p>
      </div>
    </li>
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Cross--Alt"></i>
      </div>
      <div class="Media__Body">
        <p>Qualified selectors: <code>i.Icon</code>, <code>header#myHeader</code>.</p>
      </div>
    </li>
    <li class="Media">
      <div class="Media__Img">
        <i class="Icon Icon--Check--Green"></i>
      </div>
      <div class="Media__Body">
        <p>Classes: <code>.myElement</code>, <code>.Media</code></p>
      </div>
    </li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Specificity</h1>
  <ul class="Island IconList IconList--Arrow">
    <li>Hoe specifiek is de <abbr title="Cascading">CSS</abbr> selector?</li>
    <li>De meest specifieke wordt toegepast</li>
  </ul>
  <table>
    <thead>
      <tr>
        <th>Selector</th>
        <th>Inline styles</th>
        <th>ID's</th>
        <th>Classes, <br />attributes, pseudo-selectors</th>
        <th>Elements, pseudo-elements</th>
        <th>Specificity</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row--bad">
        <td><code>#wrapper p</code></td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
        <td>0101</td>
      </tr>
      <tr class="row--bad">
        <td><code>.right_col p</code></td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>0011</td>
      </tr>
      <tr class="row--bad">
        <td><code>input[type="text"]</code></td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>0011</td>
      </tr>
      <tr class="row--good">
        <td><code>.textinput</code></td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0010</td>
      </tr>
    </tbody>
  </table>
  <p>Oplossing: <b>gebruik classes voor <em>alles</em>!</b></p>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">OOP + CSS => OOCSS</h1>
  <p>Bekende patronen uit OO talen toepassen op <abbr title="">css</abbr>.</p>
  <ul class="IconList IconList--Arrow">
    <li>Single Responsibility Pattern: Doe 1 ding, doe het goed.</li>
    <li>Don&rsquo;t Repeat Yourself: doe het 1 keer.</li>
    <li>Encapsulation: het interesseert me niet hoe een object het doet. Als &lsquo;ie het maar doet.</li>
  </ul>
  <br /><!-- clear -->
  <pre><code class="language-css">.Label {}
.Tooltip {}
.Nav {}
.Icon {}
.Modal {}
</code></pre>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">BEM</h1>
  <p>Block, Element, Modifier</p>
  <div class="row">
    <div class="init-12 medium-7 medium-offset-1 cols">
      <ul class="IconList IconList--Arrow">
        <li>(consistent) Classnames verzinnen moeilijk</li>
        <li>BEM geeft relaties tussen classes binnen een object aan</li>
        <li>Brug tussen design en development</li>
      </ul>
    </div>
    <div class="init-12 medium-4 cols">
      <pre><mark><span class="name">.Car</span></mark> {
  <span class="token">color</span>: <span class="css">green</span>;
  <span class="token">float</span>: <span class="css">none</span>;
}
  
<mark><span class="name">.Car--Batmobile</span></mark></span> {
  <span class="token">color</span>: <span class="css">black</span>;
}

<mark><span class="name">.Car__Wheel</span></mark> {
  <span class="token">color</span>: <span class="css">black</span>;
  <span class="token">border-color</span>: <span class="css">black</span>;
}

<mark><span class="name">.Car__Wheel--WhiteWall</span></mark> {
  <span class="token">border-color</span>: <span class="css">white</span>;
}
</pre>
    </div>
  </div>
</li>
<li class="slide">
  <h1 class="slide_title h--alt">BEM in real life</h1>
  <div class="row">
    <div class="init-12 medium-6 cols">
<pre><code class="language-markup">&lt;span class="Label">Recommended&lt;/span>

&lt;span class="Label Label--Alt">Upsell stuff!&lt;/span>

&lt;span class="Label">
  &lt;i class="Icon Icon--Euro Label__Icon">&lt;/i>
  Buy Now
&lt;/span></code></pre>
      <br>
      <div class="Panel">
        <div class="Label">Recommended</div>
        <br />
        <div class="Label Label--Alt">Upsell stuff!</div>
        <br />
        <div class="Label">
          <i class="Icon Icon--Euro--White Label__Icon"></i>
          Buy now!
        </div>
      </div>
    </div>
    <div class="init-12 medium-6 cols">
      <pre><code class="language-css">.Label {
  display: inline-block;
  border: 1px solid;
  background: green;
  color: white;
}

.Label--Alt {
  background-color: blue;
}

.Label__Icon {
  vertical-align: -0.325em;
  font-size: 2em;
}</code></pre>
    </div>
  </div>
  
</li>

<li class="slide">
  <h1 class="slide_title h--alt">SASS</h1>
  <p>Toolbox: data-types, imports, variables, loops, functions:</p><!--
   --><pre><span class="name">@import</span> <span class="css">'math/functions', 'settings'</span>;
   
<span class="token">@each</span> <span class="name">$bp-name</span>, <span class="name">$bp-width</span> in <span class="name">$breakpoints</span> {
  <span class="token">@include</span> breakpoint( <span class="name">$bp-width</span> ) {
    <span class="token">@for</span> <span class="name">$col</span> from <span class="name">$base-grid-columns</span> {
      <span class="css">.</span><span class="token">#{</span><span class="name">$bp-name</span><span class="token">}</span><span class="css">-</span><span class="token">#{</span><span class="name">$col</span><span class="token">}</span> {
        <span class="css">width</span>: <span class="token">percentage(</span> <span class="name">$col</span> / <span class="name">$base-grid-columns</span> <span class="token">)</span>;
      }
    }
  }
}</pre>
    <p>output:</p>
    <pre><code class="language-css">.init-12 { width: 91.6666%; }
.init-1  { width: 8.3334%; }

@media screen and (min-width: 33em) {
  .medium-12 { width: 91.6666%; }
  .medium-1  { width: 8.3334%; }
}

@media screen and (min-width: 55em) {
  .large-12 { width: 91.6666%; }
  .large-1  { width: 8.3334%; }
}</code></pre>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">CSS Architectuur</h1>
  <div class="row">
    <div class="init-12 medium-7 cols">
      <p>Gelaagde architectuur voor verschillende niveaus van abstractie.</p>
      <ul class="IconList IconList--Arrow">
        <li>Core: basisobjecten zoals grid, media, mixins, etc.</li>
        <li>Skin: bevat de branding-specifieke zaken als kleuren, fonts, etc.</li>
        <li>Theme: Specifieke objecten per portal (Drukwerkdeal.nl, careers.printdeal.com, Zendesk).</li>
      </ul>
    </div>
    <div class="init-12 medium-4 medium-offset-1 cols">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-layered.jpg" alt="" />
    </div>
  </div>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Cool. En nu?</h1>
  <p>Tools, Testing &amp; Quality Control</p>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Wat willen we kunnen?</h1>
  <ul class="IconList IconList--Arrow">
    <li>Sass omzetten naar CSS</li>
    <li>CSS Minifyen</li>
    <li>Properties automatisch prefixen: <code class="language-css">background-size: cover;</code> &rarr; <code class="language-css">-webkit-background-size: cover;</code></li>
    <li>PNG fallbacks van SVG&rsquo;s genereren</li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Ok. Wat nog meer?</h1>
  <ul class="IconList IconList--Arrow">
    <li>Code formatting checken</li>
    <li>Url&rsquo;s van assets automatisch updaten: <code class="language-css">background-image: url(&lsquo;logo-dwd.svg&rsquo;);</code> &rarr; <code class="language-css">background-image: url(&lsquo;logo-dwd-kj43b3k2.svg&rsquo;);</code></li>
    <li>Statistieken over de code verzamelen en naar API sturen voor coole grafiekjes :)</li>
    <li>Uploaden naar Amazon S3 CDN</li>
    <li>En <em>alles</em> automatisch</li>
  </ul>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Enter: Gulp</h1>
  <div class="row">
    <div class="init-12 medium-9 cols">
  <p>Doet. Alles.</p>
  <pre><code class="language-javascript">gulp.task("css:sass", function () {
    var themeHookFiles = config.paths.css.themes.map(function (theme) {
        return theme.folder + theme.name + ".scss";
    });

    return gulp.src(themeHookFiles)
        .pipe($.rubySass(config.settings.rubySass))
        .pipe($.autoprefixer(config.settings.autoprefixer))
        .pipe($.header(config.file.banner, { pkg: pkg }))
        .pipe(gulp.dest(config.paths.css.test))

        .pipe($.minifyCss(config.settings.minifyCss))
        .pipe($.header(config.file.banner, { pkg: pkg }))
        .pipe($.rename({ suffix: ".min" }))
        .pipe(gulp.dest(config.paths.css.test));
});</code></pre>
      <br />
    <pre>$ gulp css:sass</pre>
    </div>
    <div class="init-12 medium-3 cols">
      <img src="https://raw.github.com/gulpjs/artwork/master/gulp.png" alt="">
    </div>
  </div>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">Style Guide</h1>
  <ul class="IconList IconList--Arrow">
    <li>Referentie voor developers en stakeholders</li>
    <li>Verzameling van alle OOCSS Objecten</li>
    <li>Uitleg en codevoorbeelden</li>
    <li>Complete documentatie architectuur en code-afspraken</li>
    <li>Statistieken van codebase</li>
  </ul>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">Nieuwe objecten</h1>
  <p>Verklein de effort: meer nieuw = meer testen, documenteren, etc.</p>
  <ul class="IconList IconList--Check">
    <li>Is het <em>echt</em> nieuw?</li>
    <li>Maak zoveel mogelijk gebruik van bestaande objecten</li>
    <li>Bestaand object uitbreiden</li>
    <li>Of maak iets compleet nieuws</li>
  </ul>
</li>

<li class="slide">
  <h1 class="h--alt slide_title">Let's talk about LEGO</h1>
  <div class="row">
    <div class="init-6 cols"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-star-wars.png" alt="" /></div>
    <div class="init-6 cols"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/dwd-colored-bricks.jpg" alt="" /></div>
  </div>
</li>

<!--<li class="slide">
  <h1 class="h--alt slide_title">LEGO video</h1>
  <a href="http://natgeotv.com/nl/mega-factories-2/videos/lego-production" target="_blank">Megafactories LEGO <i class="Icon Icon--ExternalLink Icon--Small"></i></a>
</li>-->

<li class="slide">
  <h1 class="slide_title h--alt">Inzicht:</h1>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Code stats</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/Screen%20Shot%202017-09-22%20at%2013.56.51.png" alt="">
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Specificity Graph</h1>
  <p data-height="466" data-theme-id="8453" data-slug-hash="BbwqC" data-default-tab="result" data-user="bartveneman" class='codepen'>See the Pen <a href='https://codepen.io/bartveneman/pen/BbwqC/'>Specificity graph</a> by Bart Veneman (<a href='https://codepen.io/bartveneman'>@bartveneman</a>) on <a href='https://codepen.io'>CodePen</a>.</p>
  <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</li>

<li class="slide">
  <h1 class="slide_title h--alt">Resultaat: kwaliteit</h1>
  <ul class="IconList IconList--Check">
    <li>Consistent kleurgebruik, font-sizes, witruimte, &hellip;</li>
    <li>Testbare code</li>
    <li>Voorspelbare code door documentatie en afspraken</li>
    <li>Verkleinen foutmarge door automatisering m.b.v. Gulp</li>
    <li><em>Inzicht</em> in kwaliteit</li>
  </ul>
</li>
  
</ol>
            
          
!
            
              @import bourbon

$c-gray-lighter: #ebebeb
$c-gray-light: #d7d7d7
$c-gray-medium: #aaaaaa
$c-white: #ffffff
$c-black: #191919
$c-magenta-shade: #af0068
$c-blue-shade: #008cc9
$c-yellow: #fddb00
$c-green-shade: #66ad00

html
  overflow: hidden
  background: url("https://dl.dropboxusercontent.com/u/25917336/dwd-logo.svg") no-repeat  50% 50% $c-white
  background-size: auto 130%
  @media (min-width: 24em)
    font-size: 3.6vw
  @media (min-width: 44em)
    font-size: 2em
    
.cols,
.col
  @media (min-width: 24em)
    font-size: 18px
  @media (min-width: 44em)
    font-size: 24px
    
html,    
body,
.slides,
.slide
  height: 100%
  width: 100%
    
.slides
  display: table
    
.slide
  text-align: center
  vertical-align: middle
  padding: 12px
  display: none
  
.slide-active
  display: table-cell
  
.logo
  position: fixed
  top: 12px
  right: 12px
  width: 25%
  img 
    width: 100%
  
code
  color: $c-magenta-shade 
  
h1
  margin-bottom: 24px
  
h2
  margin-bottom: 24px
  
.slide ul,
.slide ol
  display: inline-block
  text-align: left
  max-width: 26em
        
.Panel,
pre
  text-align: left
  padding: .75em 1em
  border: 1px solid $c-gray-medium
  background: $c-gray-light
  display: inline-block
    
.Label__Icon
  font-size: 2em
  vertical-align: -.375em
  
pre
  font-size: .675em
  line-height: 1.3
  color: $c-black
.class, 
.token
  color: $c-blue-shade
  text-decoration: none
  pointer-events: none
.name,
.token.name, 
.token.number,
.token.atrule-id,
.token.attr-name
  color: $c-magenta-shade
.css, 
.token.property,
.token.function,
.token.attr-value
  color: $c-green-shade
.comment
  color: $c-gray-medium
.token.punctuation,
.token.atrule
  color: $c-black
mark
  background: $c-yellow
  
iframe:not(.cp_embed_iframe)
  border: 1px solid $c-gray-light
iframe
  resize: vertical
    
table
  font-size: .5em
  max-width: 55em
p,
table,
  margin-right: auto
  margin-left: auto
p
  max-width: 33em
  
table
  table-layout: fixed
.row--bad
  background-color: rgba(255, 0, 0, .3)
.row--good
  background-color: rgba(0, 200, 0, .3)
    
.slide img
.slide iframe
  border: 1px solid $c-gray-light
  max-height: 50vh
  width: 100%
  
.map
  position: fixed
  left: 0
  bottom: 0
  text-align: center
  width: 100%
  margin: 0 auto

.map_item
  display: inline-block
  width: .5em
  padding-bottom: .5em
  background: $c-gray-light
  border-radius: 50%
  margin-right: .125em
  transition: background .3s ease
  cursor: pointer
  position: relative
  box-shadow: 0 0 0 1px $c-gray-medium
  &:before,
  &:after
    position: absolute
    bottom: 100%
    left: 50%
    transform: translateX(-50%)
    display: none
  &:before
    content: attr(data-title)
    margin-bottom: 6px
    background-color: $c-black
    padding: 2px 3px
    color: $c-white
    font-size: 12px
    border-radius: 2px
    white-space: nowrap
  &:after
    content: ""
    border-width: 4px
    border-style: solid
    border-color: $c-black transparent transparent
  &:hover:before,
  &:hover:after
    display: inline-block
    
.map_item-active
  background: $c-gray-medium
  
.indicator
  position: fixed
  right: 1em
  bottom: 1em
  font-size: .5em
  line-height: 1
  color: $c-gray-medium
  
.slide_title
  font-size: 2em
  
code
  border: 1px solid $c-gray-medium
  background: $c-gray-light
  padding: 0 .25em
  white-space: nowrap
    
pre > code
  white-space: inherit
  background: none
  border: none
  color: $c-black
  
abbr
  text-transform: uppercase
  font-size: .875em
    
.IconList > li:before
  vertical-align: -.15em
            
          
!
            
              console.clear();

(function (window, document, undefined) {
  "use strict";
  
  var ls = window.localStorage,
      _getState = function () {
        return parseInt(JSON.parse(ls.getItem("slideIndex")), 10);
      },
      _setState = function (index) {
        return ls.setItem("slideIndex", JSON.stringify(index));
      },
      
      _a = "-active",
      _s = "slide",
      _sa = _s + _a,
      _m = "map_item",
      _ma = _m + _a,
      
      _slides = document.getElementById("slides").getElementsByClassName(_s),
      _map,
      _mapItems,
      _currentIndex = _getState() || 0,
      _indicator,
      
      _swipe = {
        start: null,
        delta: null,
        treshold: window.innerWidth / 3
      };

  _slides[_currentIndex].className = [_s, _sa].join(" ");

  // Run this as a kickoff to generate the map
  (function () {
    var i, item;

    _map = document.createElement("ul");
    _indicator = document.createElement("div");
    
    for (i = 0; i < _slides.length; i += 1) {
      item = document.createElement("li");
      item.setAttribute("data-index", i);
      item.setAttribute("data-title", (i + 1) + ". " + _slides[i].getElementsByTagName("h1")[0].firstChild.nodeValue.toString());
      item.className = i === _currentIndex ?  [_m, _ma].join(" ") :  _m;
      _map.appendChild(item);
    }

    _mapItems = _map.childNodes;
    _map.className = "map BareList";
    _map.setAttribute("id", "map");
    _indicator.className = "indicator";
    _indicator.setAttribute("id", "indicator");
    document.body.appendChild(_map);
    document.body.appendChild(_indicator);
  }());


  var slide = function (forwards, index) {
    var newIndex = (forwards === null) ? index : forwards ? (_currentIndex + 1) : (_currentIndex - 1),
        followingSlide = _slides[newIndex];

    // Is there a next or previous slide?
    if (followingSlide === undefined) {
      return;
    }

    _slides[_currentIndex].className = _s;
    _mapItems[_currentIndex].className = _m;
    followingSlide.className = [_s, _sa].join(" ");
    _mapItems[newIndex].className = [_m, _ma].join(" ");

    _currentIndex = newIndex;
    _setState(_currentIndex);
    _indicator.textContent = _currentIndex + 1;
  };


  document.addEventListener("keyup", function (event) {
    var key = event.keyCode,
        forwardKeys = [32, 34, 39, 40],
        backKeys = [33, 37, 38],
        triggerKeys = forwardKeys.join(backKeys);

    // No particular triggering key was pressed
    if (triggerKeys.indexOf(key) === -1) {
      return;
    }

    slide(forwardKeys.indexOf(key) > -1);
  }, false);
  
  _map.addEventListener("click", function (event) {
    var clicked = event.target;
    
    if (clicked.className !== _m) {
      return;
    }
    
    slide(null, parseInt(clicked.getAttribute("data-index"), 10));
  });
  
  document.addEventListener("touchstart", function (event) {
    _swipe.start = event.touches.item(0).clientX;
  }, false);
  
  document.addEventListener("touchmove", _.debounce(function (event) {
    var currentPos, direction;

    if (_swipe.start === null) {
      return;
    }

    currentPos = event.touches.item(0).clientX;
    _swipe.delta = currentPos - _swipe.start;
    //_slides[_currentIndex].style.webkitTransform = "translateX(" + _swipe.delta + "px)";

    if (Math.abs(_swipe.delta) > _swipe.treshold) {
      //_slides[_currentIndex].style.webkitTransform = "none";
      slide(_swipe.delta < 0);
      _swipe.start = null;
    }

    event.preventDefault();
  }), false);
  
}(this, this.document));
            
          
!
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.
Loading ..................

Console