8 ms·

Show HN: Front-end framework optimized for internal apps

438 points by khet 12y ago

jchendy 12y ago
Is there any compelling reason to try this if I'm already comfortable with using Bootstrap for internal apps?
- schrijver 12y ago
  I guess it’d be good if the website mentions a bit more what are the differences with and advantages over Bootstrap. I’ve never used Bootstrap for public facing app because I find its look too bland, but I love it for internal apps. IMHO it doesn’t exaggerate at all on the level of ‘glitz’ (one of the arguments of the OP against contemporary frameworks).
krat0sprakhar 12y ago
This is a pleasant change. My goto framework for internal apps is Bootstrap (no surprise there) although I actually end up using only a handful of elements. Flakes looks like a good enough collection of elements to cover 95% of my use cases. Definitely going to use this in my next app. Thanks for sharing!
- sensecall 12y ago
  If you use Bootstrap Sass, you could look into only including the components that you actually use – can help reduce Bootstrap bloat big time.
  - raziel2p 12y ago
    Why single out the SASS version? If you compile LESS files you have the same option. I also think Bootstrap has a form on its website which compiles the CSS with the components you want, without having to install/run a preprocessor.
    - tracker1 12y ago
      I've always used the Less version myself as a base for customization... lately, I'll npm it in as a requirement... copy out the bootstrap.less and variables.less into my project, update the references and work from there. It's relatively straight forward to do so... from there, I can comment out the parts I don't use. variables.less is mainly copied as a reference point... In my app.less, I include the bootstrap variables, then my own variables, then the rest of bootstrap, then my application less files. At this point sass doesn't really offer much over less (other than a slightly stronger presence in the design community). I'm using node mostly, which fits in better for me, and makes less a better/tighter fit. For better or worse, being able to bring in less, react and the like combined with SPDY/HTTP2 will bring some interesting development as things progress. Right now transpiling ES6/7 stuff to ES5 is probably the biggest bottleneck in terms of serving applications closer to as-is.
ckluis 12y ago
Nicely done, but if you are really trying to be a framework for internal apps (vs a design framework like bootstrap) - I would focus on adding a couple of more admin-like components (such as grids vs tables with the options associated with grids). An opinionated admin framework would be a huge win. For what its worth - semantic-ui.com has a couple of neat compenents that are also worth having (cards, steps/wizards). Watching this project now!
rrrx3 12y ago
I'd like to understand more about the rationale that led you down the path of creating this. In my years in enterprise, user and market research has driven the push to create UIs that are more compelling, that make users feel more at home and comfortable (as they would be with mobile and consumer products), while maintaining a more narrow focus on tasks instead of providing a generic one-size fits all paradigm. This framework stands in contrast to that, making things dull and boring. What caused you to go down this path?
- mhd 12y ago
  I'd like to work in that progressive sector of the enterprise, mine is still full of Swing, extjs and even Tk.
  - tracker1 12y ago
    extjs isn't so bad.. My only complaints would be all the themes look a bit dated (and squashed on a large display), and I don't like OO paradigms in JS so much and ext is really heavy OO.
    - rrrx3 12y ago
      personal opinion - extjs is non-performant trash.
    - mhd 12y ago
      I'm generally putting extjs in the swing/MFC/Qt corner, no the angular/dojo/react/etc one, and yes, compared to that in a client/server setup it's not that bad -- at least it suggest a more sane communication setup and is only godawful when it comes to deploying, not outright hostile. But quite often, some corporations would've fared better keeping their old mainframe terminal apps. With mobile apps, both setups don't really fare too well, although with the recent influx of Windows tablets and styluses, I fear that we could be regressing to shoddy Visual Basic-ish apps with homegrown comm/sync protocols again.
  - rrrx3 12y ago
    as much as i'd like to say the opposite, it's not nearly as progressive as it should be. There are tons and tons of places who are actively regressing.
