Create a Bric - Manual


#1

Hello @Norm I was trying to create bricks and check everything that you have in the Developer Manuals but I couldn’t create it.

So I talk with a few forum members and they feel the same, we don’t have a real manual, with some examples. We know that some members already created bricks so is doable, but for us that know less then them, we couldn’t.

So we ask please if you can add a manual or a simple explanation with an exemple and explain please detailed how you create it and how we can do it.

Many thanks @norm in advance.


Blocs 3.2 Beta Build 4
#2

For Exemple I found a HTML5 Before & After Comparison Slider
A pen by Dudley Storey.

And I have 3 files:

  1. Index.html

     <!DOCTYPE html>
     <html lang="en" >
    
     <head>
       <meta charset="UTF-8">
       <title>HTML5 Before & After Comparison Slider</title>
       
       
       
           <style>
           /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
           div#comparison { 
       width: 60vw;
       height: 60vw;
       max-width: 600px;
       max-height: 600px;
       overflow: hidden; }
     div#comparison figure { 
       background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg); 
       background-size: cover;
       position: relative;
       font-size: 0;
       width: 100%; 
       height: 100%;
       margin: 0; 
     }
     div#comparison figure > img { 
       position: relative;
       width: 100%;
     }
     div#comparison figure div { 
       background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);
       background-size: cover;
       position: absolute;
       width: 50%; 
       box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
       overflow: hidden;
       bottom: 0;
       height: 100%;
     }
    
     input[type=range]{
       -webkit-appearance:none;
       -moz-appearance:none;
       position: relative;
       top: -2rem; left: -2%;
       background-color: rgba(255,255,255,0.1);
       width: 102%; 
     }
     input[type=range]:focus { 
       outline: none; 
     }
     input[type=range]:active { 
       outline: none;  
     }
    
     input[type=range]::-moz-range-track { 
       -moz-appearance:none;
         height:15px;
         width: 98%;
         background-color: rgba(255,255,255,0.1); 
         position: relative;
         outline: none;    
      }
     input[type=range]::active { 
       border: none; 
       outline: none;
     }
     input[type=range]::-webkit-slider-thumb {
         -webkit-appearance:none;
         width: 20px; height: 15px;   
         background: #fff;
         border-radius: 0;
        }
     input[type=range]::-moz-range-thumb {
       -moz-appearance: none;
       width: 20px;
       height: 15px;
       background: #fff;
       border-radius: 0;
          }   
     input[type=range]:focus::-webkit-slider-thumb {
         background: rgba(255,255,255,0.5);
        }
     input[type=range]:focus::-moz-range-thumb {
         background: rgba(255,255,255,0.5);
        }
    
         </style>
    
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    
     </head>
    
     <body>
    
       <div id="comparison">
       <figure>
         <div id="divisor"></div>
       </figure>
       <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
     </div>
       <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    
       
    
         <script  src="js/index.js"></script>
    
    
    
    
     </body>
    
     </html>
    
  2. style.css:

    div#comparison {
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden; }
    div#comparison figure {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg);
    background-size: cover;
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    }
    div#comparison figure > img {
    position: relative;
    width: 100%;
    }
    div#comparison figure div {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);
    background-size: cover;
    position: absolute;
    width: 50%;
    box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
    overflow: hidden;
    bottom: 0;
    height: 100%;
    }

    input[type=range]{
    -webkit-appearance:none;
    -moz-appearance:none;
    position: relative;
    top: -2rem; left: -2%;
    background-color: rgba(255,255,255,0.1);
    width: 102%;
    }
    input[type=range]:focus {
    outline: none;
    }
    input[type=range]:active {
    outline: none;
    }

    input[type=range]::-moz-range-track {
    -moz-appearance:none;
    height:15px;
    width: 98%;
    background-color: rgba(255,255,255,0.1);
    position: relative;
    outline: none;
    }
    input[type=range]::active {
    border: none;
    outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width: 20px; height: 15px;
    background: #fff;
    border-radius: 0;
    }
    input[type=range]::-moz-range-thumb {
    -moz-appearance: none;
    width: 20px;
    height: 15px;
    background: #fff;
    border-radius: 0;
    }
    input[type=range]:focus::-webkit-slider-thumb {
    background: rgba(255,255,255,0.5);
    }
    input[type=range]:focus::-moz-range-thumb {
    background: rgba(255,255,255,0.5);
    }

  3. index.js

    var divisor = document.getElementById(“divisor”),
    slider = document.getElementById(“slider”);
    function moveDivisor() {
    divisor.style.width = slider.value+"%";
    }

So in the Bric Editor, I copy the HTML code to the HTML tab.
Then the other 2 files I put them in the Resources tab under the Includes.

And everything is working, but now I need to know how can I put the interface interact with the HTML.

@Norm can you please explain?

Or please can you use a different exemple to explain how it works?

Many thanks in advance.