Corrosion Service

The purpose of this document is to provide a high-level overview of the styling for SharePoint forms. The styling of SharePoint forms aims to be consistent with the general company branding.

To get started, npm install -s corrosion-service-master-css!

Table of contents

• Look & Feel
• Behaviour
• Actions

Look & Feel

The look and feel of the application involves the graphical user interface (GUI) and includes elements such as colors, shapes, layout, and typefaces.

• Content Area The content area encapsulates all the content in a form.

1. The outer edges are divided into separate component as a header and a footer.
2. Color theme of #f76D01 for both header and footer
3. Curved corners with border radius of 20 pixels each.
4. Header and footer portion of layout: -

• Paragraph and Heading Fonts

1. Header text
2. Body text
3. Black colored font for paragraph and heading respectively, And grey for all the optional content items

• Margin

1. Relative and responsive margins and borders with auto adjusting layout as per the page dimensions
2. Body is padded inside a header and footer, Which only contains rounded edges for layout

• Buttons Buttons are the primary input method for completing actions such as submitting a form or adding/removing a section.

1. Primary buttons (From Fabric-UI component) added with custom CSS from sharedStyles.module.
2. Button background is set to #939ba1 from launch of application
3. Hover over effect of changing background to #f76D01, when mouse is brought over the button
4. Similar to the outer container button are shaped to have curved edges as well with the border radius of “8pixels”

Behaviour

Behaviour can be defined as combined functionality, operations and operations made by individual modules, inside an application

• Validation Validation is described as an process of forcing user to fill out all mandatory fields in order to submit a form. For illustration, Computer request Form can be referred and following conditions can be matched in order achieve validation effect :- => Select any date in past => Turn down item quantity to zero for any of the row items => Try exceeding total cost more than $10,000

1. Validation error message is being displayed in a prompt message bar, hidden just over the submit button
2. In case of validation error, submit button automatically becomes disable

• Dropdown list

1. Drop-down may or may not be fetching data from the database. And has a liner slide down effect
2. First item in list is set as default value for drop-downs as you can see in figure 5-3.

• Button animation

1. Color changes from #939ba1 to #f76D01 whenever user drag mouse over to button. This animation is added in order to achieve engaging user experience
2. Buttons would be disabled when user hit maximum limit for an attribute. Example:- Referring Computer request Form , Add button is disabled when line items exceed more then 9 entries and Delete button is disabled in case of single row item visible.

Action

These are events or occurrences that may be handled by the user or application itself. Forms are designed asynchronously so that, authenticating server connections and fetching data can be done parallelly. Avoiding possible performance delay.

• On application load

1. On load, a user’s credentials are checked. If user is logged out, an error message is displayed with link to sign in