jackweirdy 12y ago
I really like this which was linked from there: http://kumailht.com/gridforms/ http://kumailht.com/gridforms/
josekpaul 12y ago
I really like gridforms for dense data-entry forms (http://kumailht.com/gridforms/ http://kumailht.com/gridforms/).
- tracker1 12y ago
  Agreed, was coming in here to comment on as much. I don't think anything on the demos really stood out quite as much as the grid forms does. It's closer to what people who might be replacing a paper form would probably like. Whenever I'm designing a system that is replacing paper, though it's been a long while. I find it best to start with as close to the paper version as practical. There's a lot to be said for making something that is familiar.
- wldlyinaccurate 12y ago
  Kumail Hunaid, who made Grid Forms, is also the creator of Flakes.
- jahewson 12y ago
  I don't like them at all. Yes, they look pretty, but it's an emulation of the worst aspects of paper forms. The grid-style form is my least-favourite paper form and I frequently find it confusing and difficult to fill out such forms correctly. Perhaps this is because the linear flow of the form is awkwardly two-dimensional, or perhaps because for anything beyond a trivial example, the layout becomes unnatural as the size of the fields don't usually lend themselves to a logical and human-friendly structured layout. Perhaps it's because the grid style form ignores the importance of whitespace in clear and understandable design. Here's a good test: hold the form upside down and see if you can still tell it's structure at a glance, or hold it at the other side of the room and try the same thing.
  - hyperbovine 12y ago
    Be that as it may, this is exactly the type of form I routinely see people filling out on 80s-era WYSE terminals at airports, rental car agencies, the DMV, hardware stores, and so on. It seems like a lot non-tech people find them fairly easy to get the hang of.
zkhalique 12y ago
"It goes away with custom fonts" should be "It does away..." Other than that, pretty cool! There may be a space for this... Reminds me a bit of http://platform.qbix.com http://platform.qbix.com which we built to power social apps (on all devices). One tip: if you're going to make it for business, have the demo document the keyboard shortcuts to get around quickly, like in gmail. Ideally your "front end framework" could have a controller that would accept a keymap object like {"a": "actionName", "r": "someOtherAction"} etc.
- khet 12y ago
  Good catch, should be fixed now.
ivan_ah 12y ago
What about OpenUI5 for business apps: https://openui5.hana.ondemand.com/#content/Controls/index.html https://openui5.hana.ondemand.com/#content/Controls/index.ht... From my initial tests, it's very clean MVC (a bit verbose). Also the deploy story is not too good... (frontend code ships as a .war). Does anyone have experience with this, good or bad?
- tracker1 12y ago
  It's relatively clean, but a bit more klunky feeling. It also seems REALLY sluggish... Not sure if this is typical, but it really doesn't feel nice. I'm also not a huge fan of enterprisey software development.. SAP and most Java projects make me pull my hair out just getting an environment for development setup.
  - ivan_ah 12y ago
    Yeah the other day was my first day with Java and Eclipse and I was close to pulling my hair out (coming from python and vim). Ultimately it's just a different set of batteries but the depth/weight of the stack seems insane---the expression 'house of cards' comes to mind... Still OpenUI5 is just js files in the end, so hopefully entreprisey people can't mess it up too bad ;)
- infinite_snoop 12y ago
  I'm doing a lot of SAP/OpenUI5 development at the moment and performance seems good. I believe the .war is only needed as a one off if you need to deploy the UI5 libs to a Java server? I'm deploying to SAP systems which already host the libraries so I haven't had that issue. One click deploying from Eclipse is built into the UI5 plugin. UI5 obviously has the weight of SAP behind it (be that for good or bad!) and new releases seem pretty frequent. For developing web apps to consume SAP data at least it seems the obvious choice (it's very much geared towards consuming oData which SAP Gateway provides).
toddsiegel 12y ago
This is really cool and a nice start. One big thing we are dealing with in our internal app are responsive tables. We display some data in tables, but it almost always looks like crap on a small screen. There are a few different ways to solve this. Sometimes it makes sense to hide or abbreviate columns other times the table should neatly convert to a list. This is tougher. I also like your search & filters design. I did something like this just last week, but I like yours better. ;-) In some places you use semantic class names, like for messages, but for buttons you use colors. Probably better to just stick with a single convention for consistency.
- mhd 12y ago
  I think this is one area where we're going to see some changes even in the enterprise sector. Your average data-grids are pretty familiar to those used to working with spreadsheets, but pretty much everyone is used to rich list views, who also have the benefit of being a bit more responsive (not as good for editing data, though. Although with those gridforms, I do wonder...) Granted, one screen isn't as heavy with data, but if you're trying to survey that much at once, you'd probably benefit from richer tooling anyways. I'd almost bet that a design that degrades gracefull from data grids to list views will have users resizing their browsers or picking portrait mode to get out of that.
- raziel2p 12y ago
  I think colours for names of buttons are OK. I hate having to jump between CSS frameworks and trying to remember what the correct class is - danger? Warning? Error? I know what I want is red, and any time I want to change the class of a button or message/alert your core intent is to change the colour - so you might as well skip that abstraction IMO.
pearjuice 12y ago
Can't wait to get a good taste of this flavor of the month.
jordache 12y ago
Great start! One thing that I noticed immediately was the UX associated with the hamburger menu. When the page content gets sufficiently long, you have the potential of scrolling beyond the hamburger menu. To jump to another page, you have to scroll to the top. Potential solutions could be making the hamburger menu fixed to the upper-left corner, or provide UI widget to return to top of page.
timme 12y ago
Bootstrap started out as framework for internal apps.
JelteF 12y ago
I think it's strange that they use Morris.js[1] for their graphs on the main pages, but don't mention it anywhere. [1]https://morrisjs.github.io/morris.js/ https://morrisjs.github.io/morris.js/
- ricardobeat 12y ago
  The graphs don't appear to be part of the framework, just example content.
rikkus 12y ago
Went to this page: http://getflakes.com/preview/browsing-data.html http://getflakes.com/preview/browsing-data.html The 'Next' button on the grid seems to be broken. No javascript error in console. Current stable Chrome, Windows.
- buckbova 12y ago
  I suspect it's not meant to be completely functional.
  - khalilravanna 12y ago
    Yep. Looks like the only thing with any functionality attached is the search. Which is funny because with the search at the top of the page I could see how it would lead one to believe that the rest of the buttons might have functionality attached to them as well.
kbart 12y ago
I'd called that "lean and clean" instead of "boring". And I wish that more user facing apps would look like that, not just internal ones. Maybe it's just me, but all these flashy things, unnecessary effects, animations only clutters the screen and makes app harder and annoying to use. Functionality and ergonomics is all that usually matters. Well done, I'll give it a try.
doque 12y ago
The 'select all' checkbox on http://getflakes.com/preview/tables.html http://getflakes.com/preview/tables.html has no effect my Chrome.
- philodespotos 12y ago
  Nor in any other browser; AFAICT there's nothing actually bound to that. It's just to demonstrate styling.
