The fact that even the header parallax is janky on a laptop, not to mention a phone, doesn't instill the feeling that this is built sturdily. Looks aren't worth much if the page is laggy even with what's essentially static content. As another example, when ticking a box for the first time, there's a visible delay on state transitions. Toggling back and forth after that doesn't seem to be an issue. The crosses in badge removal look off, the corners are doubled as if there's two icons overlaid with a small position difference. The links in the site footer are practically unreadable with dark purple on a dark gray background.
Don't get me wrong, I don't mean to put your work down. Building a whole UI library from scratch is far from being a small feat and making it open source is definitely admirable. At the moment it feels like it could use some polish, though.
Thanks for your feedback. It's really weird though because for me on a laptop, everything is butter smooth. Even the parallax in the header. So I wouldn't know where those performance issues originate from. Would you know a way to troubleshoot these and solve them? It's mostly pure Bootstrap CSS with the addition of CSS animations. Nothing fancy or strange. Except for the parallax, but that's another story. Inputs and dropdowns should all be very smooth and reacting instantly.
FYI: I'm having the same problems.
Especially the click effect on buttons is really laggy (Testing on Chrome).
That's really annoying as you see it all the time.
Having a 2017 MacBook Pro, 2,9GHz I9, 16GB RAM and an Radeon with 4GB. So my Hardware shouldn't be the Problem. Maybe some Chrome/MacOSX Bug?
On my MS Surface Pro 6 i5 everything works fast, in Firefox and Chrome. Firefox feels maybe a tiny bit snappier but there's almost no difference. Maybe the issue only exists on Macbooks?
I've pushed some changes to the demo that should optimize the animations on the page. It's hard for me to test it when not experiencing the issues myself, so could you try how it feels for you now?
The normal version is free, which includess a lot of components. If you want more, there's a Pro version which is paid. But the free version is open source and already quite extensive to use :)
Some feedback: if I saw those disabled buttons without an active button next to it, I would have no idea they are disabled and would wonder why the button isn’t working. I recommend using gray for disabled, instead of just a lighter color scheme.
Thank you! Appreciate that feedback, I'll look into that. Sounds like it might be a good tweak to the styling. However, I also like it when a button, even when disabled, may still convey meaning of success, for example. So that I know that I want that button to become 'active'. At least, that's my view on it.
Feels really sluggish on mobile. There's a noticeable delay when interacting with components. It's easiest to see with the dropdown but seems to apply to all of them. I tried both Brave and Chrome, using a Pixel 3A.
Hmm strange. I'm on a Galaxy S8 with Chrome and I only notice a slight lag with the parallax elements. The other elements all seem to function very smoothly. I'll look into it and see what I can find! Thank you :)
Looks very nice. Bootstrap and material design were married before in mdbootstrap. Don't really understand the choices for pro items (some very basic components are part of the pro package). I would personally not use it because it's not a drop-in replacement for Bootstrap currently (so I could validate its usefulness) and then decide whether to buy or not
I agree, and this was done intentionally. The free version offers a solid and complete foundation for most projects. The pro version offers that extra edge of functionality, along with templates for sections and pages.
Think of the free version like a demo, but not crippled in functions like most demo's, and the pro version being the full swiss army knife toolkit for your project.
What do you mean with not a drop-in replacement for Bootstrap? It builds upon and extends Bootstrap, so it could replace it (as it includes it) and has more to offer (selects, tags, better carousels, etc.).
You could try out the free version and see if it is up to your requirements, and buy the pro version if you want the extra functions.
You're welcome to email me or join my Slack to have a chat, both links can be found at the bottom of every page on the main website :)
That bright green looks quite strong in pair with white text. Have you tried to run your colour palette on a tool like https://medialab.github.io/iwanthue/ and see how they score on the accessibility axis ?
Yes, I have looked at the WebAim WAVE accessibility report and that's something I'm going to address with an update soon. Though, I do not believe all contrast issues are a huge problem in all cases. Thanks for that link, will check it out!
Nice work! Is the orange outline on the left/right carousel (once you click, near "gradient controls") meant to be there? See: https://imgur.com/a/bEawxZz
Okay thanks I'm going to check it out. I think some browsers add an outline to indicate it being selected, it might be that. I believe Firefox has a slightly visible dotted line around each element.
I like it! Only issue I have though are some less than accessible design decisions. A lot of them could be fixed based on implementation (including `for` in the labels), and including a label with the select dropdown, but other than that I like it.
Thanks! Will definitely take that into account and fix that. I plan on making it more accessible in the next update, including some screen reader only labels and such.
While I'm fully supportive of making a choice to not use current trendy frameworks... putting out a jQuery-based design system in 2020 doesn't feel like it is going to find a large target audience.
Maybe not the big, funded websites. But I'm sure a lot of people doing small, static-y websites for MVPs, personal websites, or small products will use JQuery for a long time to come. JQuery is a no-brainer for anyone with small website with limited interactivity.
JQuery is like the PHP of front-end - inexpensive to build with, easy to use and loads of information available on stackoverflow.
I agree! Though Bootstrap 4 uses jQuery for its plugins so I figured why not. BS5 will get rid of jQuery, and I plan on doing the same when updating this design system for BS5 :)
I like to see new things done with jQuery. React-and-friends are too over-used right now, and it's suffocating us who want simple libs for simple sites.
The license in the repo is a mistake and should be fixed soon. I probably mixed up the files. But yeah, the standard free part of the design system already offers a lot and is fully open source and MIT licensed. If you feel like there's not enough free stuff in there for you, then I'm sorry but thats up to you :)
It's not the fact that there's a pro version, I don't have a problem with that. I just didn't like the way it was marketed to seem like an open-source project. You can't actually sell MIT licensed software and keep it open-source right?
That would defeat the purpose of permissive open-source MIT licenses...
I partially agree with you. The demo page is for both the free (open source, MIT license) version and the Pro version. Just for the sake of simplicity and to show that there's more if people want that, but its not forced anywhere.
I might consider making two versions of the demo and documentation, and keeping them separate. I didn't think it would matter. I value your input :)
I was a bit confused with the pricing and licenses.
All three licenses seemed to be the same price when I added to cart (although it says "from 49€", so I expected the licenses above standard to be more expensive).
I generally found the licensing to be a bit confusing tbh (but that probably due to them all being the same price).
They shouldn't be the same price: as soon as you select a license it updates the price. Do you have JavaScript enabled? Perhaps my ecommerce software is a bit wonky in that regard, and I'd love to know more about your situation so I can fix that :)
Did they show the correct price when they were in the cart?
I think they've iterated on the design a bit over the years, but my primary criticism is that it can be hard to distinguish that an input is, in fact, an input. I think Google has since changed their design to have a filled background or border, which definitely helps - but this particular implementation doesn't seem to do that (except when the input is disabled, which sort of defeats the point).
There's also a lot of problems around how the placeholders and labels work - particularly in distinguishing them from each other.
I think it strongly evokes a line on a paper form, which indicates a place where the user must fill out a field (and fits with the recurring paper metaphor). If I'd never used a computer before, I think I would figure this out based on the context clues.
So while it may not fit current UI paradigms, it might be better? I applaud Material Design for attempting to move things forward in this way.
The issue is that the computer screen is not a paper form. You can't just fill out forms wherever you see dotted lines/horizontal rules(hr tags). Unlike paper pages, most of the HTML pages are read only / not content editable.
Thanks! For tags I'm using "Bootstrap 4 Tags Input", and for select I'm using "bootstrap-select". I've custom styled these plugins to fit them in perfectly with the design language of the system :)
Don't get me wrong, I don't mean to put your work down. Building a whole UI library from scratch is far from being a small feat and making it open source is definitely admirable. At the moment it feels like it could use some polish, though.