9 ms·

Bootcards

168 points by 2a0c40 11y ago

CodexArcanum 11y ago
I just saw this the other day while researching card ui concepts for an idea I was formulating. On the one hand, I'm very excited about how easy it will be to make a card ui with this. On the other hand, I was kind of sad that I'm coming into card ui so late that it's about to be the next big overused thing.
brwnll 11y ago
Cards play a large part in Material Design. If you are interested in implementing that type of design, enjoy the convinces of a CSS framework (Icons, responsive grid, etc), and aren't married to Bootstrap I'd suggest taking a look at http://materializecss.com http://materializecss.com
- TheAceOfHearts 11y ago
  Very cool framework. I tend to avoid using this sort of framework for my applications because I'll usually end up having to hack around their components and styles, or because I only need 1 or 2 components and I don't wanna pull in everything. However, I'm definitely gonna be referencing some of their stuff for my own implementations.
  - tschuy 11y ago
    You might also be interested in Google's own Polymer: https://www.polymer-project.org/1.0/ https://www.polymer-project.org/1.0/
- anarchy8 11y ago
  Yes, instead of being married to Boostrap, you'll be married to Material Design. Equally frightening.
EMRo 11y ago
I like the concept of card based design but this implementation reminds me of Ext.JS almost.
winestock 11y ago
timrpeterson Your comment has been hellbanned for some reason. You may want to look into it.
theelfismike 11y ago
fix the aspect ratio on the ipad screenshot
ddoolin 11y ago
We've really taken to the "card" design here, too. We've mixed it with Packery (our angular-packery for an Angular wrapper) using the card headers as drag targets, which works really well. I haven't seen this library before but as we need to get serious about organizing our implementation, this may come in handy.
hliyan 11y ago
We've been using this in one of our products for a while now -- no complaints.
tdoggette 11y ago
Yes, yes! Everyone steal the best parts of WebOS and make 'em universal!
timrpeterson 11y ago
Great resource, thanks! I like it but it has a bit of a dated look to it. I think to really take off, this project's UI should improve on Bootstrap itself, perhaps taking cues from Material and iOS. Also, the icons are overused. I get that this is just starting and it is emphasizing structural elements of the UI, but it would be great to evolve the Bootstrap look which has some residual heaviness to it IMHO.
FractalNerve 11y ago
Semantically a "Card" looks actually like a <Legend>
techpeace 11y ago
Could someone explain to me the difference between a "card" and any other rectangular grouping of content?
- kenbellows 11y ago
  Visually, a card often has a header and/or footer and is generally embeddable into a standard article body (e.g. Twitter's embeddable tweet cards). Content-wise, a card serves a very specific semantic purpose: presenting a self-contained block of data to a user in a standalone way. The metaphor employed here is something like a trading card or baseball card, such that a block of data or metadata about a particular subject is called out in a self-contained way that is easily understandable and digestable.
- aaronbrethorst 11y ago
  Hype, as far as I can tell. (e.g. https://blog.intercom.io/why-cards-are-the-future-of-the-web/ https://blog.intercom.io/why-cards-are-the-future-of-the-web... seems just a wee bit excessive in its enthusiasm for cards.)
csense 11y ago
Was hoping this would be a device with a bootloader capable of reading QR codes printed on cards, or maybe a historical perspective about the boot process of a punched card computer. Clicked, was disappointed.
mc 11y ago
There are actually two products: XControls.org, which augments IBM Domino XPages and also XComponents.org for an Angular.js environment. This is one of those open source tools that I'd love to see mature into a commercial offering: emailing request tickets, getting bugs fixed, having access to frequent release candidates, etc. I emailed them awhile back asking for commercial license and inquiring about any support they could offer. They're open to the idea, but seem very new to the game.
- BHSPitMonkey 11y ago
  A customer support team centered around a CSS theme? Seems a little unrealistic.
  - mc 11y ago
    It's not just a CSS theme though. The XControls/Xcomponents libraries are complex toolkits.

168 points by 2a0c40 11y ago

I just saw this the other day while researching card ui concepts for an idea I was formulating. On the one hand, I'm very excited about how easy it will be to make a card ui with this. On the other hand, I was kind of sad that I'm coming into card ui so late that it's about to be the next big overused thing.

brwnll 11y ago

Cards play a large part in Material Design. If you are interested in implementing that type of design, enjoy the convinces of a CSS framework (Icons, responsive grid, etc), and aren't married to Bootstrap I'd suggest taking a look at http://materializecss.com http://materializecss.com

TheAceOfHearts 11y ago
Very cool framework. I tend to avoid using this sort of framework for my applications because I'll usually end up having to hack around their components and styles, or because I only need 1 or 2 components and I don't wanna pull in everything. However, I'm definitely gonna be referencing some of their stuff for my own implementations.
- tschuy 11y ago
  You might also be interested in Google's own Polymer: https://www.polymer-project.org/1.0/ https://www.polymer-project.org/1.0/
anarchy8 11y ago
Yes, instead of being married to Boostrap, you'll be married to Material Design. Equally frightening.

EMRo 11y ago

I like the concept of card based design but this implementation reminds me of Ext.JS almost.

winestock 11y ago

timrpeterson Your comment has been hellbanned for some reason. You may want to look into it.

theelfismike 11y ago

fix the aspect ratio on the ipad screenshot

ddoolin 11y ago

We've really taken to the "card" design here, too. We've mixed it with Packery (our angular-packery for an Angular wrapper) using the card headers as drag targets, which works really well. I haven't seen this library before but as we need to get serious about organizing our implementation, this may come in handy.

hliyan 11y ago

We've been using this in one of our products for a while now -- no complaints.

tdoggette 11y ago

Yes, yes! Everyone steal the best parts of WebOS and make 'em universal!

timrpeterson 11y ago

Great resource, thanks! I like it but it has a bit of a dated look to it. I think to really take off, this project's UI should improve on Bootstrap itself, perhaps taking cues from Material and iOS. Also, the icons are overused. I get that this is just starting and it is emphasizing structural elements of the UI, but it would be great to evolve the Bootstrap look which has some residual heaviness to it IMHO.

FractalNerve 11y ago

Semantically a "Card" looks actually like a <Legend>

techpeace 11y ago

Could someone explain to me the difference between a "card" and any other rectangular grouping of content?

kenbellows 11y ago
Visually, a card often has a header and/or footer and is generally embeddable into a standard article body (e.g. Twitter's embeddable tweet cards). Content-wise, a card serves a very specific semantic purpose: presenting a self-contained block of data to a user in a standalone way. The metaphor employed here is something like a trading card or baseball card, such that a block of data or metadata about a particular subject is called out in a self-contained way that is easily understandable and digestable.
aaronbrethorst 11y ago
Hype, as far as I can tell. (e.g. https://blog.intercom.io/why-cards-are-the-future-of-the-web/ https://blog.intercom.io/why-cards-are-the-future-of-the-web... seems just a wee bit excessive in its enthusiasm for cards.)

csense 11y ago

Was hoping this would be a device with a bootloader capable of reading QR codes printed on cards, or maybe a historical perspective about the boot process of a punched card computer. Clicked, was disappointed.

mc 11y ago

There are actually two products: XControls.org, which augments IBM Domino XPages and also XComponents.org for an Angular.js environment. This is one of those open source tools that I'd love to see mature into a commercial offering: emailing request tickets, getting bugs fixed, having access to frequent release candidates, etc. I emailed them awhile back asking for commercial license and inquiring about any support they could offer. They're open to the idea, but seem very new to the game.

BHSPitMonkey 11y ago
A customer support team centered around a CSS theme? Seems a little unrealistic.
- mc 11y ago
  It's not just a CSS theme though. The XControls/Xcomponents libraries are complex toolkits.