
Show HN: Solid, a free and MIT licensed design system / UI kit for Bootstrap 4 - vantagedesign
https://docs.vantage-design.com/solid/demo/
======
Etheryte
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.

~~~
vantagedesign
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.

~~~
crazytweek
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?

~~~
vantagedesign
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..

------
guptaneil
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.

~~~
vantagedesign
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.

~~~
dariusj18
Perhaps keep a border color.

------
pdbrito
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.

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

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

------
cionescu
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

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

------
tiborsaas
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.

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

~~~
xeyownt
Also a typo in "SUCESS".

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

------
snickmy
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/](https://medialab.github.io/iwanthue/)
and see how they score on the accessibility axis ?

~~~
vantagedesign
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!

------
vorpalhex
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.

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

------
tyingq
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](https://imgur.com/a/bEawxZz)

~~~
vantagedesign
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?

~~~
tyingq
Android/Chrome 81.0.x

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

~~~
vantagedesign
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.

~~~
tyingq
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>

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

------
laken
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.

~~~
vantagedesign
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.

------
codingdave
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.

~~~
rofws
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.

~~~
hsson
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.

~~~
rofws
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.

------
gitgud
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...](https://github.com/vantagedesign/solid-design-
system/blob/master/LICENSE.md)

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

~~~
gitgud
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...

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

------
vantagedesign
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!

~~~
richrichardsson
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).

~~~
vantagedesign
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?

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

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

~~~
vantagedesign
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?

~~~
joekrill
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.

~~~
rozab
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.

~~~
thefounder
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.

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

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

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

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

------
tony0x02
Looks nice but typo in "accordion"

~~~
vantagedesign
Oops :) Fixed! Thank you for pointing this out

