Quick Start
Get to know and explores all of Peppubuild's features.
Last updated
Get to know and explores all of Peppubuild's features.
Last updated
Let's replicate the login page of Edenlife with Peppubuild. Skip to the video to get a visual representation.
1 - View component button: This button allows you to view the form of the component rendered in the editor. It layers the component with little black dots.
2 - Fullscreen button: With this button you can view the content of your editor in fullscreen.
3 - View code button: This button opens a pop-up modal that shows your code.
4 - Save button: The save button allows you register the changes you have made into the db.json file. Changes are automatically saved in the workspace but won't be reflected in your folder (system) until you hit the save button.
5 - Preview button: The preview button allows you view changes you have made like it would be in your browser.
6 - Code button: This button opens a panel that contains everything you need for managing a project and files.
7 - Style manager button: This button opens a panel with every information that you need to style a component in your editor.
8 - Open layer button: This button opens a panel with all layers of elements in the selected component.
9 - Settings button: The settings button opens a panel that allows you change the settings of a component in the editor.
10 - Blocks button: The blocks button opens a panel that displays all blocks available for your use.
The first step to using Peppubuild, is creating a project. To create a project, hit the code button and navigate through the content on the right panel. Next, click on the Create Project + button.
Next, add a project name and choose what type of project you want.
Ensure to change the name of the base page which is a string of text, by clicking on the edit icon on the page name. Notice how I have changes my page name to 'Login'.
If you're building a website choose Frontend, choose Backend if you only want to create a NodeJS/Express Application. However, since we currently have only the option to build a website, we'll choose Frontend.
Always hit the save button after every change, else they won't be reflected in your local folder.
Now, if we navigate to our local home directory, we will find the project we just created. For instance in Windows, C:\Users\yourusername\ will take you to your home directory and in Mac your home folder is named with your user name. The project you created will have the structure below:
Blocks are the base of Peppubuild elements, they're the basic things that are put together to make websites exist. For instance, it might be something simple like an image or a text box. It can also be complex structures, more probably composed by other components, like sections or pages.
Currently, Peppubuild blocks are divided into Basic and Forms.
Layouts: The first four blocks consists of layouts (1, 2, 3, 3/7) blocks. This blocks creates an empty division div that will structure the page how we like. For instance, we can split our screen in three places using the 3 columns block. Always use the view components button to see your page layout.
Text: The text block creates an editable text component on your editor. You can edit the text in the editor and style it with the style manager.
Link: The link block allows you to create a clickable link. In the settings tab, you can add a URL for your link component. You can also edit the link in editor and style it with the style manager.
Image: This block opens up the asset manager and allows you to pick an image of your choice for your editor. All images selected are encoded in base64.
Video: With this block, you can add videos from an external (Vimeo, Youtube, etc) or internal source by referencing the URL or source link in the settings section.
Map: Add road map or satellite map to your editor with this block. You can set the zoom factor and area in the settings section.
Form: The form block contains all elements you need to create a form; button, input, checkbox, text area, label, select. If you would like to use this components individually.
Input: The input block allows you create an input user interface to collect information from users.
Text Area: Text area block is just like the input block. However, the difference is that text areas are usually larger than input. If you want to take large information from users and want them to be able to scroll down, look at the information and edit them properly, text area is what you should use.
Other blocks in form are button, select, radio, checkbox and label.
Always check the setting tab for all blocks to customise them as you wish.
The Edenlife design we are trying to replicate, contains text and a form, splitting the screen in half.
Now, we will start by draging the 2 columns block into our editor.
Now that we have our layout, let us add a background colour to the column. While selecting the 2 columns block already in the editor with your mouse, navigate to the style section and scroll down to the Background property in the panel. Next, select Background color and add the HEX code for Edenlife's background #fff2ec. Your editor should look like the image below now.
Background colour can be set using String, RGB, RGBA, HSL , and HSLA format. For instance, any of the formats below should work.
Background set with colour models without an alpha channel like RGB and HSL will be converted to the corresponding HEX format.
In this section, we will design the component in the left screen. First, drag the text component into the first column, i.e the left column. When we copy the text from Edenlife's website, we get this:
Formatting the text, we can start by making the text bold in the style manager > typography > font weight section. Next, hit the enter or return button between 'get started' and 'with eden' so it starts on a new line. Now we have two lines of text that start on the left hand side but what we really want from the main example is to push them to the right with space in the left. For this, we will add space (margin) around our text. In the style manager > typography > dimension section, add the following values for margin.
Add the apple icon from the website and add the same margin. However, left margin is 26% since it doesn't start on the same column as the text above. At the end of this, your editor should now look like this:
The first line consists of two forms lying side by side. For this, we will use the two columns block. We will also style this so that we reduce the space around the inner cell, we will make it 60px as against the 75px for which it is originally set.
Drag the input block into the cell, set its background colour to #fff9f7. Next, we style our input by setting the dimension property to what we have in the image below:
Set style manager > decorations > border radius to 5px and set style manager > decorations > border to 1px. Now, we can set the color in the Border section to #e1c1b2 . In the settings tab, add Type your first name to the input label. Replicate the input by clicking on the copy button that appears when you click on the input element on your editor. Finally, new copy created into the cell on your right hand side, change its label to Type your last name.
The other rows consists of one element only so you should use the one column block. For the next row, replicate the cell and input dimensions we created earlier. You can change options for our dropdown in the settings tab. At the end, your editor should look like this:
Now, add labels for the form inputs by dragging the label block to the top of each input. Add margin (space) so that it is in line with the form. Next, change text colour to #6b514b in style manager > typography > color. You should be left with this screen now:
Add a button to the editor. First, we will add the one column block to the editor since we can easily move components embedded in the column (div) around as we like. Next, drag the button into the cell. Select the inner cell and navigate to the Flex property in style manager to enable Flex container. When you choose End in the Justify property, the button moves to the right just like the Edenlife login page. Set the background colour of the button to 96D406, edit its dimension to suit your needs. Change text in button in the settings tab, you should now have something similar to this:
To add finishing touches, we can add space before the text and form at the top of the page, we can also add space around the right side of the form.
Always set the background dimension to 100 vh if want a full page website without the white space under.
Now that we have implemented the changes we want, let us give our project a final save. We can use the preview button to see the changes.
We can also navigate to our project folder in our system and open the login.html file in our browser.
Always select the element of your choice before using the stylemanager or settings buttons. You can always use ctrl + z to undo changes you originally made.