snlacks 12y ago
I wish more things looked like this at work. There's apps that look like native apps, there's bootstrap apps, there's all the custom CSS floating around, there's whatever's new, there's the stock CSS sheet that comes with the plugins... Keeping to principles like this at work or for work environments would make it so much easier to have unity. I'm not saying everything should look like this, but that not everything needs to stand out for the sake of standing out. Using the same app every day undoes the need for over the top "visual cues" and complex overlays and material concepts. We need fast, interchangeable stuff, that works with large amounts of data/fields/etc when the content doesn't fit looking like apple.com. :) I wish you guys luck, and I'll give it a shot the first chance I get.
- kylestlb 12y ago
  I work at a very large company and it's the same way. We have a team dedicated to keeping internal apps within certain stylistic and functional guidelines but the overall landscape is still an absolute clusterfuck. Some apps are built with bootstrap, some with pure, some with no styling whatsoever, different hexes for our company's primary color... you name it. Fragmented as all hell.
  - snlacks 12y ago
    It's amazing in an "Agile" world, we still feel like we need to "configure" basic design concepts. For internal apps: Structure could be one theme on one CSS framework. So much time is wasted on "design" (picking colors, lining things up) by people who don't know anything about design.
alanning 12y ago
Very nice work. Given the prevalence of Bootstrap and Foundation, it would probably help adoption if there were options with those as the base styling lib. I know there is a lot of work in the custom sass here and this is currently a one-man project. May be a good candidate for a "Roadmap" and "How you can help" section in the repo's Readme.
aaronlumsden 12y ago
Am I missing something here? I don't get what's so special about this as opposed to all the other web app frameworks?
- infinitone 12y ago
  It makes sense if you've ever had to work on internal facing apps, like an admin panel. You wouldn't want the overhead and clutter of something like bootstrap which'd be overkill (albeit you can customize it to be minimal).
Ronsenshi 12y ago
I quite like it. Simple, bare, no excessive styling as opposed to current trend. Buttons kind of look out of place, though.
teknologist 12y ago
I feel internal business applications can be visually appealing too. People have to look at these things all day, so why are we so quick to assert that these people are practically robots who can't appreciate comfortable interfaces when we design and build boring apps? Life can look good all over. Don't succumb to this "business is serious and should therefore be dull and boring" stuff.
- xanderstrike 12y ago
  I think they're going for a different kind of boring than what you're implying. It doesn't have fancy animations and flashy colors like Bootstrap and Foundation. It's simple, clean, fast and straight to the point, which is something valuable in an internal tool.
  - akx 12y ago
    Bootstrap doesn't have animations, not that I know of, and I think its colors (though kind of cliché by now) convey information pretty well.
- cle 12y ago
  That's not why people make boring business applications. It's because they've decided that making it pretty does not add enough value to justify the costs. In my opinion, the design importance grows with the number of users.
- ericcumbee 12y ago
  I somewhat agree, in a previous job, one of the products I supported was Sharepoint. Which when you have the Document Management features, work flows, and Infopath forms is a really powerful tool. But sharepoint had a reputation on campus of being annoying and hard to use, and I think a lot of that came from the technical team that originally implemented it got somethings wrong to start with. But those of us in the customer service departments, who were tasked with building services for our customers on top of sharepoint, focused to much on making it technically functional and not functional and easy to use from a user perspective. I'd say if some of the UI bits in our sharepoint services looked more like this and less like what we provided, then Sharepoint would have been a much eaiser sale. It would also have probably helped the resentment from users when we told them that "No, because of the type of information this is, we can't put it in google drive or Google Forms".
thirdsun 12y ago
This is great - I'm working on internal webapps full time and I often notice how data-heavy apps with high density of information come with their very own challenges that make Bootstrap, Foundation and Co. less of an ideal choice. What looked great in a simple demo, suddenly feels cluttered in boring data grids. Often it turns out that adapting these frameworks to our own requirements, visually and in terms of functionality, is more of a hassle than simply starting from scratch. Which is what I started to do lately. This, however, seems like a great starting point that I will definitely keep in mind for future projects. I'll need to check how easy it will be to customize and extend it, but it's a great first impression.
quartzmo 12y ago
I'm really glad I checked out this posting because it led me to the author's other work, which is really impressive. http://kumailht.com/ http://kumailht.com/ Way to go, great looking stuff.
Joeri 12y ago
Am i missing something, or is there no explanation anywhere on their site of what this actually does at a detailed enough level targeted towards a developer? Update: never mind, found the docs hiding inside the live demo page.
andyl 12y ago
This looks great. I'd like to know: 1) how does this differ from bootstrap? 2) why a whole new framework, instead of extending bootstrap?
languagehacker 12y ago
Lots of nice work put into this, but I think some of the fundamental architectural assumptions are a little regressive. For instance, it looks like the boilerplate expects a lot of server-side template rendering, or minimal dynamic rendering on the front-end. Also, using jQuery and event-oriented JS in general is nice and stable and easy to grok, but in my opinion not forward-looking. I think the front-end world is going more in the direction of single-page apps that primarily use the server side for data-driven APIs. The server-side APIs become way more portable, and the user experience becomes far more responsive. Just because something is internal doesn't mean you don't want data portability, high responsiveness, and low latency. I respect the fact that the approach is opinionated from a front-end perspective. But to counter an opinion with another opinion, data portability and reduced latency from the server justifies all the fuckery associated with many of the SPA frameworks (looking at Angular when I say fuckery). This framework encourages people to stick to the skills they were comfortable with five years ago, and untempered complacency is never a good thing.
- gfodor 12y ago
  One man's "forward looking" is another man's "swept up in the latest trends." This framework seems to be pushing back against trends on the design front, so unsurprising it's pushing back on trends in the architecture front as well.
