Every day I see a new tutorial on how to build a menu system, how to build a drop down box etc. that makes me cry!

Why do I cry I hear you ask?

Because most of these tutorials are...well they are absolute garbage!

<div> soup everywhere, no WAI-ARIA when it is needed, hard to extend and more!

Well I finally cracked, so here it is, the introduction to the largest series I will probably ever create - a complete UI kit from the ground up with a very detailed explanation of the what, why and how of designing a perfect UI kit!

Part of my "year of the series"

This is one of 4 series I am writing this year, you can see the other series here:

What will you get out of this series?

• 75+ UI components and patterns designed to be:
  • Performant - no 3 second load times here!
  • Accessible - 1 in 6 people have a disability, you can't afford to ignore their needs!
  • Internationalised - some languages read right to left, some top to bottom!
  • Compatible - we are looking to support 99% of browsers (yes even IE 😲)!
  • Developer Friendly - well documented (hence the series), easy to adapt and easy to convert to your favourite framework!
• Detailed explanations of accessibility principles so you can learn more about accessibility bit by bit to improve your code!
• Detailed explanations of CSS properties you may not use or even know and their support!
• How we can use "progressive enhancement" to support older browsers while providing bells and whistles to newer browsers!
• hundreds of code examples and patterns to use in your own projects

And much more!

Why am I building this series?

While you will get many benefits I want you to understand what I will get out of it, just so you know it isn't too good to be true!

• To show off - I need to establish that I know my stuff on accessibility and performance for an upcoming project, this lets me demonstrate that!
• For my own use - I am going to be building a load of products that are focused on accessibility, none of the libraries out there fit my needs!
• To build a following - I will be seeking investment at some point, having a good following of developers who are invested in my work helps me raise capital!
• To sell products - Related products built using this UI kit (plus the UI kit itself when complete enough) to start building the InHu brand!
• Crowd sourced knowledge! - I will never get things perfect first try, hopefully a project of this size will start attracting attention from people who can offer useful feedback and ideas to make the product better!

As you can see there is just as much in this for me as there is for you, so you know that I will be putting in 100% the whole way through and making sure I get things right!

Ok it sounds interesting, what will the series cover?

These are the elements / widgets / components I currently have planned (not in release order FYI!)

• Abbreviation Element
• Accordions / Collapsible Sections
• Alerts, confirm dialogs etc.
• Audio player
• Auto Complete
• Badges (e.g. with number messages etc.)
• Navigation Breadcrumbs
• Buttons
• Bypass Links (skip content links)
• Calendar
• Carousels
• Charts
• Chat System
• Checkboxes
• Code Editor
• Code Snippets
• Colour Picker
• Combo Box
• Configurable Keyboard Shortcuts
• Context Menu (right click menus)
• Date Picker
• DateTime Picker
• Diff View
• Drag and Drop Lists
• Drop Down / custom selects
• Drop Zone / file uploaded
• FAQs
• Forms
• Form Validation
• Help Wizard
• Guided Tour and onboarding
• Idle Timeout
• Image Cropper
• Inputs and labels
• Infinite scroll
• Lists (including sortable)
• Mega Menus
• Modal Dialogues and focus trapping
• Multi Select
• Off Canvas Information
• Organigram
• Paging / Pagination
• Picture Manager
• Pop Out Window
• Progress Indicator
• Preloader
• Radio Buttons
• Range Selector
• Ratings
• Register and Login Page
• Scroll To Top
• Scrum Board / Kanban
• Search Bar
• Settings Menu
• Sliders
• Slide Show / Presentation
• Social Sharing Widgets
• Sortable Lists
• Switches / Toggles
• Tables
• Table Filters
• Tabs
• Tag Cloud / Word Cloud
• Theme Switcher
• Time Picker
• Timeline
• Toasts
• Tool Tips
• Toolbar
• Tool Tips
• Tree View
• Two Panel Selector
• Validation
• Video
• Wizard
• WYSIWYG

Cool, I am looking forward to it, what should I do now?

First thing is first, you should bookmark this page as it will serve as the "index" for the series so you can quickly jump between articles (I will link to each article in the above list as they are released).

Then follow me on DEV.to if you don't already!

After that the only other thing you should do is follow me on Twitter as I will be releasing some bonus material over there and upping my Twitter game too this year!

Wrapping up

This is a series that I have wanted to write for a long time as it gives me an excuse to finally build a fully accessible and semantically correct UI kit, something which doesn't exist (there are partial UI kits and patterns but not a single library that covers enough to build a full application!).

I hope you enjoy (and participate) in the series so that people can point out my mistakes and offer ideas to make things better.

And here is my promise to you, if someone comes up with a better pattern for something I will completely rewrite any articles to use that pattern so you know things will be as good as they can be!