WETAccel: Enterprise-Grade Django Template for Government of Canada’s Web Initiatives

Table of Contents

1. App Container

Class: .app-container

  • Description: The main container for your application, offering a consistent layout structure. Centralizes content and provides consistent padding.
  • Properties:
    • max-width: defined by the container standard.
    • margin: auto for horizontal centering.
    • padding: 12 units top and bottom, 4 units left and right on mobile and 0 units on medium and larger screens.

2. App Card

Class: .app-card

  • Description: A versatile card component ideal for displaying grouped content.
  • Properties:
    • border: 1px solid with a neutral gray tone.
    • border-radius: medium rounded corners.
    • padding: 8 units on all sides.
    • box-shadow: inner shadow for depth.

3. App Input

Selector: input.app-input

  • Description: An input field designed for user interactions.
  • Properties:
    • border: 1px solid with a subtle gray shade.
    • border-radius: medium rounded corners.
    • width: 100% of the container.
    • margin-bottom: 4 units.
    • padding: 4 units left and right, 2 units top and bottom.
    • box-shadow: inner shadow for depth.

4. App Button

Class: .app-button

  • Description: A clickable button component, essential for user actions.
  • Properties:
    • padding: 4 units on top and bottom, 2 units on left and right.
    • border-radius: medium rounded corners.
    • font-color: white.
    • border: 2px solid with a distinct color shade.
    • background-color: #2572b4.

5. App Section Heading

Class: .app-section-heading

  • Description: A prominent heading for distinguishing different sections.
  • Properties:
    • font-size: 3 times the base size.
    • font-weight: bold.
    • margin-bottom: 4 units.

6. App Input Container

Class: .app-input-container

  • Description: A container tailored for input fields.
  • Properties:
    • margin-bottom: 1 unit.

7. App Input Label

Class: .app-input-label

  • Description: A label associated with input fields.
  • Properties:
    • display: block.
    • font-size: slightly larger than the base size.
    • font-weight: medium.
    • margin-bottom: 2 units.
    • color: dark gray (#1A202C).

8. Messages

Selector: .messages li

  • Description: A list item for displaying messages.
  • Properties:
    • padding: 4 units on top and bottom, 2 units on left and right.
    • border-radius: medium rounded corners.
    • margin-bottom: 4 units.
    • border: 1px solid.

Variant: .messages li.success

  • Description: A success variant of the message list item.
  • Properties:
    • font-color: green (#38A169).
    • background-color: light green (#F0FFF4).
    • border: 1px solid green.

Variant: .messages li.error

  • Description: An error variant of the message list item.
  • Properties:
    • font-color: red (#E53E3E).
    • background-color: light red (#FED7D7).
    • border: 1px solid red.

9. Menu Animation

Class: .menu

  • Description: A menu with a transition effect.
  • Properties:
    • transition: max-height changes over 0.4s with ease-in-out timing.