Template Components

Create custom components in your template to use as actions in the blueprint

Custom templates

Create or download your own template and add it to the templates to use within your application.

Custom Styling

Want to add custom styling to your template, add custom CSS styling to the CSS stylesheet and create classes to add to the existing UIComponents in the blueprint

Custom components

Create custom components to use within your blueprint to make your page even more unique

Custom Template

The basic styling used in RUAL is the Bootstrap library. With Bootstrap you can make fast, and styled pages without really using custom styling. You can stick with the Bootstrap default template. But when you want to create a web application with its own styling, you will need your own template.

Add CSS to the RUAL template

Once the template styling is uploaded, you can use it in your new RUAL template. If you have already created a template you can skip the next few steps.
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.

Add HTML

The template is also a place you can add HTML code. This HTML code will be added to every page that uses this template. One of the example to add in the template HTML is the Menu bar of the page and/or the footer. This will prevent you from making pieces of code over and over again. The template HTML uses the same classes and styling from the template you have selected.

Add CSS Styling

The template you use is probably great, but nothing is perfect. This is why you can add and edit the stylesheet for your template. You will have to use 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.

Variables

You might already have noticed the ${ 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!

Using the FTP server

You know how to create and edit the template files. This is all done using the built in editor in RUAL. This is a standard web editor for code. It works good if you want to edit small parts of you HTML, JS or CSS. Once your CSS is so big you don't know where to look, this editor might not work the best. For this we have the option to download and upload your template files to a FTP-Server. This will allow you to edit the file in your own preferred editor.

Download files

In order to get the files from the ftp server you need a client, the one used in this tutorial is FileZilla. To login on the FTP-server you need to go to your RUAL cluster and head to the templates page. On top of the page you see info about the FTP-server. The host, this will always be 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.

Upload files

Once you have edited and saved the files. You can re-upload these files to the FTP server. In FileZilla, the left lowest section on the screen is your own local file directory. In there you can go to the location you saved your files and drag them to the correct folder to the right.

Custom components

RUAL has as default a-lot of UI component actions you can use to create your pages. When you have recurring components on your website, you can create 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

Not only can you set variables in the components, you can also add custom 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.