-
Notifications
You must be signed in to change notification settings - Fork 2
UI Dev Guidelines
deepakduggirala edited this page Jun 8, 2023
·
1 revision
- responsive design - design for two views: (xs, sm) vs (md, lg, xl)
- configure color palatte and theme switcher for different apps
- vuestic color palatte is not great.
- consistency in using colors
- consistency in using font weights and font size hierarchy
- consistency in using date and time formats
- Dark mode
- save user preferences to local storage as well as to db transparently
- accessibility (other than what we get from vuestic)
- prevent jerky view updates when loading page or changing state
- may be because when the data is empty, height of the component is collapsed - have min heights?
- use vuestic skeletons?
- use Transition, TransitionGroup, KeepAlive, Suspense Built-in components?
- vue - fall through attributes to make components more useful and generic
- vuestic css config and custom overrides
- vuestic integration with tailwind - which classes does vuestic override?
- use pinia store only to get and set data, keep business logic out of stores
Tooling:
- vscode: A component's template and script is side-by-side panels
- vscode: cmd+click on a custom component in template should open it
- vscode: tailwind class completion disappears if backspace is pressed, only works when typing after a space.
- ESlint: warn deviations from vue conventions (ex: custom components should be used as
<CustomComponent>
and not as<custom-component>
) - git pre-commit lint checks all files - it should only lint files that are being commited.