Create a Bric - Manual

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.

7 Likes

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.

Hola! Pudistes crear tu Bric?

Hi @Pealco

Although a manual would be great, in the meantime you may want to look at the video @webplus has created available to download through this post:

MDS

5 Likes

@Norm,
Along with this, it would also be nice if Blocs could save any dependencies associated with custom blocks to the library - for example, when creating a custom block, any page/project attachments or custom code would also be saved, so when the block is used in a new page/project the designer wouldn’t have to re-attach files or type/paste code to the header/body.

I imagine this capability would have to be smart enough to know if these dependencies have already been added to a page/project, when duplicating, or adding from the library. Don’t know how feasible this would be to do, but it would still be nice to have this capability, as this could help users build a library of truly custom blocks, otherwise custom blocks would be limited to existing brics only.

-M

1 Like

Thanks for re-sharing that. Really helpful.

Hi @Malachiman,
I take it you or someone else already requested this. Well, it goes to show that this is a really needed capability. :slightly_smiling_face:

-M

Hey @MiguelR, sorry I was replying to @MDS post with the link to another thread that had a tutorial video. I had completely forgotten about it.

But yeah, I like your idea too. I am not sure how complicated that would be though.

oops! sorry about that, didn’t see that.

All good, the reply thingy in the corner is pretty subtle and easy to miss.

Just as I did not realize I was posting a reply a year later :wink:

1 Like