![Cover image for Ultimate UI [💻 EP0: Series introduction and posts for the year! 🎨]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp2s7lndxsbs3qwx41p92.jpg)
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:
Article No Longer Available
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!
Top comments (9)
Now a little piece of criticism - aren't there already a dozen UI kits out there with all of these good traits (accessibility and so on), and with a gazillion components? As a tutorial it does sound good and I can see its valuable, however sometimes in "Dev Land" it seems we're eternally reinventing wheels that have been built a hundred times before.
If you can link to a UI kit that is actually accessible that would be amazing!
I have yet to find one that doesn’t fail almost instantly and it has been a constant frustration of mine!
But if it is just that I have been unlucky then that will save me a tonne of work and would really be appreciated!
That is the main motivation behind the series, trying to find something that I can use in a project and know it is accessible from the start (and doesn’t have just 8 components as that seems to be the trend with things that are actually accessible 😜🤣)
The bit to criticise from reinventing the wheel perspective is the fact that all this writing is leading to a CMS....like those don't already exist in spades! 🤣
Hey wow really? You might be onto something then, the first UI framework with accessibility in mind, amazing! Really surprises me that none of these "great" frameworks got that right. Go for it, it might be a hit!
Certainly won't be the first, but the aim is to be more complete than other accessible frameworks (you either have popular and complete but not accessible or accessible and incomplete it seems lol!) as most of them are very limited (it is like people only build 8-10 components then run out of ideas so you can never build a whole application from them!).
Who knows it may become the next big thing, or it may just end up as a pet project and something only I use! 🤣
Just because there is something, does not mean making another one is a bad idea. At least thats how I look at world where I can choose what I eat, drive, drink, watch, read, etc.
That's true, but if there are already 2 dozen other options then I wanna know what's the difference. But the author explained that none of the existing frameworks really got accessibility right, so there he has a point and I do see the added value then.
Are there any UI components / widgets / elements that aren't in that list you would like me to build?
Let me know in the comments!
Oh and thanks for reading this (and my other articles I just released if you have read them), have (another) ❤ and 🦄 to show my appreciation!
Good luck this year
Thanks Ben! Hope DEV crosses the 1 million member mark this year! 💪