reledi 12y ago
khet, you may not be aware but you're violating an HN rule by asking others to upvote your submission [1, 2]. 1: https://news.ycombinator.com/newsfaq.html https://news.ycombinator.com/newsfaq.html 2: https://twitter.com/kumailht/status/540503967977852928 https://twitter.com/kumailht/status/540503967977852928
rMBP 12y ago
License? Scanned both the github and docs for any mention of it.
- khet 12y ago
  Added an MIT license to the Github repo.
pimlottc 12y ago
There's some nice visuals here but it's hard to see why I should choose to invest my time into learning this rather than something more standard like Bootstrap. And I don't really see how any of this is specifically oriented to internal applications.
b2themax 12y ago
I think it looks sharp. But the monotonality, or lack of contrast within the layouts blends elements together, so I would find it difficult to read and interact with for an extended period of time. It is very cool, I especially like the Grid Forms -- those are so sweet.
jimmcslim 12y ago
Everytime I see a new CSS framework with a grid layout (which they all do) I get sad that decent cross-browser support for the CSS Grid module seems so far away...
- chm 12y ago
  It doesn't matter if all the company PCs are running the same software.
  - jimmcslim 12y ago
    I'm thinking about it from the perspective of an ISV that wants to deliver a app with a web interface that is run on in-house servers. Although we could probably just target the capabilities of IE (which does support an early version of the CSS Grid spec) and be done with it...
alongnion 12y ago
I prefer something more feature-rich, using a known framework like Bootstrap. There's a lot more features and examples built in to inexpensive templates for Admin interfaces like SmartAdmin - https://bootstraphunter.com/smartadmin-product.php https://bootstraphunter.com/smartadmin-product.php
- firefoxNX11 12y ago
  Great point. From perspective of someone deciding between using bootstrap themes vs flakes the decision would be based on whether you want bootstrap or not. What I don't get is why would you NOT use bootstrap or material design and pick something like getflakes? The justification that it's for internal apps - apps which don't have proper budget allocations, need to be done quickly with usability short cuts? I guess that does happen a lot for internal apps. But why would you not build getflakes using bootstrap or foundation?
rfc791 12y ago
Well done. I work in a large enterprise and have no design ability. Tired of banging bootstrap together and not quite getting the look you achieved with Flakes. Looking forward to trying this.
taskstrike 12y ago
Just wanted to mention that I work on NimbusFoundry(nimbus foundry.com) which has similar ideas except we focus on auth, storage of data, and permissioning instead of front end. This is so that users can create apps within enterprise environments like Google apps for business easily.
- kiwidrew 12y ago
  Very cool - I like your idea to store all of the data using a Google Drive realtime document. But I'm not sure how you are able to handle authentication and permissions, e.g. limiting a field/model to only be visible to certain users. AFAIK read access to a document in Drive is all-or-nothing, and there doesn't seem to be a way to let a user only view a portion of the document. Are you only enforcing the access control in the client-side logic? If so, that's not even remotely secure....
  - taskstrike 12y ago
    By permission, we mean that each team's data is hosted on a single document, and when you add a member, they can see both the data in the app and also binary files associated with that data. We don't try to do differing levels of permissions not supported by google
hwgd 12y ago
Not sure why Bootstrap bloat is a problem if it's just going to be an internal app. I'd rather go with a more familiar, and well known framework, and not have the overhead of learning yet another framework (not to mention others who would maintain or contribute to the internal app would have to pick up this new framework) That being said, I do like the look and feel of Flakes. Also, given that graphs and charts are key to internal business apps, would be awesome if there was some easy charting integration / capability.
- vertex-four 12y ago
  Bootstrap bloat has little to do with it, looking at the docs. This gives you a bunch of components for specific data views; Bootstrap is far more general, requiring you to create your own components out of Bootstrap's lower-level CSS. It's a specifically geared framework vs a general one.
plow 12y ago
The 'consumerisation of the enterprise' is here to stay. Having a USP that is a negation of something beneficial and pleasant in UI pleasantness and that drives adoption is likely only to work against the success of this framework, let alone the narrower only 'internal' market reducing the role of the open source community in its continued development and their passion for it.
iamtew 12y ago
Looks very nice. I've been busy trying to make a dashboard for work with overview of various systems, I will definitely give this one a try.
waylandsmithers 12y ago
Some feedback about the preview section: /preview/typography: I was hoping to find out what font(s) I was looking at, but this page contains a history of typography. Looks like it's Helvetica? But I don't see the word Helvetica anywhere on the page. Maybe it's expected that the user will know why Helvetica is the right choice. from /preview/grid : "A collection of classes to build grid based layouts with absolute ease. This is the simplest grid system you'll love to use." This feels weirdly sales-y for documentation.

