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
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.
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
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.
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.
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
16px and the
red to the error message text. Click close and save the blueprint.
grid: row we have put the error messages in, has a standard styling that contains
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
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.
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!