Neeto UI/UX
Neeto UI/UX
    • General languages
    • 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
    • Working with NeetoEmails
    • Handling UI markup inside email templates
NeetoKB Made with NeetoKB
    • General languages
    • 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
    • Working with NeetoEmails
    • Handling UI markup inside email templates
NeetoKB Made with NeetoKB
  • /

UI patterns

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
Open Enter
Move
Close Esc