-
- Use sentence case across Neeto products
- Choosing the right loading indicator: PageLoader vs. Spinner
- Controlling width in NeetoUI Input component
- Dark mode
- Do not use hex values from the design
- Stop using Tailwind for theme styles – here's why
- When to use a Modal vs. when to use a Pane
- Confirmation modals
- Usage of red color in UI
- Ensure ideal line length
- Standardizing card layouts across Neeto
- Empty states
- Consistency in the way we are showing the delete option
- Enter or Command + Enter should submit the form
- Move the triple-dot menu to the first column in the table
- Opening a link in a new tab using Command + Enter is not working at a lot of places
- Handling bulk actions items in table
- Move toggle switch before the label
- Fix Table inconsistencies
- In some cases tooltip is not enough
- Remove CSS font-smoothing: antialiased to improve the text contrast
- When to use thumbs-up messages vs full success messages
- Disable auto-close in error Toaster
- In the table use the three-dot menu as opposed to side-by-side icon placements
- Fix the shrinking of 3 dots in first column
- Table columns not respecting the column widths
- Links need to be clear and predictable
- Using TableWrapper to avoid dynamic height computation
- AutoFocus on any field in an overlay (Modal/Pane)
- Rethinking section titles in admin interfaces: Best practices from a UI audit
- When to use a Select dropdown vs. Radio buttons
-
- General HTML best practices
- What is a screen reader?
- What is Semantic HTML?
- HTML semantic tags for text
- HTML semantic tags for structure
- What HTML tags are non-semantic?
- Accessibility guidelines
- Insert an element into the tab order
- Correctly set the visibility of offscreen content
- Keyboard access fundamentals
- Focus and the tab order
- Arrange elements in the DOM to be in logical order
- Use semantic HTML for easy keyboard wins
- Maximizing User Experience with Buttons
- Why links matter for keyboard navigation
- Control focus with tabindex
- Remove an element from the tab order
- Avoid tabindex > 0
- How to make buttons accessible with meaningful names
- Write accessible link texts
- Add alternative text to images
- Ensure form elements have associated labels
- How to add labels to form elements
- Understand the difference between block and inline elements
- Reducing markup
- SCSS 7-1 pattern
- Variables, Mixins & Extend
- CSS Architecture
- BEM Naming Convention
- Why should we consider BEM?
- SCSS and BEM
- CSS best practices
- When is it ok to disable text selection?
- Viewport best practices
- Character encoding best practices
- VSCode Recommended Extensions - TailwindCSS
Generic style guide
General HTML best practices
What is a screen reader?
What is Semantic HTML?
HTML semantic tags for text
HTML semantic tags for structure
What HTML tags are non-semantic?
Accessibility guidelines
Insert an element into the tab order
Correctly set the visibility of offscreen content
Keyboard access fundamentals
Focus and the tab order
Arrange elements in the DOM to be in logical order
Use semantic HTML for easy keyboard wins
Maximizing User Experience with Buttons
Why links matter for keyboard navigation
Control focus with tabindex
Remove an element from the tab order
Avoid tabindex > 0
How to make buttons accessible with meaningful names
Write accessible link texts
Add alternative text to images
Ensure form elements have associated labels
How to add labels to form elements
Understand the difference between block and inline elements
Reducing markup
SCSS 7-1 pattern
Variables, Mixins & Extend
CSS Architecture
BEM Naming Convention
Why should we consider BEM?
SCSS and BEM
CSS best practices
When is it ok to disable text selection?
Viewport best practices
Character encoding best practices
VSCode Recommended Extensions - TailwindCSS
Open
Enter
Move
Close
Esc