This tutorial will show you the integration of a Login page that was previously created on Figma. Figma automatically gives you the CSS affiliated to the elements of the page you created, let's see how to integrate it in the Studio.
Note : We currently have created the design with Figma (a free tool) but others like Adobe XD also provides you automatic CSS.
Step 1 : Create a new project
The Login page you are about to recreate has been created on figma.
Here is the link to access it :
https://www.figma.com/file/ltNjfK14DfBCIvrRZ
ekR6k/Styling_tutorial-design?t=T5PdI13kCqktNIYY-1
NB : You have to use or create a (free) Figma account to access the CSS.
As you can see, each element of the design can be clicked, and in the right side of the page, on the "inspect" section, the CSS for each element is automatically generated. That is what we will use to design this same page in the Studio.
Now that you know that, let's create our application :
To create a new project, go to File -> New -> Project and search "Convertigo Low Code FullStack Web/Desktop or Mobile app project" and name it "styling_tutorial".
Once your project has been created, simply use the play button to open the Visual App Viewer.
Note: Don't forget that if you name your project differently, you will not be able to continue properly the tutorial..
Step 2 : Integrate Grids
Now that you have your emply application, it's time to set up the layout : How the elements will be displayed in the page. Let's quickly recall what we have :
- A title and a subtitle
- Two input text fields
- A button
Let's create grids : we have four blocks, so 4 Grid Rows of 25% each :
In your project, go to Application -> NgxApp
-> Pages -> Page -> Content then click it and search for the "Grid" component in the Palette.
When dragging the Grid component to the App Viewer window, choose "inside". Then display the grid borders : To do so, click the "Show all grids or current selected" button located next to the app viewer (the last icon in the vertical toolbar).
Here you don't need the right/left column, so just delete the "GridCol1" in the Treeview.
Set up the "GridRow" height to 25% in the GridRow properties -> Height.
Then you simply will have to duplicate this GridRow 4 times in the Grid (right click on the GridRow-> Copy, then right click on the main Grid and choose Paste "as a child" in the Grid)
The page is now splitted in 4 equal blocks, where you will add your page components.
Step 3 : Place your page elements
As you don't need it here, you can delete the header and the footer of the page.
The next step is simply to add your page elements :
Click your first GridCol, then in the palette search for "H1". Drag & drop it in your first GridRow. Delete the label on the GridCol to get rid of the "Column 11", then change the label of your H1 in the properties in "Text value" as on the Figma design : "Glad to see you again !"
Then in this same section let's add the subtitle : Search for the "Paragraph" component in the palette and drag & drop it under the first text. Same as for the title, change its value as the figma design : "Ready for a new experience?"
Let's repeat it with the other elements on the next steps.
Step 4 : Place your page elements #2
Select your second GridRow (delete the label again), then search for "GenericItem" in the palette. Drag & drop this GenericItem in the second section. In the Label of the GenericItem, change the text value by "Username". In the palette, search for the "TextInput" component and drag & drop it into your GerenicItem (this text input will be used to fill in the field).
Then, in the palette, search for the "Icon" component and drag & drop it into your GenericItem. Click it, and in the properties set its size as "small" and its slot as "start" to place it on the left. Then click the [...] of the "Icon Name" field : This is where you will choose the icon you want. (Here you literally can choose the icon you want.)
Now that you have your first complete text input, just copy the whole GenericItem and paste it in the next GridCol. Change the icon and the label to "Password"
In the next step you will place your button, then it will be the moment to style it all.
Step 5 : Place your page elements #3
The last element to display is the button : Nothing complicated, search in the palette for the "Button" component, drag & drop it into the last Grid section.
Change the button text value in the treeview by "Sign in".
You now have all the elements that compose the Login page : Let's see how to style it as the Figma design.
Step 6 : Style your page elements
It's time to put some styling in this page !
As told at the beginning of this tutorial, each element of this page has an automatic CSS generated by figma. You just have to click the element you want, click on "inspect" and you simply have to copy/paste it. (Don't copy the Height, Width and position, it is useless for the Studio). Let's see where !
For the first CSS element, select the background of the page (click on the page background), and as you can see the affiliated CSS shows up. Copy it (here we just need the background one) and come back in the Studio.
The idea is simply to put a "Style" component in each element you want to style : Search in the palette for "Style" and as you want to change the background color, drag & drop this component directly in your content, directly on the app viewer as in the video or in the treeview.
Then double click the Style to open the editor and paste your copied CSS.
Be careful : you have to paste the CSS inside the {} to be effective.
Overmore, you will always have to add "--" before every CSS line that you will paste : That is mandatory to tell the component you style to "accept" this styling.
Step 7 : Style your page elements #2
Let's repeat the operation with the Title (h1) : In the Figma project, click the "Glad to see you again !" and copy the CSS that appears on the right (except the Font-family that will be set up after).
Come back in the Studio, search for the "Style" component in the palette and drag & drop it directly in the h1 field in the App Viewer.
Open the style component in the H1 field in the treeview, double click to open it and paste your CSS. (Don't forget the "--" before at the beginning of every line).
Repeat the operation for the subtitle (paragraph) : Click it on FIgma, copy the CSS (except the font-family), Drag & drop a style component in the paragraph, open it and paste your CSS. (Don't forget the "--" before at the beginning of every line).
Then search in the palette for the "FormatLayout" component and drag & drop it in the main "Grid" in the Treeview. This FormatLayout will center the elements in the page.
Click the FormatLayout and, in its properties, search for "Alignment" and set it up to "ion-text-center".
Step 8 : Style your page elements #3
Repeat this operation with the input text : Good news, as the two fields are the same, you will simply have to do it for one and copy/paste the style component in the second.
In Figma, click the first input text field and copy the CSS (except for the Width, Height and Position).
Come back in the Studio, search for the "Style" component in the palette and drag & drop it in the "GenericItem" component in the treeview (hard to point directly in the App Viewer.)
Open the style component, double click to open it and paste your CSS. (Don't forget the "--" before at the beginning of every line).
CTRL + S in the editor to apply the CSS, and simply right click on this Style component to copy it and paste it in the second GenericItem.
Step 9 : Style your page elements #4
Last element to style is the button. Click it in Figma, copy the CSS (even the Width and the Height for this one) and come back in the Studio : Search for the Style component in the palette, drag & drop it directly in the App Viewer button, open the style and paste your CSS. (Don't forget the "--" before at the beginning of every line).
CTRL + S in the editor to apply the CSS.
You now have all you elements visually displayed as in Figma.
However, the layout of the page still doesn't match with the Figma design : Let's fix it in the next step.
Step 10 : Style your page elements #5
All the styling you are about to make is linked with the Grid components.
The first thing to do is to place the input texts better : In the Treeview, click the "GridRow1". In the properties, look for the "Alignement" field and set it up to "ion-align-items-end".
It will place the input text at the bottom of this grid.
Repeat this operation with the "GridRow2" and the "GridRow3"by putting the alignment to "ion-align-items-center".
That make the page responsive : You can switch devices by clicking the smartphone icon at the left of the App Viewer to verify.