Just starting to looking into what’s involved with building a Bric and have read through the Developers section in the KB. I have looked at the html of the demo Brics but I can’t reconcile how user entered data is reconciled with functions in html or CSS. Can anyone point me to documentation that covers this?
Wondering if there are any demo Brics that can be opened to show this? Nothing beats dismantling something to see how it works. Or if it is possible, wondering if its possivle to open a normal Bric, ideally in the Bric Builder?
If you click the plus icon to add a new bric you will get some options to try some starter brics.
Values are passed via attributes that you define in the HTML section.
There is a custom JavaScript file that’s in the bric package that you use to write all your functions for the Ui and assign the attributes in the HTML etc. (this file isn’t used on export)
To be fair there is little info about how to do this. It took me a little bit to figure out the first time.
Thanks. I’m fairly comfortable with the overview but it’s the detail that I am keen to see in action. The 4 demos are useful but there’s still a lot of guess work.
You get there in the end though. There are things like bric_container that is buggy still. I have it as an option in Any Video but it’s marked as experimental, I wouldn’t use it as an essential part of a bric. The API is getting some focus and love next year I think. Which will be great as bric container has a lot of potential.
Depends on how you want to use it. But you can use JavaScript to take the value from the attribute and add it as inline css, or add a class to an element (add a css file). You can even add style tags and css to the DOM.
You can target the editable area or your bric, so some changes appear on the canvas. Others require preview.
Thanks. I don’t want to use JavaScript if possible so I will have a play with adding inline as you suggest.
I remember trying to build my first stack by reading the Stacks Dev Docs and that was too much of a challenge for what turned out to be fairly easy to understand process, soon understood after you opened up a few stacks and peeped under the hood.
Regarding development workflow in Blocs 5, what is required to reload an edited Custom Bric to view the change? I assume a restart of Blocs will do it, but I’m wondering if there is a softer way to reload?
@Norm i can relate. I recall when I first started experimenting with the Bric Builder, I asked some basic questions as it wasn’t clear and got no answers. It took a lot of playing around to start to understand it.
That could just be me, I was pretty much new to this stuff at the time.
So far I have not been able to find detailed examples of how to use the Attribute or Function to show specificaly how to use them.
E.g. How to use a Textfield to add a string of text into html or CSS. A real example woud be how to correctly setup a column template string and then what exactly to insert into .grid-template-rows:string in a css file added to resources.
What I would find most useful would be a demo Custom Bric that included all the main interface types and how they are used in CSS or js. The css and js files in the resources don’t appear to be available to open and view/edit, so being able to examine these files would also be useful to see what’s going on.
On initial reading of the Dev docs, that wasn’t apparent to me, and was my fault for making my own assumptions and interpreting that all mention of JS, only applied if you wanted to include JS in your Custom Bric. Having read the docs again, this is now fully apparent.
So I will hold back until I improve my minimal JS skills and will revise the Bric Builder. Really looking forward to future development of the Bric Builder.
I am still keen to examine how a Bric works and realise that I work best when I can examine a working example. I have tried all of the Bric Builder demo Brics, but can’t find any that show the specific part that shows the sprcific JS that writes the specific setting into the specific part of the CSS you want to target.
Can anyone point me to a simple downloadable Bric that I can look at?
@Norm could such a new demo Bric be added to the Bric Builder?