438 points by khet 12y ago

jchendy 12y ago

Is there any compelling reason to try this if I'm already comfortable with using Bootstrap for internal apps?

schrijver 12y ago
I guess it’d be good if the website mentions a bit more what are the differences with and advantages over Bootstrap. I’ve never used Bootstrap for public facing app because I find its look too bland, but I love it for internal apps. IMHO it doesn’t exaggerate at all on the level of ‘glitz’ (one of the arguments of the OP against contemporary frameworks).

krat0sprakhar 12y ago

This is a pleasant change. My goto framework for internal apps is Bootstrap (no surprise there) although I actually end up using only a handful of elements. Flakes looks like a good enough collection of elements to cover 95% of my use cases. Definitely going to use this in my next app. Thanks for sharing!

sensecall 12y ago
If you use Bootstrap Sass, you could look into only including the components that you actually use – can help reduce Bootstrap bloat big time.
- raziel2p 12y ago
  Why single out the SASS version? If you compile LESS files you have the same option. I also think Bootstrap has a form on its website which compiles the CSS with the components you want, without having to install/run a preprocessor.
  - tracker1 12y ago
    I've always used the Less version myself as a base for customization... lately, I'll npm it in as a requirement... copy out the bootstrap.less and variables.less into my project, update the references and work from there. It's relatively straight forward to do so... from there, I can comment out the parts I don't use. variables.less is mainly copied as a reference point... In my app.less, I include the bootstrap variables, then my own variables, then the rest of bootstrap, then my application less files. At this point sass doesn't really offer much over less (other than a slightly stronger presence in the design community). I'm using node mostly, which fits in better for me, and makes less a better/tighter fit. For better or worse, being able to bring in less, react and the like combined with SPDY/HTTP2 will bring some interesting development as things progress. Right now transpiling ES6/7 stuff to ES5 is probably the biggest bottleneck in terms of serving applications closer to as-is.

ckluis 12y ago

Nicely done, but if you are really trying to be a framework for internal apps (vs a design framework like bootstrap) - I would focus on adding a couple of more admin-like components (such as grids vs tables with the options associated with grids). An opinionated admin framework would be a huge win. For what its worth - semantic-ui.com has a couple of neat compenents that are also worth having (cards, steps/wizards). Watching this project now!

rrrx3 12y ago

I'd like to understand more about the rationale that led you down the path of creating this. In my years in enterprise, user and market research has driven the push to create UIs that are more compelling, that make users feel more at home and comfortable (as they would be with mobile and consumer products), while maintaining a more narrow focus on tasks instead of providing a generic one-size fits all paradigm. This framework stands in contrast to that, making things dull and boring. What caused you to go down this path?

mhd 12y ago
I'd like to work in that progressive sector of the enterprise, mine is still full of Swing, extjs and even Tk.
- tracker1 12y ago
  extjs isn't so bad.. My only complaints would be all the themes look a bit dated (and squashed on a large display), and I don't like OO paradigms in JS so much and ext is really heavy OO.
  - rrrx3 12y ago
    personal opinion - extjs is non-performant trash.
  - mhd 12y ago
    I'm generally putting extjs in the swing/MFC/Qt corner, no the angular/dojo/react/etc one, and yes, compared to that in a client/server setup it's not that bad -- at least it suggest a more sane communication setup and is only godawful when it comes to deploying, not outright hostile. But quite often, some corporations would've fared better keeping their old mainframe terminal apps. With mobile apps, both setups don't really fare too well, although with the recent influx of Windows tablets and styluses, I fear that we could be regressing to shoddy Visual Basic-ish apps with homegrown comm/sync protocols again.
- rrrx3 12y ago
  as much as i'd like to say the opposite, it's not nearly as progressive as it should be. There are tons and tons of places who are actively regressing.

jackweirdy 12y ago

I really like this which was linked from there: http://kumailht.com/gridforms/ http://kumailht.com/gridforms/

josekpaul 12y ago

