UI Architecture

The Toolkit is based on a Design System. By having a well-defined design system for visual presentation and interactive behaviors, HP customers can be guaranteed a consistent user experience across HP.com web pages and applications regardless of their platform, browser, or device. This design system is the foundation that drives the front-end code and utilizes processes that support the rapid design, development, and integration of the Toolkit. Therefore, when you combine the UX and UI thinking around Responsive, Semantics, and Processes you have end-to-end Responsive Design System (RDS).

The Toolkit team is committed to a semantic design and development system. The Semantic System is all about the approach to organizing, classifying, and the naming web components from both the design and development perspective. Therefore, a core principle of the front-end code development approach is to utilize and embraces Semantic CSS. Semantic CSS is part of the overall Semantic System for the Toolkit, however Semantic CSS is specifically referring to approach the naming of CSS classes within web components.

The Seperation of Layout and Content is a foundational principle of the Toolkit and part of the Semantic System. The main reasons for seperating the layout from content is to align with the overall Model-View-Controller (MVC) approach for the UI Architecture of the Toolkit. By seperating the 'View' from the 'Model', this allows for rapid rebranding or global design changes across the system. MVC combined with Semantic CSS makes for a powerful and systematic method of performing global changes through the republishing of a single CSS file. This approach is in contrast to the need to republish web pages when design, layout, or rebranding updates are requested. To see a good example and view the power of MVC and Semantic CSS, go to CSS Zen Garden website.

A Component Driven Development (CDD) approach is the way we think about our design and development for the Toolkit. CDD is similar to FDD, Feature Driven Development, which is an iterative and incremental software development practice that aligns with the Agile methodology. The main purpose of CDD is to design, develop, and deliver web components, or features, that are self-contained, easy-to-use, and extensible. The fact that components are self-contained means that any styles and behaviors for that specific component are developed in a way that is will not affect or impact other components.

Progressive Enhancements: Blah

The RDS Toolkit is designed and developed to be Platform Agnostic. What does that mean? That means the RDS Toolkit ONLY delivers the design, behavior, and front-end UI code layer in a Responsive, Semantic way. Our approach is to build the Toolkit with only the global, core, or low-level HTML5, CSS+, JavaScript, and Iconology resources. The RDS Toolkit approach is to be the lowest common denominator front-end code layer that allows for multiple CMS architectures or website integrations. The Toolkit is not based on any specific CMS implementation, coding language, or technology. Therefore, by taking a platform agnostic approach with the Toolkit, multiple CMS platforms like Tridion, WebShere, or Wordpress can easily integrate with it. In addition, the Toolkit is independent of any specific templating language like JSP, JSPx, ASPx, XSLT or PHP. Therefore anyone of these templating languages can be used to output the front-end UI code layer.

Performance: Blah

Because these resources are global, core, and low-level this means that the the front-end can be easily extended by other consumers of the Toolkit code to meet thier specific needs. The Toolkit does not do everything for every HTML page. The goal of the RDS Toolkit is to provide the foundation or basis for a Responsive, Semantic UI layer based on the latest HPE Design Theme.

The Toolkit is built from the ground-up as a system. Therefore, changes can be made across the system at a global, language, form factor, behavior, or specific-style level. These types of changes would be reflected across all web sections, pages, or instances that are integrated with the RDS Toolkit. This is the approach we have taken for managing the consitency of the end-to-end customer experience and HP brand. Specific examples include things like chnages to responsive behaviors at specific beakpoints, typography styles, fonts, or color themes to name a few.

A Template is defined as 'a document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used.' To quote Eric Bidelman from a post on the HTML5rocks website, 'The concept of templating is not new to web development. In the last couple of years however, we've seen an explosion of MVC frameworks spring up. All of them are slightly different, yet most share a common mechanic for rendering their presentational layer (aka da view): templates.'