Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

In this lesson we are going to review how to set a Skin and Layouts for our Project. In the Wayfast world Skins are sets of css and images that define the look & feel of our projects. Skins enable a comprehensive and consistent structure for organizing assets while fostering reusability.

...

We can create new Skins and Layouts or reuse existing one from Wayfast Library. In this lesson we are going to reuse existing one but we will cover how to create a Skin and Layouts from scratch in the section “How to create Skins and Layouts”“Skin and Layout Editor”.

How to select Skin on new Project?

Precondition

Now that we have the main structure created (Solution), we can click on “Project” button and build the first element to initiate an Application.

...

Observe that the “Skin” field is remaining the option selected when starting the new Project from the scratch. Wayfast allows the possibility to change skin if it’s needed.

How to change the skin in existing projects?

In previous lessons, we explained how we can select an skin under the “New Project” creation. At “Modify Project” page, Wayfast allows us to edit this selection.

...

Info

NOTE: We can check the new skin by making a preview on any page from the Project.

How to select Layout on new Project?

Another feature to build the Front-End basic controls at newly Projects are the Layouts. We can select this predefined options that Wayfast provide at any time.

...

To confirm that the Layouts are saved, click on “Project pages” icon at the top menu. Then click on “New Page” button and you will find the Layouts displayed in the dropdown and available for Application. 

...

Recap

In the first part, we learnt about how to select the Skin that will be our Application’s User Interface and how they can be changed from General Options. In the second part, we selected the default Layouts for the Application that Wayfast provide under General Options-Layout and finally we went through the Page’s creation steps to verify that these Layouts were correctly associated and ready to be selected in the application development.