Styling

Make your page look good.

Styling

This is the last tutorial in the "Hello World tutorial tour". We will add some basic styling to the error messages we made in the tutorial: display error messages. If you start this tutorial, you need to have finished the tutorial: translation.

Styling is not just making something that is nice to look at. Especially for web applications the design has to guide the user through the application. It should be clear at any point in the program what actions are expected from the user.

Remember our first error messages looked like the picture on the right:

We already improved it in the previous tutorial by translating the rather cryptic message. Now we will add two other important aspects:
- the positioning of the message, next to the field that's wrong
- the colour and font size of the message, to get the attention

Change error position

Instead of using the UI: Notification, we will add a div block below the field in our form. To see how this works we will set up the first name field together. Add an extra pin at the Second column in the row, pull out a utilities: div from the new pin, with the outlet error-firstname. Do this for the last name field as well.

Switch

Now go to your foreach function that renders the error messages. This needs to be changed, so that the div matching the field is used. In order to do this, we can add a flow: switch to the function. For the default option in the switch, just leave the ui: notification so the errors we don't define will still be shown as alerts. Now connect the Expression in-pin from the switch to the field out-pin from the get: get fields block. Go back to the flow: switch and add the options firstname and lastname by clicking on the green + in the block. Give each option a separate flow, leading to a ui: dynamic content update block. Don't forget to set the outlets! Connect the ui component in-pin from the blocks to the out-pin of the grid: row block. We will use the same format for every message. Only the position is changed.

New error position

Let's have a look where we are now. We changed the position for firstname and lastname errors. All other error messages still appear in the header, following the default flow.

The new modal is better, but it's still not very clear that there is an error message. We will add some CSS styling to the corresponding blocks to solve this.

CSS styling

To add styling to an UI component, click on the little carrot on one of the pins on the action. This will add 2 extra pins to the action, a class and a styling pin. The hot pink is the styling pin you will need to add styling to that specific element.

You can either right click from the styling pin to create a style: custom, or use left click to search style: custom. This will create the action and will automatically open a modal where you can add normal css styling. In the input below the label style you can search for the styling you want to use. Add the style font-size to 16px and the color to red to the error message text. Click close and save the blueprint.

Margin

Now that you have added the styling to the error messages you might see that the messages are more aligned to the left than the input is. This happens because the grid: row we have put the error messages in, has a standard styling that contains margin-left and margin-right with the value of -15px. To resolve this you can add the style margin with the value 0 auto. This will remove the margin on the left and right "0" of the element.

Not only the error messages needs the get the style margin. You might have noticed that the inputs are very close to each other. One of the ways to create some spacing between them is by using margin-bottom of 20px to the grid: row blocks that contain the form fields. Another nice change would be to set the color of the text in our modal header to white, so it's better visible against the blue background.

The End

Now that we made these changes, the register modal is beginning to look really nice. You can play around with the styling and maybe make the modal look even prettier.

This is the end of the Hello World Tutorial Tour. You now have learned the basics of what RUAL has to offer. You can continue with any other tutorial on the overview page or play around in RUAL and maybe see if you can figure it out!