I really like gridforms for dense data-entry forms (http://kumailht.com/gridforms/ http://kumailht.com/gridforms/).

tracker1 12y ago
Agreed, was coming in here to comment on as much. I don't think anything on the demos really stood out quite as much as the grid forms does. It's closer to what people who might be replacing a paper form would probably like. Whenever I'm designing a system that is replacing paper, though it's been a long while. I find it best to start with as close to the paper version as practical. There's a lot to be said for making something that is familiar.
wldlyinaccurate 12y ago
Kumail Hunaid, who made Grid Forms, is also the creator of Flakes.
jahewson 12y ago
I don't like them at all. Yes, they look pretty, but it's an emulation of the worst aspects of paper forms. The grid-style form is my least-favourite paper form and I frequently find it confusing and difficult to fill out such forms correctly. Perhaps this is because the linear flow of the form is awkwardly two-dimensional, or perhaps because for anything beyond a trivial example, the layout becomes unnatural as the size of the fields don't usually lend themselves to a logical and human-friendly structured layout. Perhaps it's because the grid style form ignores the importance of whitespace in clear and understandable design. Here's a good test: hold the form upside down and see if you can still tell it's structure at a glance, or hold it at the other side of the room and try the same thing.
- hyperbovine 12y ago
  Be that as it may, this is exactly the type of form I routinely see people filling out on 80s-era WYSE terminals at airports, rental car agencies, the DMV, hardware stores, and so on. It seems like a lot non-tech people find them fairly easy to get the hang of.

zkhalique 12y ago

"It goes away with custom fonts" should be "It does away..." Other than that, pretty cool! There may be a space for this... Reminds me a bit of http://platform.qbix.com http://platform.qbix.com which we built to power social apps (on all devices). One tip: if you're going to make it for business, have the demo document the keyboard shortcuts to get around quickly, like in gmail. Ideally your "front end framework" could have a controller that would accept a keymap object like {"a": "actionName", "r": "someOtherAction"} etc.

khet 12y ago
Good catch, should be fixed now.

ivan_ah 12y ago

What about OpenUI5 for business apps: https://openui5.hana.ondemand.com/#content/Controls/index.html https://openui5.hana.ondemand.com/#content/Controls/index.ht... From my initial tests, it's very clean MVC (a bit verbose). Also the deploy story is not too good... (frontend code ships as a .war). Does anyone have experience with this, good or bad?

tracker1 12y ago
It's relatively clean, but a bit more klunky feeling. It also seems REALLY sluggish... Not sure if this is typical, but it really doesn't feel nice. I'm also not a huge fan of enterprisey software development.. SAP and most Java projects make me pull my hair out just getting an environment for development setup.
- ivan_ah 12y ago
  Yeah the other day was my first day with Java and Eclipse and I was close to pulling my hair out (coming from python and vim). Ultimately it's just a different set of batteries but the depth/weight of the stack seems insane---the expression 'house of cards' comes to mind... Still OpenUI5 is just js files in the end, so hopefully entreprisey people can't mess it up too bad ;)
infinite_snoop 12y ago
I'm doing a lot of SAP/OpenUI5 development at the moment and performance seems good. I believe the .war is only needed as a one off if you need to deploy the UI5 libs to a Java server? I'm deploying to SAP systems which already host the libraries so I haven't had that issue. One click deploying from Eclipse is built into the UI5 plugin. UI5 obviously has the weight of SAP behind it (be that for good or bad!) and new releases seem pretty frequent. For developing web apps to consume SAP data at least it seems the obvious choice (it's very much geared towards consuming oData which SAP Gateway provides).

toddsiegel 12y ago

This is really cool and a nice start. One big thing we are dealing with in our internal app are responsive tables. We display some data in tables, but it almost always looks like crap on a small screen. There are a few different ways to solve this. Sometimes it makes sense to hide or abbreviate columns other times the table should neatly convert to a list. This is tougher. I also like your search & filters design. I did something like this just last week, but I like yours better. ;-) In some places you use semantic class names, like for messages, but for buttons you use colors. Probably better to just stick with a single convention for consistency.

mhd 12y ago
I think this is one area where we're going to see some changes even in the enterprise sector. Your average data-grids are pretty familiar to those used to working with spreadsheets, but pretty much everyone is used to rich list views, who also have the benefit of being a bit more responsive (not as good for editing data, though. Although with those gridforms, I do wonder...) Granted, one screen isn't as heavy with data, but if you're trying to survey that much at once, you'd probably benefit from richer tooling anyways. I'd almost bet that a design that degrades gracefull from data grids to list views will have users resizing their browsers or picking portrait mode to get out of that.
raziel2p 12y ago
I think colours for names of buttons are OK. I hate having to jump between CSS frameworks and trying to remember what the correct class is - danger? Warning? Error? I know what I want is red, and any time I want to change the class of a button or message/alert your core intent is to change the colour - so you might as well skip that abstraction IMO.

pearjuice 12y ago

Can't wait to get a good taste of this flavor of the month.

jordache 12y ago

Great start! One thing that I noticed immediately was the UX associated with the hamburger menu. When the page content gets sufficiently long, you have the potential of scrolling beyond the hamburger menu. To jump to another page, you have to scroll to the top. Potential solutions could be making the hamburger menu fixed to the upper-left corner, or provide UI widget to return to top of page.

timme 12y ago

Bootstrap started out as framework for internal apps.

JelteF 12y ago

I think it's strange that they use Morris.js[1] for their graphs on the main pages, but don't mention it anywhere. [1]https://morrisjs.github.io/morris.js/ https://morrisjs.github.io/morris.js/

ricardobeat 12y ago
The graphs don't appear to be part of the framework, just example content.

rikkus 12y ago

Went to this page: http://getflakes.com/preview/browsing-data.html http://getflakes.com/preview/browsing-data.html The 'Next' button on the grid seems to be broken. No javascript error in console. Current stable Chrome, Windows.

buckbova 12y ago
I suspect it's not meant to be completely functional.
- khalilravanna 12y ago
  Yep. Looks like the only thing with any functionality attached is the search. Which is funny because with the search at the top of the page I could see how it would lead one to believe that the rest of the buttons might have functionality attached to them as well.

kbart 12y ago

I'd called that "lean and clean" instead of "boring". And I wish that more user facing apps would look like that, not just internal ones. Maybe it's just me, but all these flashy things, unnecessary effects, animations only clutters the screen and makes app harder and annoying to use. Functionality and ergonomics is all that usually matters. Well done, I'll give it a try.

doque 12y ago

