Skip to main content

Create a new page

Sipa projects are structured into logical pieces called "pages".

They are stored in your project at app/views/pages.

A page consists of

  • a HTML template file
  • a JS page file
  • a SCSS style sheet file (and its compiled CSS file)

Page life cycle​

Before a page is loaded, a layout will be loaded first, and then the page will be put into the layout and rendered.

page life cycle
Trigger Page Load -> Applied Layout is loaded (if not already present) -> Page is loaded

Load another Page​

Another pages can be loaded with SipaPage class. When using onsenui and mobile development, use the SipaOnsenPage class the same way!

// desktop
SipaPage.load('imprint', options);
// onsenui
SipaOnsenPage.load('imprint', options);

Create a new page​

To create a new page, we use the Sipa CLI with its generators at the root directory of our Sipa project:

# start generator
sipa g
# choose page
p
# enter page name for e.g. settings page
settings
# or even sub settings pages
settings/user

Structure​

A page consists always of 3 (4) files:

├── settings.js
├── settings.html
├── settings.scss
└── settings.css

Never modify the css file manually, as it is automatically compiled and overwritten by the scss source file!

In the scss file you can even use only CSS, as SCSS is a superset of CSS.

If you do not know SCSS, a variant of SASS, yet, you should start know learning it!

The official website with examples and documentation can be found at https://www.sass-lang.com/