gistfile1.md

There are three types of layout in our application:

• The landing page
• The home screen (with or without back button)
• And the default layout for static sites and login/signup etc.

Every layout has its own @mediaquery modifications

(Note: I prefer the "Mobile First" principle)

Pages

• landing page
• the login page
  • extends the default layout
• the sign up page
  • extends the default layout
  • almost the same as login page
  • contains policy agreement copy
• the "forgotten password" page
  • extends the default layout
• the "reset password" page
  • it can extend the parent of the "forgotten password" page (different copy, action url, etc.)
• video list page with search
  • extends home screen layout
• main home screen
  • extends video list page with search
• watch later
  • extends video list page with search
• history
  • extends video list page with search
• channel page
  • extends home screen layout
  • can go back: true
• video page
  • extends home screen layout
  • can go back: true
• payment page
  • extends default layout

Components

• form elements
  • text input field (and its states)
  • text input field with icon (and its states)
  • sexy toggle button
  • header (with search field, with tags)
  • search field
    • autocomplete (full page cover in active state)
  • autocomplete
  • video card
    • video card preloading state
  • left side bar
  • right side bar
    • category sub side bar

for pages:

• Static Pages (extends layout with go back header)
  • signup
  • faq
  • reset password
  • etc
• Content Pages (extends layout)
  • watch later list
  • search result
  • history

So basically we have a tree structure

├── layout
│   ├── static pages
│   │   |── Signup
│   │   |── Forgot password
│   │   |── Reset password
│   │   |── FAQ
│   │   |── Policy
│   ├── content pages
│   │   ├── Watch Later List
│   │   ├── Search Result
│   │   ├── History

yes, you are right! but I wouldn't call the signup page a static page. But the structure is correct.

And we also have a landing page (I think it deserves an own layout.)

probably we should call them external layout and internal layout or content page layout, what do you think?

Hmm. Their name should be more descriptive.

external layout is used for external pages and content layout for pages which includes content:D

The layout structure would look like this:

|-- includes/head
  |-- includes/styles
|-- includes/body
  |-- includes/header
  |-- # it can be overridden by children
  |-- includes/footer
    |-- copies/footer.md
  |-- includes/scripts