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


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


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.


<!-- Template tag can be placed literaly enywhere in the page structure but prabobly best if you place it just before js script that will use it.  -->
<div class="margin-content">
   <h1>Here we are using templeting to create those useless rectangles floating in the middle of the page.</h1>
   <h2>We have 2 lvl template. A wrapper template (mainTemplate)  and the child templates.</h2>
   <h2>To reuse same template in a parent template you need to clone it first (Reasigning template to another variable won't work)!</h2>

<!-- HTML Templates -->
   <!--   Main template with inline css   -->
   <template id="html-bolets-container-template">
      <div id="html-bolets-container" style="position: fixed; top:50%; right:0px; width: auto; height: auto; transform: translateY(-50%); background-color: rgba(3,4,5,0.2); ">
         <div class="" style="padding: 25px; margin-bottom: 10px; background-color: yellow; color: white; display: block; cursor: pointer;"></div>

   <!--  Another template, this time with style block instead inline  -->
   <template id="html-bolet-template">
            background-color: red!important;
            padding: 25px; 
            margin-bottom: 10px;
            background-color: black;
            color: white;
            display: block;
            cursor: pointer;
       <div id="html-bolet" class="test"></div>
   <!--  Yet another template   -->
   <template id="html-something">
       <div id="html-some" class="" style="padding: 25px; margin-bottom: 10px; background-color: black; color: white; display: block; cursor: pointer;">
<!-- HTML Templates ends-->

<!-- js scripts -->
<!-- scripts ends -->


   padding: 10px 50px
   padding-right: 250px
   font-size: 3em


   If you can understand helper functions, you can easly understand the concept of templating using HTML <template>.
   This is pure JS aproach

* @desc helper function 1 (inject)
* @param 1 template to which we want to inject other template
* @param 2 template to be injected
* @param 3 specyfic location in templet from @param 1 in which template @param2 will be injected to. (i set it default because it is convinet for this example, but you should remove this default value)
function inject(targetFragment, srcFragment, targetFragmentLocation = '#html-bolets-container'){

* @desc helper function 2 (getTemplate)
* @param 1 template querySelector from which we will pull content
function getTemplate(templateSelector){
   return document.querySelector(templateSelector).content;

// ====================================================================================================

// main templet
var mainTemplate = getTemplate('#html-bolets-container-template');

// secondary templates which will be injected in to mainTemplate (using helper function here)
var b = getTemplate('#html-bolet-template');
var c = getTemplate('#html-something');
var d = c.cloneNode(true); // you must clone html fragment to be able to insert it more than one time, remember use 'true' for deep clone!
var e = c.cloneNode(true);

d.querySelector('#html-some p').innerText = 'd';   

// you can start plaing with your objects now  before they are placed in document DOM or wait once they are placed in the document DOM and use jQuery to do some stuff with them
   d.querySelector('#html-some').className = 'active';   
   d.querySelector('#html-some').className += ' moreactive';      
   d.querySelector('#html-some').id = 'bla';
   b.querySelector('#html-bolet').style = 'padding:50px; background: #456;'; 

// console.log('mainTemplate', mainTemplate, 'b', b, 'c', c, 'd', d); // target fragments

// inject one template in to another using our helper class
inject(mainTemplate, b, '#html-bolets-container');
inject(mainTemplate, c, '#html-bolets-container');
inject(mainTemplate, d); // i can omit last parameter as I set its default in helper function definition, you should prabobly remove default value and use it as the two above examples.
inject(mainTemplate, e);
inject(mainTemplate, e); // NOTE! this will not be injected for the secound time. Clone it first!

// same as above but without helper function
   n.querySelector('#html-bolets-container').appendChild(b); // injected
   n.querySelector('#html-bolets-container').appendChild(c); // injected
   n.querySelector('#html-bolets-container').appendChild(c); // will not get injected for secound time - allready in
   n.querySelector('#html-bolets-container').appendChild(d); // deep clone will be injected but only first time, clone it again if you want injected more
   n.querySelector('#html-bolets-container').appendChild(d); // as above... this will not be injected

// console.log('mainTemplate', mainTemplate, 'b', b, 'c', c, 'd', d); // destination fragments

// The Document method importNode() creates a new copy of the specified Node or DocumentFragment from another document so that it can be inserted into the current Document. It is not yet included in the document tree; to do that, you need to call a method such as appendChild() or insertBefore().
var cloneNavigation = document.importNode(mainTemplate, true); // true stands for deep copy

// This is where actual insertion happens. Now we can access new tags through our document DOM

// now if you use jQuery you could select DOM objects and do something funky with our new HTML tags.