To create a new template click on the + in the top right, this will redirect to the template selection. There are multiple template types to choose from. For now you want to select the Website Template
. You can give it a name and a color. The color will be visible in the blueprint template select. Finally click save to create the template.
Now you have created your own template, you can start adding your own styles. When you have your own template theme CSS you can click on Edit CSS
and paste your CSS file contents in there. In the HTML you can add your own HTML that you want on every page you use this template on.
CSS
for this. If you have never used CSS before, you can look it up on the internet and you will now it in no time! The classes you add to this stylesheet, will also available for the uicomponent classes in the blueprints.
${ body }
in the template. This is a variable. This specific one is needed to show the UIComponents
on the page. This is not the only place the page accepts variables. You can add custom variables any where in the template. In the class of an element, within a H1 or just like the body anywhere in the HTML. A custom variable is defined like: ${ blueprint.VARIABLE_NAME }
. To access this variable you need to go to the Render page
. Click on the + pin
, here you can select the type and the name for your pin. You can use any type for the pin you want. This means you don't have to define the type in the template. You can add variables anywhere you like, in a class/id, ad a href, just plain text in a H1
or as a uicomponent. Just remember that if you place a variable in a class you should not use a uicomponent type pin in the blueprint!
ftp.rual.dev
. The username from your own RUAL cluster, and your password. To login you also need to fill the port. This is not shown on this page. The port is 8002
. Once logged in you see the different templates you have, this is shown by the names of the templates. Click on the template you want to download. This will direct you in to the folder with the HTML, CSS and JS. Right click the one you want to download and hit download.
custom components
for your templates. These components are written in HTML
and can be used in the blueprints.To create a custom component, you have to go to the templates page. On that page you need to go to the template you want to add the component to. There you will se a green + Component
button.
When you have clicked the button you will see a modal where you can set the name
, group
, Description
and the HTML
itself. In the HTML editor you can use all the classes from bootstrap and your own custom template.
Just like the normal HTML template you can add variables to the component. These variables need to be type specific (value or number). Example: bp-value-name
. A variable always need to start with bp
followed by the type and ends with the name of the variable.
You can change the type also to translate
followed by a translation key: {{ bp-translate-KEY }}
. This will create a translate element which can be used with the (alt/option)+click
to change the translations. For just the translated value you can use {{ bp-translate--KEY }}
attributes
. There are a few custom attributes you can use to create better and more dynamic components. Some of the examples below can be seen in the image from above.
bp-element is an attribute you can place on any element where you want to change the content. Adding this will add an UI-component
in-pin to the component. In the value set a name for that element.
bp-(clickevent/inputevent/generalevent) can be added to add an event pin of the selected type to the component. In the blueprint are you able to create and connect a function to the element.
bp-expose-(class/style) can be added to elements with the bp-element attribute. Set the value to "true"
. This will add a class/style pin to the component on that specific element.
bp-skip-content can be added with the value "true"
to remove the content pin that will be created when you are using the bp-element
. This will allow you to only show the class/style pin for that element.