H1: Main Title
H2: Section heading
H3: Subsection heading
H4: Subsection heading
H5: Subsection heading
Paragraph text
Paragraph bold text
Paragraph underline text
Paragraph italics text
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
Lastname | Savings | |
---|---|---|
Doe | $100 | |
Parker | $150 | |
Lane | $300 |
Title
Content HERE...
Accordion Label
Content HERE...
Blank Template
The ACR blank template offers all of the necessary dependencies to quickly get started.
Component Progress
Component | Status | Type | States | Modifiers | Dependencies | EDT (hrs) | Real EDT (hrs) |
---|---|---|---|---|---|---|---|
{{item.label}} | {{item.status}} | {{item.type}} | {{item.states.length}} | {{item.modifiers.length}} | {{item.componentDependencies.length}} | {{getEstimatedDevTime(item)}} | {{getRealEstimatedDevTime(item)}} |
Total Development Time (EDT): {{_.ceil(getAllComponentsDevTime)}} hrs / {{_.ceil(getAllComponentsDevTime/6)}} work days
Real EDT: {{_.ceil(getAllRealComponentsDevTime)}} hrs / {{_.ceil(getAllRealComponentsDevTime/6)}} work days
Total Element States: {{countAllComponentStates.stateCount}}
Total Element Variations: {{countAllComponentStates.comboCount}}
Terminology
Status
- Draft - Denotes a potential component where component states/modifiers/type haven't been fully determined and coding hasn't been started. This status comes prior to "In Progress" and component completion isn't guaranteed.
- In Progress - Currently in development; Component design is subject to change and some component states may be incomplete.
- In Review - Existing component states have been designed according to ACR's design standard model. This component is ready for review by the UI/UX Team to ensure quality and compliance.
- Complete - Component is ready for production use and has been reviewed, documented, and tested. New component states/modifiers can still be added.
Component Type
- Base Component - Component doesn't contain other components and lacks any component dependencies.
- Composition Component - Component states contain other components or have component dependencies in order to exist.
Legacy Browsers
IE11 General Issues
- CSS Variables are not supported
- CSS Filters are not supported
- CSS Grid is partially supported (very old version)
- CSS SVG Animations not fully supported
IE11 Component Issues
- Tooltips lack pointers (directional indicators)
- Buttons lack pressed state
- Indeterminate Loader not supported
Modern and Legacy Browser Detection
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)){ document.write('<link href="/Assets/CSS/legacy.min.css" rel="stylesheet">'); }else{ document.write('<link href="/Assets/CSS/standard.min.css" rel="stylesheet">'); }
Development Roadmap
The ACR Application Design System is on target for completion at the beginning of Q4 2021. Below is the projected completion quarters for various systems.
Version | System | Priority | Order | Status | Completion |
---|---|---|---|---|---|
Modern | Framework Independent Version | High | 1 | In progress | Q4 2020 |
Legacy | Framework Independent Version | High | 2 | In progress | Q4 2020 |
Latest | Framework Independent Version | High | 3 | In progress | Q4 2020 |
Component Repository | Custom DEV Tool | High | 4 | Complete | Q2 2020 |
Component Inventory Analytics | Custom DEV Tool | Medium | 5 | Complete | Q3 2020 |
Log Invalid Attributes | Custom DEV Tool | Medium | 6 | In progress | Q3 2020 |
Common Downloadable Templates | Custom DEV Tool | Medium | 7 | In progress | Q4 2020 |
Content Delivery Network | CDN | High | 8 | In progress | Q4 2020 |
Automated Library Optimization | Custom DEV Tool | Low | 9 | Not started | Q1 2021 |
Legacy Sitemap Generator | Custom DEV Tool | Low | 10 | Not started | Q1 2021 |
Application Specific Library Update Agent | Custom DEV Tool | Low | 11 | Not started | Q2 2021 |
AI Application Composer | Custom DEV Tool | Medium | 12 | Not started | Q2 2021 |
Angular Components | Framework Dependent Version | Medium | 13 | Not started | Q3 2021 |
Vue Components | Framework Dependent Version | Medium | 14 | Not started | Q3 2021 |
Third Party Resources
Animations
Charts
CSV Parser
Common Functions
Image Optimization
ACR Resources
Logos
Favicons
CSS
JS
UI/UX Team
Guidlines
Shapes / Shadows
Shapes / Radius
Colors
Colors should be used according to the following usecases:
Text
Section Backgrounds
Layout Backgrounds
Button
Button text should not contain more than two words.
Buttons with icons must use a "div" or "a" tag since there is a bug in Chrome and Safari that doesn't allow CSS grid applied to the "button" html tag.
Form / Input
If input only requires a number, prevent non-numerical input data.
Data / Table
Right align all table cells that contain numerical data.
-
Always use a virtual list for large lists of rendered data to increase performance.
https://web.dev/virtualize-lists-with-angular-cdk/
Data / Table / Filters
-
Pagination, filters, and sorting should be performed server-side for performance, consistantancy, maintainability, and to avoid browser specific implementations.
Application / Page Routing
-
Always implement route-level code splitting when using a front-end framework such as Angular. Route-level code splitting dynamically loads pages when they're requested which reduces load time and bundle size.
https://web.dev/route-level-code-splitting-in-angular/
Application / CSS
-
Always defer non-critical CSS. Allow non-critical CSS to load in the background to reduce inital load time.
https://web.dev/defer-non-critical-css/
Application / Separation
-
Always avoid mixing server-side code into application font-end. This will allow future maintainability and cloud implementation/movement signifcantly simpler. In addition, it will lower cost since your application can easily become serverless with pay-as-you-go pricing.
Application / Performance Audit
-
Always performance test your application using lighthouse.
https://web.dev/measure/ -
Time to Interactive performance metric must be under 5s
-
Under 170 KB of critical-path resources (compressed/minified)
-
Page must load and get interactive in < 5s on slow 4G connection
-
CSS fonts must have "font-display:swap;" to prevent render blocking
-
Resize and lazy-load images based on screen size for added performance and render times.
Application / Exports
-
Always process exports on seperate thread using a web worker to run in the background without blocking the main thread. This will allow the user to continue using the application while avoiding a slugish UI.
-
Example (set "worker: true") for exporting/processing CSV files: https://www.papaparse.com/
Server Configuration
-
Use GZIP or BROTLI text compression when serving your application to reduce file size, load time, and server response times.
-
Enable HTTP/2 to increase the speed of requested resources.
-
Always redirect HTTP to HTTPS.
Design System
Feature coming soon!
The Design System will allow developers to quickly create the entire structure of their application in a few clicks, download their application structure, and then integrate the required functionality to connect the backend.
Planned features
- Generate application structure
- Generate sitemaps
- Automate performance optimization
- Intelligent component suggestions
- Layout composition selection
- Download generated results
- AI enhanced wireframing