👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
There’s a need for web pages to be defined in which view it is in and in which type of container the whole view is in.
In this regard I am using
ui-view--<view name> and
ui-cr--<container name> (cr short for container).
UI View is the representation of the totality of the page or screen the user is in. Common examples of this is the Sign In screen of web apps, Dashboard, or Home views.
Example: If you are on the Terms & Conditions page or a web site, you could classify it as:
UI Container, on the other hand, is the type of user interface that contains the components or even the whole view (in this case, it is usually called screen or page).
Example: Using the example above, the page is contained in some sort of container – it is usually contained in a page or screen. For the sake of being device-agnostic, I would define it as screen – it being displayed thru a screen.
Other types of UI Containers are:
- dialog box
In my entry, UI Type and State Class Naming Convention, I used UI Type to define a dialog box – while in this entry, I used dialog box as one of the standard UI Containers.
I am now using UI Type to define a specific UI – something that one invents and not a standard in the community. For example, you’ve created a three-column panel that slides one by one – you could dub it as “three-col-panel” thus
UI Container is a modifier – once you’ve added this class to a component, it modifies its standard structure to take the form of the said container. The same can be said for UI Type, but what it modifies is the whole view, including the containers. Simply put, you may be in Terms & Conditions view, and while it is contained in a screen or page, once you’ve added a three-column-panel UI Type, the layout transforms into a three-column type of layout.