The 'select all' checkbox on http://getflakes.com/preview/tables.html http://getflakes.com/preview/tables.html has no effect my Chrome.

philodespotos 12y ago
Nor in any other browser; AFAICT there's nothing actually bound to that. It's just to demonstrate styling.

snlacks 12y ago

I wish more things looked like this at work. There's apps that look like native apps, there's bootstrap apps, there's all the custom CSS floating around, there's whatever's new, there's the stock CSS sheet that comes with the plugins... Keeping to principles like this at work or for work environments would make it so much easier to have unity. I'm not saying everything should look like this, but that not everything needs to stand out for the sake of standing out. Using the same app every day undoes the need for over the top "visual cues" and complex overlays and material concepts. We need fast, interchangeable stuff, that works with large amounts of data/fields/etc when the content doesn't fit looking like apple.com. :) I wish you guys luck, and I'll give it a shot the first chance I get.

kylestlb 12y ago
I work at a very large company and it's the same way. We have a team dedicated to keeping internal apps within certain stylistic and functional guidelines but the overall landscape is still an absolute clusterfuck. Some apps are built with bootstrap, some with pure, some with no styling whatsoever, different hexes for our company's primary color... you name it. Fragmented as all hell.
- snlacks 12y ago
  It's amazing in an "Agile" world, we still feel like we need to "configure" basic design concepts. For internal apps: Structure could be one theme on one CSS framework. So much time is wasted on "design" (picking colors, lining things up) by people who don't know anything about design.

alanning 12y ago

Very nice work. Given the prevalence of Bootstrap and Foundation, it would probably help adoption if there were options with those as the base styling lib. I know there is a lot of work in the custom sass here and this is currently a one-man project. May be a good candidate for a "Roadmap" and "How you can help" section in the repo's Readme.

aaronlumsden 12y ago

Am I missing something here? I don't get what's so special about this as opposed to all the other web app frameworks?

infinitone 12y ago
It makes sense if you've ever had to work on internal facing apps, like an admin panel. You wouldn't want the overhead and clutter of something like bootstrap which'd be overkill (albeit you can customize it to be minimal).

Ronsenshi 12y ago

I quite like it. Simple, bare, no excessive styling as opposed to current trend. Buttons kind of look out of place, though.

teknologist 12y ago

I feel internal business applications can be visually appealing too. People have to look at these things all day, so why are we so quick to assert that these people are practically robots who can't appreciate comfortable interfaces when we design and build boring apps? Life can look good all over. Don't succumb to this "business is serious and should therefore be dull and boring" stuff.

xanderstrike 12y ago
I think they're going for a different kind of boring than what you're implying. It doesn't have fancy animations and flashy colors like Bootstrap and Foundation. It's simple, clean, fast and straight to the point, which is something valuable in an internal tool.
- akx 12y ago
  Bootstrap doesn't have animations, not that I know of, and I think its colors (though kind of cliché by now) convey information pretty well.
cle 12y ago
That's not why people make boring business applications. It's because they've decided that making it pretty does not add enough value to justify the costs. In my opinion, the design importance grows with the number of users.
ericcumbee 12y ago
I somewhat agree, in a previous job, one of the products I supported was Sharepoint. Which when you have the Document Management features, work flows, and Infopath forms is a really powerful tool. But sharepoint had a reputation on campus of being annoying and hard to use, and I think a lot of that came from the technical team that originally implemented it got somethings wrong to start with. But those of us in the customer service departments, who were tasked with building services for our customers on top of sharepoint, focused to much on making it technically functional and not functional and easy to use from a user perspective. I'd say if some of the UI bits in our sharepoint services looked more like this and less like what we provided, then Sharepoint would have been a much eaiser sale. It would also have probably helped the resentment from users when we told them that "No, because of the type of information this is, we can't put it in google drive or Google Forms".

thirdsun 12y ago

This is great - I'm working on internal webapps full time and I often notice how data-heavy apps with high density of information come with their very own challenges that make Bootstrap, Foundation and Co. less of an ideal choice. What looked great in a simple demo, suddenly feels cluttered in boring data grids. Often it turns out that adapting these frameworks to our own requirements, visually and in terms of functionality, is more of a hassle than simply starting from scratch. Which is what I started to do lately. This, however, seems like a great starting point that I will definitely keep in mind for future projects. I'll need to check how easy it will be to customize and extend it, but it's a great first impression.

quartzmo 12y ago

I'm really glad I checked out this posting because it led me to the author's other work, which is really impressive. http://kumailht.com/ http://kumailht.com/ Way to go, great looking stuff.

Joeri 12y ago

Am i missing something, or is there no explanation anywhere on their site of what this actually does at a detailed enough level targeted towards a developer? Update: never mind, found the docs hiding inside the live demo page.

andyl 12y ago

This looks great. I'd like to know: 1) how does this differ from bootstrap? 2) why a whole new framework, instead of extending bootstrap?

languagehacker 12y ago

Lots of nice work put into this, but I think some of the fundamental architectural assumptions are a little regressive. For instance, it looks like the boilerplate expects a lot of server-side template rendering, or minimal dynamic rendering on the front-end. Also, using jQuery and event-oriented JS in general is nice and stable and easy to grok, but in my opinion not forward-looking. I think the front-end world is going more in the direction of single-page apps that primarily use the server side for data-driven APIs. The server-side APIs become way more portable, and the user experience becomes far more responsive. Just because something is internal doesn't mean you don't want data portability, high responsiveness, and low latency. I respect the fact that the approach is opinionated from a front-end perspective. But to counter an opinion with another opinion, data portability and reduced latency from the server justifies all the fuckery associated with many of the SPA frameworks (looking at Angular when I say fuckery). This framework encourages people to stick to the skills they were comfortable with five years ago, and untempered complacency is never a good thing.

