Page History

These guidelines help ensure that all DSpace components have a consistent layout and follow the essential Components of Web Accessibility ( https://www.w3.org/WAI/standards-guidelines/wcag/ ). These guidelines have to be followed by anyone who wants to contribute to the project.  See also our Code Contribution Guidelines

Overview

These guidelines apply primarily to the "Base Theme" for the DSpace User Interface.

• Base Theme (/src/app/ directories):  The primary look & feel of DSpace (e.g. HTML layout, header/footer, etc) is defined by the HTML5 templates under this directory. Each HTML5 template is stored in a subdirectory named for the Angular component where that template is used. The base theme includes very limited styling (CSS, etc), based heavily on default Bootstrap (4.x) styling, and only allowing for minor tweaks to improve accessibility (e.g. default Bootstrap's color scheme does not have sufficient color contrast)
• Two additional themes are provided with DSpace out-of-the-box
  • Custom Theme (/src/themes/custom directories): This directory acts as the scaffolding or template for creating a new custom theme.  It provides (empty) Angular components/templates which allow you to change the theme of individual components. Since all files are empty by default, if you enable this theme (without modifying it), it will look identical to the Base Theme.
  • DSpace Theme (/src/themes/dspace directories): This is the default theme for DSpace 7.  It is a very simple example theme providing a custom color scheme & homepage on top of the Base Theme.
• More information on themes (in general) can be found in the User Interface Customization documentation

Terminology used in this page

The following terms are used frequently in this page, and this is a quick reference to what we mean by these terms:

• template = Angular template
• component = Angular component
• style = CSS/SCSS styles
• theme = a set of templates that work together (along with the styling/CSS) to comprise the look & feel of the site.

Guiding Principles

• All templates in the Base Theme (/src/app directories) should only use default Bootstrap styling. Documentation at: https://getbootstrap.com/docs/4.6/getting-started/introduction/
  • Exceptions may be made for accessibility purposes. For example, Bootstrap notes their default color scheme does not always have sufficient color contrast
• When Bootstrap Components (accordion, dropdown, etc …) are required you MUST use the included ng-bootstrap library. Documentation at: https://ng-bootstrap.github.io/#/components/accordion/examples

The use of the Bootstrap framework can help in achieving some WCAG goals such as ‘Visual Presentation’ (AAA), 'Parsing' (A), ‘Orientation’ (AA), ‘Reflow’ (AA) and ‘Text Spacing’ (AA). See the Bootstrap chapter ‘Accessibility’ for an explanation of WCAG and where to find additional information.

User Interface Design Guidelines

This section provides basic guidelines on User Interface layout/design and the elements (or components) used by the DSpace User Interface.  DSpace developers strive to meet these guidelines in order to ensure consistent behavior/layout on all pages.  If you find a guideline is not met on a particular page, please report a bug ticket for that user interface page.

...