18 ms·
Element – A Vue 2.0-based component library for developers, designers and PMs
- deallocator 10y agoI really like Element but it's a shame they don't it responsive, when I tried contributing to make things responsive they actively denied the PR saying it's for desktop apps. Actively refusing pull requests that make the framework responsive is a bit of a downer for me, but overall I like what the author(s) did
- coldpizza 10y ago"it's for desktop apps" haha can you imagine if desktop users had different resolutions and aspect ratios on their screens? oh wait...
- WhitneyLand 10y agoIt's an excellent point. This one response from the team is enough for me to lose confidence in the project.
- naiv 10y agoThey have their own mobile ui https://github.com/ElemeFE/mint-ui https://github.com/ElemeFE/mint-ui
- mephistopheles 10y agoIs it just me or the mint-ui homepage[0] doesn't display anything at all ? [0]( http://mint-ui.github.io/ http://mint-ui.github.io/ )
- redindian75 10y agoFor mobile FrameWork7-Vue has the most mobile components ready-made... Not affiliated, just a big fan https://framework7.io/vue/ https://framework7.io/vue/
- lima 10y agoQuestion for HN: I'm a systems developer and want to play a bit with frontend development (writing frontends for custom tools I built). What framework + feature-complete component library is recommended in 2017? React? Vue? Polymer? Plain JS with intercooler.js? I feel a bit overwhelmed.
- simooooo 10y agoI've been using Vue for a similar purpose this last week or two and I've found it very simple and easy to follow. I'd recommend that.
- lima 10y agoWhat component library to use?
- netforay 10y agoDepends on which components you need. Normal HTML with Bootstrap CSS will mostly cover the basics. And there are other individual Vue component libraries like VueTable etc.
- simooooo 10y agoCurrently I'm not using one, building my own context menu, graph and grid components as a way of testing out vue, and to see if I can do it. Reasonably straight forward so far
- thewhitetulip 10y agoI had begun to write a guide, but currently busy with something else :-( I find vue to be an amazing library, got started within a week https://github.com/thewhitetulip/intro-to-vuejs/ https://github.com/thewhitetulip/intro-to-vuejs/
- progx 10y agoIt depends on what you want todo and how complex it is. Should it run only in a Browser or Mobile (native) too? You will find 10 People that tell you use X, 10 use Y, 10 use Z, any suggestion is right and any would be wrong. Look at the frameworks and features and decide which one come close to your prefered development style. It is not easy and it took time. In the last 24 month i tried many: backbone, ember, aurelia, react, react redux and currently vue and many of which i forget the name ;-). All have there pros and cons. If you always look for a newer thing, then you will never find one. To myself: Lesson learned ;-)
- tuyguntn 10y agoDevelopers are creating lots of UI libraries but after sometime they lose traction and support for this library abandoned, bug fixes/improvements will be halted. If so, why create so many libraries instead of writing yet another theme for bootstrap. Best example is material ui kits, they are a lot, but only 2 or 3 of them are still continuing development
- Etheryte 10y agoWhile I agree with the sentiment in general, I don't think Bootstrap is a great solution either. It's very easy for a project to outgrow Bootstrap at which point it becomes a burden instead of an asset.
- jdhendrickson 10y agoCould you expound on what you mean? How is it easy to outgrow Bootstrap?
- thirdsun 10y agoI'm not OP and I made the experience with Zurb's Foundation but the problem isn't specific to the framework. In my opinion you'll run into issues with these kitchen sink frameworks once you try to do something custom - customizing elements and components feels like fighting the framework at a certain point and once you realize that it's hard to get out. I don't recommend using Bootstrap or any other framework unless you're very certain about future requirements. Here's a nice talk on the topic: https://www.youtube.com/watch?v=Mea2jIXQEFk https://www.youtube.com/watch?v=Mea2jIXQEFk
- tracker1 10y agoI find that using the SCSS/Less source for bootstrap is less fighting... the layout/structure is pretty easy to use internally, for the most part, everything I need for creating additional controls starts from variables and utilities.
- Jonovono 10y ago"Just for Product Designer" ? Some weird copy going on.
- RivieraKid 10y agoAuthor is Chinese apparently.
- Etheryte 10y agoVue.js has a large traction in China since the creator speaks Chinese and all the docs are available in it as well.
- skocznymroczny 10y agoI like that this one has a tree component, it seems like most widget sets (SemanticJS and Bootstrap and everything Material included) forget about the tree.
- imafish 10y agoActually, I have seen multiple libraries aimed for desktop UI that implement trees. Seems that trees somehow were lost in the transition to web applications.
- k__ 10y agoWhen I found this, I thought it was for WebComponent based and for all frameworks.
- joshsyn 10y agoThat ass http://element.eleme.io/static/banner-bg.75437e1.svg http://element.eleme.io/static/banner-bg.75437e1.svg
- jdhendrickson 10y agoThis adds nothing to the discussion and is frankly in poor taste.
- account0099099 10y agoActually It adds a lot to the discussion; It shows their views on women, which I guess are "things" with big asses and boobs; maybe in the next version they can have the male developer spraying her down with a hose, while she chugs some beer.
- joshsyn 10y agoHoly crap. I am dying rofl.
- account0099099 10y agoBut I will agree, their front page is in very poor taste, and that is the first thing I noticed when I loaded the page.
- sctb 10y agoThis account has posted mostly unsubstantive comments. Please stop and re-read the guidelines: https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- GordonS 10y agoI get a 404 when opening any of the linked pages in a new tab, since the URLS are missing a '#'.
- uranusjr 10y agoDon't want this to sound like bashing, but the website doesn't work very well on mobile (hover and active states act weirdly, menu very clumbersome, etc.), and I assume the same can be said about the toolkit. Hopefully this is an area the author(s) plan to work on. UPDATE: Just realised this is developed by a Chinese food delivery service ele.me (饿了么). I visited their website and found its developers made it completely without RWD in mind. This explains things…
- progx 10y agoPrimary it is an UI for Desktops not for Smartphones. Most UIs are Desktop or Mobil based, a UI which fits all is hard to find and sometimes not really good.
- deallocator 10y agounfortunately it's not, they even actively refuse PR that attempt to make components responsive
- uranusjr 10y agoUnfortunate indeed. I get that making things work well on both desktop on mobile is difficult (if not impossible), but at least the UI should be somehow usable. The nav works so poorly on my phone I can’t even browse all the pages on the site. Guess I’ll continue my search for a good UI toolkit for my Vue projects somewhere else. :(
- ChristianBundy 10y agoLink: https://github.com/ElemeFE/element/pull/1562#issuecomment-265042359 https://github.com/ElemeFE/element/pull/1562#issuecomment-26... > Thanks for contributing, but Element is not for mobile web apps, so the changes here may seem a little weird. Maybe you can just override its CSS in your own project.
- kyriakos 10y agoIt says its a "Desktop UI Library" so I guess they don't care much about mobile support.
- progx 10y agoUsed it since some weeks. Good documentation and examples, don't be afraid of many chinese chars in the doc or on github issue, they try to write everything in english too. Always got quick response when i had issues. Great advantage, which is not so exposed, is, that the form system has a good (i think well known) validation system integrated. Developers did not need to build own hacky solutions or search other libraries that work mostly not good with an external UI.
- deleted 10y ago[deleted]
- pdxandi 10y agoI've been using this library for the last few weeks in two different Vue.js projects and it's awesome. The English documentation is still being written, but the components are really well thought out and complete. These folks made a beautiful, solid UI library.
- LeoNatan25 10y agoWhat does "eleme.io" even mean? How sad of state are we that everyone feels compelled to use these nonsense "io", "me", "to", etc. domains just because they are "hip".
- overcast 10y agoIt means the domain squatters own just about every single word of every TLD at this point.
- weka 10y agoI can attest to this fact. Many domain squatters sit on four, five and even six letter premium .com/.org./.net domains waiting for their payday that never comes because no one will ever pay that much money when the alternative is to use another domain name. And of the people that CAN pay that money, what happens is they send a notice of their newly-established IP being used in a domain and they get it with the help of the registrar. It's ridiculous to expect a person pay $1000+ for a domain when they go 'oh, we'll just use another domain name!' People are dumb. edit: spelling
- deleted 10y ago[deleted]
- 1and2equals0 10y agoTerrible domain name, no doubt. However, I like that these alternative TLD's are becoming somewhat acceptable now. Finding an unused .com domain for a new business can be really hard(/expensive). For example, I would much rather buy dropbox.io than getdropbox.com. Or maybe even drop.box?
- deleted 10y ago[deleted]
- madenine 10y agothe company that develops it is called "Ele.me"[0] [0]https://www.crunchbase.com/organization/ele-me https://www.crunchbase.com/organization/ele-me
- shaydoc 10y agoVue is really nice to develop in. I have led the push to adopt Vue in our company now. It is very well put together and along with WebPack is really improving our entire setup. It definitely provides the kind of standards we need to grow our team around.
- shaydoc 10y agoAlso this is a very well put together component library. I will definitely be investigating it more.
- GordonS 10y agoI love how comprehensive the set of components is - trees, tables with lots of options, sliders, date and time pickers with range support, carousels... I was going to give Vue.js a try for my next project anyway, so I'll be giving serious consideration to using this instead of my default choice (Bootstrap).
- GordonS 10y agoAh, I hadn't noticed that it's touted for desktop apps... and isn't responsive. Might give it a miss then..
- prezjordan 10y agoSadly this library seems pretty poor for accessibility :(
- netforay 10y agoI have actually tried to use this to build an enterprise application. Here is what we found. * Most of the components they provide are very basic and does not actually require them to provide it. Couple of lines of wrapper on any CSS framework like bootstrap can make half of those components. * Most of the advanced components like DataGrid, DropDown Menus, etc are aither not available or buggy. You will get better support from thirdparty Vue components. * There are lot of silly components like footer and header etc. There is no need for defining them except to show that it is complete UI framework. Trying to be 'Complete UI Framework' is bad choice for any UI on Web. HTML is too flexible and requirements are too diverse that no one UI library can provide everything. We finally replaced all Element Components with standard bootstrap code. Every thing works perfectly. And we get the benefit of 1000s people testing bootstrap.
- progx 10y agoDid you use any library for example form validation, or did you do that on you own?
- netforay 10y agoWe implemented our own. We don't need more than 10 different type of fields. So basically it will take couple of hours to create those base components to our requirements. The main lession I learned in JS world is, when the requirement is small, better write it from scratch using code we find on net. Trying to integrate different incompatible libraries will just waste our time.
- novaleaf 10y agonot vue, but I use ReactStrap + Bootstrap4 for that, and it works good. Bootstrap 4 has some small rendering artifacts (like datetime inputs in inputGroups) but they are pretty fast about fixing them. (Though my input group example, the fix will be in the next release, beta1)
- Frizi 10y agoYou should check out Vuelidate. It tries to avoid any extra fluff. Disclaimer: I'm one of the authors
- WhitneyLand 10y agoDesktop only framework seems like a bad idea. - How can you be sure you won't be asked for a mobile or responsive version down the road? People change requirements all the time. - If you want to ever work on other type of projects you now have to learn two when one may have sufficed - Community size is a huge factor for contributions and momentum, and desktop only limits your community size For this framework it would be more useful if they offered a single component for a data grid. That's more work than the rest of the framework combined.
- patleeman 10y agoFor anyone looking for a lightweight responsive library, Bulma http://bulma.io/ http://bulma.io/ is a great option. It pairs with Vue quite well since it's a CSS only library. Note: I'm not affiliated with them, just using them on my latest project.
- faitswulff 10y agoI agree. I've been using it for my personal project and it has been easy to grok and looks great.
- naiv 10y agoIt's looking good, one thing that bothered me as it's css only is that form elements like checkboxes and radio buttons need to be styled separately (https://github.com/jgthms/bulma/issues/44 https://github.com/jgthms/bulma/issues/44)
- tracker1 10y agoIf more component libraries went with the following structure... <label> <input type="radio" /> <span>Label Text</span> </label> It's easy enough to target the input/span as children of label for custom styling, without having to use JS or some weird wrangling of classes and structure.
- johnmerced 10y agoI just created a project using VueJS and Bulma and everything went really smooth. *I switched from Bootstrap 4.
- scriptkiddy 10y agoI've been using Bulma on my side project. Really nice looking and super easy to use. I like how it doesn't try to do too much.
- azurelogic 10y agoI tried using Element on my current project and, like other commenters, found it to lack enough responsive utilities to make it useful. Then I stumbled upon Quasar (http://quasar-framework.org/ http://quasar-framework.org/). It's responsive, supports Cordova and Electron, and it looks good. I rarely switch frameworks mid-project, but this was well worth the effort.
- rpbertp13 10y agoElement seems heavily inspired by Ant Design for React [1], which came out of Ant Financial/Alibaba. It's a project by Ele.me, a Chinese food delivery company. Alibaba and Ant Financial invested $1.25B in it last year [2]. [1]https://ant.design/docs/react/introduce https://ant.design/docs/react/introduce [2]http://www.wsj.com/articles/alibaba-ant-financial-to-jointly-invest-1-25-billion-in-ele-me-1460545990 http://www.wsj.com/articles/alibaba-ant-financial-to-jointly...
- viach 10y agoHow is it comparing with taking, say, Semantic-UI, and use it with Vue?
- kevindqc 10y agoThe links at the top (Guide, Component, Resource) fail when trying to right-click -> open in a new window :(
- z3t4 10y agoIn a project I work on right now I use no XML/HTML. I love HTML and it's great for static web pages/documents and for "old school" server side rendering. But for a SPA with real time and dynamic updates, it's the wrong tool. It's much faster appending the elements to the DOM. Lexical scope and closures plus being able to call functions that returns elements in JavaScript makes it fun.
- ryanmarsh 10y agoIf I click the link to a new UI lib from my phone and the demo is janky as fuck I'm not going to pull it into my project. Maybe I'm just being an asshole.
- usaphp 10y agoSince I started using rem for font sizes I just can't go back to px, I find rem so much better for responsive websites and would recommend it to anyone who did not try it yet.
- Kiro 10y agoWhat's the benefit? I don't like having to calculate how big things will be (by converting base font + rem to px) while with px I know immediately.
- usaphp 10y agoYou don't have to calculate anything, 1 rem is 16px by default, but you can set html font size to 62.5% and it will be 10px, so if you need something to be 20px (if you are used to px sizes) - you can just set it to 2rem and it will render as 20px. It's not a matter of calculation but just a matter of getting used to how big is 1 rem. The biggest benefit is that you can target specific screen sizes with different html font-size values using @media queries, so for example for bigger displays you can set html font-size to 120% and it will result in automatic increase of size of all the elements where font-size or paddings etc are set with rem. Same goes for mobile devices, for examples all the headers will go from being 40px font-size to say 25px, just by changing an html tag font-size value, you don't have to target any elements individually, it will be automatic. For me it was one of the best discoveries to increase productivity, when building responsive designs.
- Kiro 10y agoCool, thanks! I will try it out for my next project.
- naiv 10y agoBesides the already mentioned UIs I am also watching https://vuetifyjs.com https://vuetifyjs.com , looks promising.
- sergiotapia 10y agoI thought this would be like a tool to build a styleguide for your application. Not an actual framework like Twitter Bootstrap. :(
- dsarch 10y agoHello! Sorry for bringing this issue here and I'm sure many may not understand my point... but, after reading some posts about objectification of women (like this one: http://www.heroicgirls.com/de-objectify-women-comics-guide http://www.heroicgirls.com/de-objectify-women-comics-guide), could the woman in the homepage picture be drawn differently? I'm sure it was not intentional and it may be seem as a small issue for some people, but I know women who do not like to be represented that way. Thanks for understanding =) Btw, I really like the page design! It is great =)
- capkutay 10y agoAny other PMs on here that can vouch for this as a solid prototyping tool? My current prototyping options are either too time-consuming or too restricting...
- threefour 10y agoIf you have to use a command line to install it, it's not for designers and PMs.