gfodor 12y ago
One man's "forward looking" is another man's "swept up in the latest trends." This framework seems to be pushing back against trends on the design front, so unsurprising it's pushing back on trends in the architecture front as well.

reledi 12y ago

khet, you may not be aware but you're violating an HN rule by asking others to upvote your submission [1, 2]. 1: https://news.ycombinator.com/newsfaq.html https://news.ycombinator.com/newsfaq.html 2: https://twitter.com/kumailht/status/540503967977852928 https://twitter.com/kumailht/status/540503967977852928

rMBP 12y ago

License? Scanned both the github and docs for any mention of it.

khet 12y ago
Added an MIT license to the Github repo.

pimlottc 12y ago

There's some nice visuals here but it's hard to see why I should choose to invest my time into learning this rather than something more standard like Bootstrap. And I don't really see how any of this is specifically oriented to internal applications.

b2themax 12y ago

I think it looks sharp. But the monotonality, or lack of contrast within the layouts blends elements together, so I would find it difficult to read and interact with for an extended period of time. It is very cool, I especially like the Grid Forms -- those are so sweet.

jimmcslim 12y ago

Everytime I see a new CSS framework with a grid layout (which they all do) I get sad that decent cross-browser support for the CSS Grid module seems so far away...

chm 12y ago
It doesn't matter if all the company PCs are running the same software.
- jimmcslim 12y ago
  I'm thinking about it from the perspective of an ISV that wants to deliver a app with a web interface that is run on in-house servers. Although we could probably just target the capabilities of IE (which does support an early version of the CSS Grid spec) and be done with it...

alongnion 12y ago

I prefer something more feature-rich, using a known framework like Bootstrap. There's a lot more features and examples built in to inexpensive templates for Admin interfaces like SmartAdmin - https://bootstraphunter.com/smartadmin-product.php https://bootstraphunter.com/smartadmin-product.php

firefoxNX11 12y ago
Great point. From perspective of someone deciding between using bootstrap themes vs flakes the decision would be based on whether you want bootstrap or not. What I don't get is why would you NOT use bootstrap or material design and pick something like getflakes? The justification that it's for internal apps - apps which don't have proper budget allocations, need to be done quickly with usability short cuts? I guess that does happen a lot for internal apps. But why would you not build getflakes using bootstrap or foundation?

rfc791 12y ago

Well done. I work in a large enterprise and have no design ability. Tired of banging bootstrap together and not quite getting the look you achieved with Flakes. Looking forward to trying this.

taskstrike 12y ago

Just wanted to mention that I work on NimbusFoundry(nimbus foundry.com) which has similar ideas except we focus on auth, storage of data, and permissioning instead of front end. This is so that users can create apps within enterprise environments like Google apps for business easily.

kiwidrew 12y ago
Very cool - I like your idea to store all of the data using a Google Drive realtime document. But I'm not sure how you are able to handle authentication and permissions, e.g. limiting a field/model to only be visible to certain users. AFAIK read access to a document in Drive is all-or-nothing, and there doesn't seem to be a way to let a user only view a portion of the document. Are you only enforcing the access control in the client-side logic? If so, that's not even remotely secure....
- taskstrike 12y ago
  By permission, we mean that each team's data is hosted on a single document, and when you add a member, they can see both the data in the app and also binary files associated with that data. We don't try to do differing levels of permissions not supported by google

hwgd 12y ago

Not sure why Bootstrap bloat is a problem if it's just going to be an internal app. I'd rather go with a more familiar, and well known framework, and not have the overhead of learning yet another framework (not to mention others who would maintain or contribute to the internal app would have to pick up this new framework) That being said, I do like the look and feel of Flakes. Also, given that graphs and charts are key to internal business apps, would be awesome if there was some easy charting integration / capability.

vertex-four 12y ago
Bootstrap bloat has little to do with it, looking at the docs. This gives you a bunch of components for specific data views; Bootstrap is far more general, requiring you to create your own components out of Bootstrap's lower-level CSS. It's a specifically geared framework vs a general one.

plow 12y ago

The 'consumerisation of the enterprise' is here to stay. Having a USP that is a negation of something beneficial and pleasant in UI pleasantness and that drives adoption is likely only to work against the success of this framework, let alone the narrower only 'internal' market reducing the role of the open source community in its continued development and their passion for it.

iamtew 12y ago

Looks very nice. I've been busy trying to make a dashboard for work with overview of various systems, I will definitely give this one a try.

waylandsmithers 12y ago

Some feedback about the preview section: /preview/typography: I was hoping to find out what font(s) I was looking at, but this page contains a history of typography. Looks like it's Helvetica? But I don't see the word Helvetica anywhere on the page. Maybe it's expected that the user will know why Helvetica is the right choice. from /preview/grid : "A collection of classes to build grid based layouts with absolute ease. This is the simplest grid system you'll love to use." This feels weirdly sales-y for documentation.