CUSTOM ELEMENTS AND JAVASCRIPT

Blux was built so that anyone can build a complete website without knowing how to write any kind of code or markup while also providing a means to extend and enhance most areas with your own custom code.

It all starts in the "Custom Elements" section which can be found in the left panel within the content section. Creating a custom element provides an interface to provide your own HTML, CSS and JavaScript. The HTML and CSS and JavaScript will be directly injected into the site and will have different features available to it depending on where and how it is used.

All custom elements will have the provided JavaScript code inserted into a function and the function will be executed immediately on page load in most cases. It does not become part of the global scope.

Navigation & Footer

The navigation and footer can be extended or replaced by your own code. When editing the navigation or footer, using the right panel at the bottom there is a menu to set the Custom Element. Once set you will have 3 options for how the custom element will impact your navigation or footer.

Extend:
Use our built-in navigation/footer features and enhance them with your own code. This enables you to manage all parts of the navigation/footer using the Blux app while also enabling you to enhance it as needed.

Replace CSS+JS: Use our navigation/footer html so that you can manage the text, images and links of the navigation/footer items in the app and then use your own CSS and JavaScript to make it completely unique.

Replace All: Completely use your own code for the navigation/footer of the site. Your HTML will go inside the <nav> or <footer> element for semantic reasons.

Block Media Positions

Every block allows for a few configurable text positions and a place for a media element. When enabling a media element you can set it up to be an image, form, google map, video and many other potential rich web components. You may select a custom element here to be used.

If you create a custom element using mustache style tokens for replacement such as {{title}} and {{city}} you can then set those values in the media panel for usage. This feature enables you to be able to create reusable custom components that can be easily tweaked for the context of where they are used.

Feed Templates

When configuring a block to be populated with sub-blocks coming from feed items you can use a custom element to be the template for each individual item. The title, body, media and date tokens will be replaced in the HTML and CSS with the data from the feed. All of the data from the feed item and some other useful information will be available in the "config" parameter passed into the javascript function.


When using a custom element for a feed template the JavaScript is executed every time a feed item is loaded and injected into your custom element template. Write your code expecting it to be executed for every feed item loaded into the page using that custom element.

Overlay Templates

When configuring a block or the feed item's of a block to open in an overlay you may select a custom element to be used instead of our basic overlay offering. The title, body, media and date tokens will be replace in the HTML and CSS with the data from the item clicked. This will likely be populated with the information from the block or feed item being clicked on. 

When using a custom element for an overlay template the JavaScript is executed when the item is clicked/tapped and not on page load.

Buttons

When creating a custom element you have the option of using it for a button. In the design section of the app you can use a custom element for one of your buttons to extend it's capabilities with your own code. The most common use for this is to configure the custom element type to be "Hover Effect" and then in the CSS use the mustache token {{className}} for the specific class name of the button when used. 

For example, to add a border you could do:
.{{className}}{ border: 10px solid orange; }

Site Search Overlay

Many links have the option to "open in search". When using this feature you can set any block, button, navigation or footer item to open a search overlay. This is a special overlay that enables a site search which is a very common feature on most sites. When you publish your site a condensed version of your content is pushed into a JSON text file with your site. This enables your static site to have what seems like a dynamic search feature. The condensed JSON file is loaded in and parsed and then a search is performed on that data to find relevant pages for the users search.

You can extend this overlay with your own markup to customize this overlay as needed.

STILL HAVE QUESTIONS?