I see a few comments bringing up mobile. There's already many mobile-friendly UI frameworks; not everything has to be mobile-first. Yes, in many cases it makes sense to go for a mobile-first approach, especially with consumer-facing applications. Mobile is huge and apparently it's still continuing to grow.
At the same time, there's many legitimate cases in which you want to optimize for desktop. For example: consider an IDE, where you have lots of panels and toolbars. In some cases it's unclear how you'd be able to support both desktop and mobile without significantly degrading the experience. Even Google struggles with this. How usable is Data Studio [0] on mobile? It's pretty terrible and unusable. But that's perfectly fine, because the desktop experience is great! I can't speak for others, but I can't imagine myself wanting to use a mobile device to get any work done.
Kudos to Palantir for open sourcing their UI toolkit.
For internal projects/webpages (similar to Google Data Studio as mentioned), where you would expect the user to only be using it on a desktop, having no mobile support is fine.
But for external projects/webpages in 2016, where atleast 1/3 of usage can come from mobile devices, having a lack of mobile support is a complete, 100% nonstarter. And there are plenty of competing React UI frameworks with mobile support already.
However, what I really want for React is a style-agnostic component library that basically extends the regular set of HTML elements, but comes with no "visual" styling (other than really basic styling like the browser's default styling for <input>, <select> and the like). Only styling that is necessary for the component to function should be included.
Of course, optional themes would be fine. Also, non-visual styling should be completely inlined. Themes could inject "visual" styling via context. User-defined styling would be passed via class or style props.
Inline styles feel wrong, CSS alone isn't encapsulated enough to work with components correctly, CSS modules are TOO encapsulated which makes global styles and themes a royal pain, and adding another layer ala SASS or LESS feels like more of a "patch" vs a real solution.
And none of them really solve style inheritance in any way that I'd call elegant.
I end up using SASS and overriding default styles with weird hacks like using `.button.button.button` or (even worse) using `!important`, but it still feels wrong and doesn't scale very well at all.
I tried to do something like that with react-menu-list[0]. Its components come with minimal styling, and it's recommend for users to create wrapper components which pass some default props to add their own application's CSS classnames / styling.
Well, you could use something like Reactstrap (https://reactstrap.github.io) which assumes Bootstrap classes, and simply not include the BS4 visual styles/themes
Thanks very much @Plantir for open sourcing React UI toolkit. This already seems to be production ready. Big thanks for the detailed documentation. The amount of time you have spent in creating examples and providing excellent starting point is really great.
I really enjoyed and excited to see your take on Color Theme. Like bootstrap, I don't think sites created using Blueprint will look same. With minimal changes in variables,layout and using your wide ranging color theme wonderful results can be achieved in no time.
Big Thumbs up!!
I have created a small overview videos about various UI component available. (No installation or tutorials, only shown their various artifacts).
Hi all, I work at Palantir and worked on Blueprint (although I'm currently working on a different project). Happy to answer any questions you have about it.
Just a note - we didn't intend to heavily publicize the project quite yet. For example, the docs site is still a WIP, so apologies if it causes issues for you on mobile devices.
Just a nitpick, but when looking at the docs, I can't move with Page Up/Page Down unless I click in the "content column/area", kind of annoying when one navigates using the left bar and then can't move around (on no-mouse setups, e.g. trackpoint + keyboard). So you might want to look at that.
Otherwise no issues (older laptop i5/chrome), so I guess you guys mostly fixed that by now.
I really like blueprint! Although I think it's a bit ambiguous in the documentation that there are some elements under 'components' which are not react componentsp per se. You are referring to this as they have a 'CSS API' (like navbar). It' not a big deal but if you are doing a react app it's good to have an overview of the actual building blocks.
Maybe they should be under another section?
Hi! I'm not a web developer, I work on server side, native mobile and desktop, but I'm very impressed with your framework and want to give it a try for creating UIs. What I really don't like about web development is it's overcomplicated approach to laying out the elements. Do you have any kind of layout helpers in your framework?
This might be a little bit outside Blueprint, but, I cannot not take the opportunity to ask - how is the reactions internally at Palantir now when the chairman and co-founder now also is part of the Trump transition team?
This is impressive, I can cover lot's of UI scenarios with it. I also like the first class CSS/HTML API that they have, so I could use them without React. And they seem to have Accessibility covered (need to dive in a bit more), but this is super important. And at last, I dig the visual style, which has good affordances. A nice contrast to Material Design.
This looks great. Nice to see a complete UI toolkit with context menus, sortable tables, hotkeys and editable text along with all the normal tooltips, navs, and UI widgets. Bonus points for both sass and less support. Looking forward to trying this out.
Despite the sluggishness, there's a lot of really likeable stuff in here and it is beautiful (or, a lot more beautiful than I, or most developers, could ever come up with without a team and some pro designers on staff).
Maybe just me but I'm having a hard time seeing how this is substantially different from or better than bootstrap or foundation with some react-based wrappers like reactstrap. Seems like performance is an issue and you're just as tightly coupled to the framework as with bootstrap/foundation. Am I missing something?
I am the developer of HiveMind (crudzilla.com), I am currently stuck on what I think would be the final feature of the platform that would fulfill my vision of what a modern web application platform should be about.
That feature is a drag-n-drop UI construction mechanism that would basically allow the user to glue together UI components (I call them UI parts) and write code only as a fill-in-the-blank task to complete the application.
I think React, Angular and similar paradigms might eventually make this possible. In the future building web applications, especially typical business crud applications with simple workflows wrap around a UI should not require more than familiarity with a development product and basic programming.
Not to sound like a bummer here, but I'm not sure what kind of computer is needed to open this webpage. Simply scrolling up and down that website causes my computer to almost freeze. Firefox 49.0 user here. I would profile it, but I'm afraid of having to restart the computer as a result.
Edit: It looks amazing. (Still the performance issue is reproducible easily)
And the doc has 4.2MB of minified javascript. Jesus christ.
Tooks 9 seconds to load the page.
All credibility gone. Why would I use components made by people who don't see performance problems?
There's an interactive animation in the header that really makes the page lag a lot when scrolling, spiking the GPU (look at the devtools, also scrolling is being tracked somehow)
This is a common problem with landing pages that promote things. Developers should pay more attention to optimizing the main page that promotes the libraries in question, as it can turn down potential customers ;)
I was looking at the other pages from this UI framework (docs), and they're not as near as heavy as the main page, so why not pay more attention and make the landing page lighter.
Other than that the components look very refined and worth taking a look.
Hi folks, I'm one of the developers of this project -- we hear your perf concerns loud and clear and are tracking the issues :)
As mentioned elsewhere in this thread, this page was released a little too early while we were still playing around with animations in the header. I've gone ahead and disabled them for now, so you should see leaner CPU utilization now. Thanks for your comments.
I used to think that games ate the forefront at the GUI, and mainstream will emulate their approaches.
I didn't think that the same is going to the machine performance requirements, though. I still hope the web,will remain usable without maxing out a dual GPU setup.
[+] [-] TheAceOfHearts|9 years ago|reply
At the same time, there's many legitimate cases in which you want to optimize for desktop. For example: consider an IDE, where you have lots of panels and toolbars. In some cases it's unclear how you'd be able to support both desktop and mobile without significantly degrading the experience. Even Google struggles with this. How usable is Data Studio [0] on mobile? It's pretty terrible and unusable. But that's perfectly fine, because the desktop experience is great! I can't speak for others, but I can't imagine myself wanting to use a mobile device to get any work done.
Kudos to Palantir for open sourcing their UI toolkit.
[0] https://datastudio.google.com
[+] [-] minimaxir|9 years ago|reply
But for external projects/webpages in 2016, where atleast 1/3 of usage can come from mobile devices, having a lack of mobile support is a complete, 100% nonstarter. And there are plenty of competing React UI frameworks with mobile support already.
[+] [-] renke1|9 years ago|reply
However, what I really want for React is a style-agnostic component library that basically extends the regular set of HTML elements, but comes with no "visual" styling (other than really basic styling like the browser's default styling for <input>, <select> and the like). Only styling that is necessary for the component to function should be included.
Of course, optional themes would be fine. Also, non-visual styling should be completely inlined. Themes could inject "visual" styling via context. User-defined styling would be passed via class or style props.
[+] [-] Klathmon|9 years ago|reply
Inline styles feel wrong, CSS alone isn't encapsulated enough to work with components correctly, CSS modules are TOO encapsulated which makes global styles and themes a royal pain, and adding another layer ala SASS or LESS feels like more of a "patch" vs a real solution.
And none of them really solve style inheritance in any way that I'd call elegant.
I end up using SASS and overriding default styles with weird hacks like using `.button.button.button` or (even worse) using `!important`, but it still feels wrong and doesn't scale very well at all.
[+] [-] AgentME|9 years ago|reply
[0] https://github.com/StreakYC/react-menu-list
[+] [-] gedy|9 years ago|reply
[+] [-] butu5|9 years ago|reply
I really enjoyed and excited to see your take on Color Theme. Like bootstrap, I don't think sites created using Blueprint will look same. With minimal changes in variables,layout and using your wide ranging color theme wonderful results can be achieved in no time.
Big Thumbs up!!
I have created a small overview videos about various UI component available. (No installation or tutorials, only shown their various artifacts).
https://www.youtube.com/watch?v=ky7ec5Sh2kM
[+] [-] jasonkillian|9 years ago|reply
Just a note - we didn't intend to heavily publicize the project quite yet. For example, the docs site is still a WIP, so apologies if it causes issues for you on mobile devices.
[+] [-] literallycancer|9 years ago|reply
Otherwise no issues (older laptop i5/chrome), so I guess you guys mostly fixed that by now.
[+] [-] patzal|9 years ago|reply
I really like blueprint! Although I think it's a bit ambiguous in the documentation that there are some elements under 'components' which are not react componentsp per se. You are referring to this as they have a 'CSS API' (like navbar). It' not a big deal but if you are doing a react app it's good to have an overview of the actual building blocks. Maybe they should be under another section?
[+] [-] achikin|9 years ago|reply
[+] [-] stpe|9 years ago|reply
[+] [-] dictum|9 years ago|reply
[+] [-] rq1|9 years ago|reply
[+] [-] mstijak|9 years ago|reply
[+] [-] crudbug|9 years ago|reply
[0] http://cx.codaxy.com
[+] [-] config_yml|9 years ago|reply
[+] [-] gburt|9 years ago|reply
[+] [-] revelation|9 years ago|reply
[+] [-] k__|9 years ago|reply
[+] [-] sehr|9 years ago|reply
[+] [-] simple10|9 years ago|reply
[+] [-] vesak|9 years ago|reply
[+] [-] SwellJoe|9 years ago|reply
I particularly enjoyed the piano example: http://blueprintjs.com/docs/#components.hotkeys
[+] [-] codycraven|9 years ago|reply
[+] [-] karmajunkie|9 years ago|reply
[+] [-] GordonS|9 years ago|reply
[+] [-] olalonde|9 years ago|reply
[+] [-] Edmond|9 years ago|reply
That feature is a drag-n-drop UI construction mechanism that would basically allow the user to glue together UI components (I call them UI parts) and write code only as a fill-in-the-blank task to complete the application.
I think React, Angular and similar paradigms might eventually make this possible. In the future building web applications, especially typical business crud applications with simple workflows wrap around a UI should not require more than familiarity with a development product and basic programming.
[+] [-] foo303|9 years ago|reply
Edit: It looks amazing. (Still the performance issue is reproducible easily)
[+] [-] boubiyeah|9 years ago|reply
[+] [-] pacomerh|9 years ago|reply
This is a common problem with landing pages that promote things. Developers should pay more attention to optimizing the main page that promotes the libraries in question, as it can turn down potential customers ;)
I was looking at the other pages from this UI framework (docs), and they're not as near as heavy as the main page, so why not pay more attention and make the landing page lighter.
Other than that the components look very refined and worth taking a look.
[+] [-] adidahiya|9 years ago|reply
As mentioned elsewhere in this thread, this page was released a little too early while we were still playing around with animations in the header. I've gone ahead and disabled them for now, so you should see leaner CPU utilization now. Thanks for your comments.
[+] [-] sotojuan|9 years ago|reply
[+] [-] mintplant|9 years ago|reply
[+] [-] jasonkillian|9 years ago|reply
[+] [-] rubyfan|9 years ago|reply
[+] [-] vvanders|9 years ago|reply
[+] [-] nine_k|9 years ago|reply
I didn't think that the same is going to the machine performance requirements, though. I still hope the web,will remain usable without maxing out a dual GPU setup.
[+] [-] impostervt|9 years ago|reply
[+] [-] mrkrwtsn|9 years ago|reply
[+] [-] nthnclrk|9 years ago|reply
Performance is 100% acceptable and fluid on an iPhone 7 in Safari.
[+] [-] ggregoire|9 years ago|reply
[+] [-] tkubacki|9 years ago|reply
[+] [-] mattnewton|9 years ago|reply
[+] [-] drieddust|9 years ago|reply
[+] [-] crashedsnow|9 years ago|reply