cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <h1>Code snippet repository</h1>
<div class="repo" id="repo">
  <input class="search" placeholder="Search">
  <span class="sort" data-sort="name">Sort by name</span>
  <span class="sort" data-sort="lang">Sort by language</span>
  <br><br>
  <div class="list">
    <!-- A -->
    <div class="snippet">
      <details>
        <summary><span class="name">Ajax loading json</span> <span class="lang">[jquery]</span></summary>
        <pre><code class="code js">
var myData = {};
$.ajax({
  'async': false,
  'url': 'data/data.json',
  'dataType': 'json',
  'success': function(data) {
    myData = data;
  },
  'error': function() {
    console.log('ERROR: could not load data json');
  }
});        
    </code></pre>
      </details>
    </div> 
    <!-- C -->
    <div class="snippet">
      <details>
        <summary><span class="name">Center horizontally</span> <span class="lang">[SCSS]</span></summary>
        <pre><code class="code scss">
  @mixin hcenter(){
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
        </code></pre>
      </details>
    </div>
    <div class="snippet">
      <details>
        <summary><span class="name">Center vertically</span> <span class="lang">[SCSS]</span></summary>
        <pre><code class="code scss">
  @mixin vcenter(){
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
  }
        </code></pre>
      </details>
    </div>
    <div class="snippet">
      <details>
        <summary><span class="name">Center both horizontally and vertically</span> <span class="lang">[SCSS]</span></summary>
        <pre><code class="code scss">
  @mixin hvcenter(){
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
        </code></pre>
      </details>
    </div>
    <!-- D -->
    <div class="snippet">
      <details>
        <summary><span class="name">Details &amp; Summary</span> <span class="lang">[HTML]</span></summary>
        <pre><code class="code html">
&lt;details>
  &lt;summary>Title&lt;/summary>
  Further information
&lt;/details>
        </code></pre>
      </details>
    </div>
    <div class="snippet">
      <details>
        <summary><span class="name">Disclaimer</span> <span class="lang">[text]</span></summary>
        <pre><code class="text">
/*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.
*/
</code></pre>
      </details>
    </div>
    <!-- F -->
    <div class="snippet">
      <details>
        <summary><span class="name">For loop generating css rules</span> <span class="lang">[SCSS]</span></summary>
        <pre><code class="code scss">
@for $i from 1 through 20 {
  $increment: 18;
  &:nth-child( #{$i} ) {
    $r: $i * $increment;
    transform: rotate(#{$r}deg);
  }
}
        </code></pre>
      </details>
    </div> 
    <div class="snippet">
      <details>
        <summary><span class="name">For loop generating html elements</span> <span class="lang">[PUG]</span></summary>
        <pre><code class="code js">
  .wrapper(title="hello world")
    - for (var x = 1; x &lt; 21; x++)
      div(class= x)
        </code></pre>
      </details>
    </div> 
    <div class="snippet">
      <details>
        <summary><span class="name">Force GPU acceleration</span> <span class="lang">[CSS]</span></summary>
        <pre><code class="code css">
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
        </code></pre>
      </details>
    </div> 
    <!-- G -->
    <div class="snippet">
      <details>
        <summary><span class="name">Get URL parameter</span> <span class="lang">[JS]</span></summary>
        <pre><code class="code">
var getURLParameter = function(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;};
var urlVar = getURLParameter("varname");
    </code></pre>
      </details>
    </div> 
    <div class="snippet">
      <details>
        <summary><span class="name">Gradients</span> <span class="lang">[CSS]</span></summary>
        <pre><code class="code css">
/*linear*/
background: linear-gradient(red, blue);
background: linear-gradient(90deg, red, blue);
background: linear-gradient(90deg, red 0%, blue 50%, yellow 100%);
/*radial*/
background: radial-gradient(red, blue);
background: radial-gradient(circle closest-side, red, blue);
background: radial-gradient(ellipse at top right, red 0%, blue 50%, yellow 100%);
/*repeating*/
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
background: repeating-radial-gradient(circle at 0 0, red, blue 50px);
        </code></pre>
      </details>
    </div>
    <!-- M -->
    <div class="snippet">
      <details>
        <summary><span class="name">Microformat hCard</span> <span class="lang">[HTML]</span></summary>
        <pre><code class="code html">
&lt;div id="hcard-Firstname-Lastname" class="vcard">
 &lt;a class="url fn n" href="http://website.net">
  &lt;span class="given-name">Firstname&lt;/span>
  &lt;span class="additional-name">Middlename&lt;/span>
  &lt;span class="family-name">Lastname&lt;/span>
&lt;/a>
 &lt;div class="org">Company&lt;/div>
 &lt;a class="email" href="mailto:chriscoyier@gmail.com">firstname@website.net&lt;/a>
 &lt;div class="adr">
  &lt;div class="street-address">123 Streetname&lt;/div>
  &lt;span class="locality">Cityname&lt;/span>, &lt;span class="region">Region &lt;/span> &lt;span class="postal-code">12345&lt;/span>
  &lt;span class="country-name">Countryname&lt;/span>
 &lt;/div>
 &lt;div class="tel">555-555-5555&lt;/div>
&lt;/div>
        </code></pre>
      </details>
    </div>
    <!-- R -->
    <div class="snippet">
      <details>
        <summary><span class="name">Random integer between two numbers</span> <span class="lang">[JS]</span></summary>
        <pre><code class="code js">
function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
        </code></pre>
      </details>
    </div>
    <!-- S -->
    <div class="snippet">
      <details>
        <summary><span class="name">Scrollbars customizer </span> <span class="lang">[CSS]</span></summary>
        <pre><code class="code scss">
  ::-webkit-scrollbar-button{
    display: none;
  }
  ::-webkit-scrollbar {
    width:  2px;
    height: 2px;
  }
  ::-webkit-scrollbar-thumb {
    background: transparent;
    border: 1px solid rgba(220,220,220,1);
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    width: 4px;
    border: 2px solid transparent;
  }
  ::-webkit-scrollbar-track-piece {
    background: transparent;
    width: 4px;
    border: 2px solid transparent;
  }
  body {
    scrollbar-face-color: white;
    scrollbar-track-color: transparent;
  }
        </code></pre>
      </details>
    </div>
    <div class="snippet">
      <details>
        <summary><span class="name">Scrollbars customizer</span> <span class="lang">[SCSS]</span></summary>
        <pre><code class="code scss">
  @mixin scrollbars($size, $foreground-color, $background-color) {
    ::-webkit-scrollbar-button{
      display: none;
    }
    ::-webkit-scrollbar {
      width:  $size;
      height: $size;
    }
    ::-webkit-scrollbar-thumb {
      background: $foreground-color;
      border: 1px solid lighten($foreground-color, 10%);
      cursor: pointer;
    }
    ::-webkit-scrollbar-track {
      background: $background-color;
      width: calc(#{$size} * 2);
      border: 2px solid lighten($background-color, 10%);
    }
    ::-webkit-scrollbar-track-piece {
      background: $background-color;
      width: calc(#{$size} / 2);
      border: 2px solid lighten($background-color, 10%);
    }
    body {
      scrollbar-face-color: $foreground-color;
      scrollbar-track-color: $background-color;
    }
  }
        </code></pre>

      </details>
    </div>
    <div class="snippet">
      <details>
        <summary><span class="name">Shrug emoticon</span> <span class="lang">[text]</span></summary>
        <pre><code class="code">
¯\_(ツ)_/¯
        </code></pre>
      </details>
    </div>
    <!-- T -->
    <div class="snippet">
      <details>
        <summary><span class="name">Table markup</span> <span class="lang">[HTML]</span></summary>
        <pre><code class="code html">
&lt;table>
	&lt;thead>
		&lt;tr>
			&lt;th>&lt;/th>
			&lt;th>&lt;/th>
		&lt;/tr>
	&lt;/thead>
	&lt;tbody>
		&lt;tr>
			&lt;td>&lt;/td>
			&lt;td>&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;td>&lt;/td>
			&lt;td>&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
        </code></pre>
      </details>
    </div> 
    <!-- V -->
    <div class="snippet">
      <details>
        <summary><span class="name">Video click to play/pause</span> <span class="lang">[jQuery]</span></summary>
        <pre><code class="code js">
    $('video').on('click', function(){
        if(!$(this)[0].paused){
            $(this)[0].pause();
            $(this).attr('controls', false);
        }else{
            $(this)[0].play();
            $(this).attr('controls', true);
        }
    });
        </code></pre>
      </details>
    </div> 
    
<!--     
    <div class="snippet">
      <details>
        <summary><span class="name">Code title</span> <span class="lang">[lang]</span></summary>
        <pre><code class="">
        teh codez
        </code></pre>
      </details>
    </div> 
-->
    
  </div>

</div>

<div class="message">
  &check; Made by <a href="https://codepen.io/pieter-biesemans/" target="_blank" title="&check; check out my other work">Pieter Biesemans</a> with &#9749;, &#128420; &amp; &#8986;</i>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Muli');

@mixin scrollbars($size, $foreground-color, $background-color) {
  ::-webkit-scrollbar-button{
    display: none;
  }
  ::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }
  ::-webkit-scrollbar-thumb {
    background: $foreground-color;
    border: 1px solid lighten($foreground-color, 10%);
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    background: $background-color;
    width: calc(#{$size} * 2);
    border: 2px solid lighten($background-color, 10%);
  }
  ::-webkit-scrollbar-track-piece {
    background: $background-color;
    width: calc(#{$size} / 2);
    border: 2px solid lighten($background-color, 10%);
  }
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

@include scrollbars(5px, white, transparent);

div{
  box-sizing: border-box;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body{
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: white;
  font-family: 'Muli', sans-serif;
  background: #333;
  overflow-x: hidden;
  
  & h1{
    padding: 0.5em;
  }
  
  & .search{
    margin-left: 2em;
    padding: 0.5em;
    border-radius: 0.25em;
    border: 0;
  }
  
  & .sort{
    margin: 0 0.5em;
    cursor: pointer;
    &:after{
      content: '\2193';
      opacity: 0;
      display: inline-block;
      margin-left: 0.5em;
      transition: all 0.5s ease;
    }
    &.asc:after{
      opacity: 1;
      transform: rotate(0);
    }
    &.desc:after{
      opacity: 1;
      transform: rotate(-180deg);
    }
  }
  
  & .snippet{
    width: 100%;
    height: auto;
    padding: 1em;
    transition: all 0.5s ease;
    
    & summary {
      cursor: pointer;
      outline: none;
    }
    
  }
  
  & .message{
    position: absolute;
    right:  0.5vw;
    top: 1vw;
    max-width: 25vw;
    font-size: 0.75em;
    font-family: "Open Sans", sans-serif;
    color: white;

    & a{
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid #444;
      &:hover{
        border-width: 3px;
      }
    }

  }
  
}
            
          
!
            
              /*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.

This Pen uses highlight.js (https://highlightjs.org) for code highlighting and list.js (http://listjs.com) for searching and sorting.

*/

hljs.initHighlightingOnLoad();

var listOptions = {
  valueNames: ['name', 'lang', 'code']
};

var snippetList = new List('repo', listOptions);

 snippetList.on('updated', function (list) {
   var items = document.querySelectorAll('.snippet');
   items.forEach(function(item){
     item.style.opacity = 0;
   });
   setTimeout(function(){
     items.forEach(function(item){
       item.style.opacity = 1;
     });
   },150);
 });
            
          
!
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