Show HN: Solid, a free and MIT licensed design system / UI kit for Bootstrap 4 | Hacker News Reader

Show HN: Solid, a free and MIT licensed design system / UI kit for Bootstrap 4

docs.vantage-design.com

94 pointsvantagedesign70 comments

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.

Honestly I have the same lag. Chrome on OSX MBP 15" 2018.

That's so weird. For me it's all butter smooth, and I'm on a 6+ year old desktop with Firefox.

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?

Could be it, I'm on a i7-4770K with Win10 and Firefox and no lag at all anywhere.

I don't have a Mac so I can't test it on MacOS I'm afraid..

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'm confused. It says it costs 49 euros to download on the page at the bottom.

Oh, I missed that bit entirely when scrolling the page. Apparently there's a free version and a paid version, the latter having more stuff.

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 :)

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?

Looks nice!

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.

Perhaps keep a border color.

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 :)

Same on this Pixel 4. Feels like maybe a 200-300ms delay before any animation is triggered

Could you check how it is now? (With a cleared cache :) )

Same though on desktop / firefox. I thought to read through the comments first to see if others anticipated the same thing.

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

Thanks!

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 :)

+1 for mdbootstrap :)

Bug: "A beautiful design system powered by Bootstrap 4. by Vantage Design" has a higher z-index than the block beneath it so it floats above it.

Yep, I am aware of that. Going to fix it asap! Thanks :) EDIT: it's fixed!

Also, "beatufiul"

Thanks! Fixed it

Also a typo in "SUCESS".

Fixed, thank you! Kinda ashamed of all these spelling errors.. lol

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!

On the Download/Buy page, there's no good indication of bundle sizes or dependencies, nor do I see it obviously in the docs.

Bundle size and sub-dependencies is something really important to me when I choose tools and it's part of why I really like Spectre and Skeleton.

Fair point, I'll try to include that on the page! Thanks for your feedback :)

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

Thanks! Nope, it's not. And I've never seen it before so I don't know where it could come from. What browser are you using?

Android/Chrome 81.0.x

You do have to click on either the left or right arrow to see it.

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.

Also happens on current Chrome on Windows, though it's blue. Adding "outline: none;" to the below button element fixes it.

  <button type="button" class="slick-prev slick-arrow has-ripple"">...</button>

Okay I'll see if I can apply that fix in a future update, thanks! It's probably a Chrome specific thing then.

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.

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 :)

BS 5 was supposed to come out in 2020 but looks like there is a little bit of wait. A jQuery dependency is okay till then

"As of Feb 2020, jQuery is used by 74.4% of the top 10 million websites (according to W3Techs).[18]"

Get over yourself. 75% of top 10 million websites still use. Heck Wordpress and Drupal still use. It's still relevant.

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.

Unfortunately I couldn't disagree more. You do not really need JQuery any more, as JS has matured. I just see it as wasted loading time.

JQuery has a lot of ergonomics that I'm really comfortable with (mainly chaining).

I agree with your opinion that you do not 'need' JQuery. I'm saying that people will use it nevertheless, even if better alternatives are available.

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.

Looks nice, but how is this "free and MIT licensed"?

- 50% of components are in a pro-version, which is not free

- [1] The license in the Github repository is not MIT

Isn't this super misleading? Or am I missing something?

[1] https://github.com/vantagedesign/solid-design-system/blob/ma...

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 :)

Fair enough good to see the license is corrected.

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 :)

Hi all! I'd love to know what you think of this design system. Feedback is highly appreciated and will be taken into account for future updates!

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?

Not sure what happened, but it's fixed now.

I don't like the "material design" text inputs. Always found them confusing.

I personally like them and I think many people do. Nevertheless, I'm curious to what you do like. What would you like to see?

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.

Fair point, I'll that that into account and see what I can do. Thanks for your feedback

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.

Looks like a neat UI Kit. What are you using for tags and select?

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 :)

The links in the footer are not very visible to me.

Thank you for your feedback. I agree, and I plan to fix that in an upcoming update :)

Looks nice but typo in "accordion"

Oops :) Fixed! Thank you for pointing this out

Reply on news.ycombinator.com