Price Block Pattern : Flexbox and Pseudo Columns
grayghostvisuals opened this issue · comments
@bradfrost
Here's the pattern I'm referencing. I call it “price blocks,” but maybe there's a more vanilla name for it? At the core it's basically equal height columns, but this is also a good excuse to show the pattern using flexbox besides the one linked which uses some pseudo trickery.
Non-Flex Box Example using Pseudo Magic.
http://codepen.io/grayghostvisuals/pen/KIfDy
This is definitely an interesting pattern, as comparison tables/views is tough to do on small screens.
I'd like to include the pattern, but this is more of just a fluid pattern rather than a responsive solution (unless I'm missing something):
Perhaps on small screens, the panels could collapse into an accordion, exposing the name and price? That way people would be able to quickly browse/compare and then make a decision?
yeah I didn't get to the responsive aspects of it yet. Totally agree about the panels collapsing into some sort of accordion like you mentioned. This can obviously be done with flexbox too so it would be great to also include a flexbox version as well. I'll make the adjustments and post the link again when I'm done. 🤘
@bradfrost Okay I made them collapse now. You can take a look again and tell me your thoughts. http://codepen.io/grayghostvisuals/pen/KIfDy
Here's the flexbox demo of the same thing http://codepen.io/grayghostvisuals/pen/gGxfh
Hey Dennis,
Thanks for the update on these. They look great!
I added the pattern under accordion as "Accordion to Comparison Table",
which I'm happy to change if you have a better name for it!
Thanks again for sharing, and keep up the awesome work.
B
Brad Frost
http://bradfrostweb.com
http://twitter.com/brad_frost
On Sat, Apr 12, 2014 at 12:51 AM, Dennis Gaebel notifications@github.comwrote:
Here's the flexbox demo of the same thing
http://codepen.io/grayghostvisuals/pen/gGxfh—
Reply to this email directly or view it on GitHubhttps://github.com//issues/87#issuecomment-40271814
.
@bradfrost Excellente! Thanks B! 👍
I also made both versions w/Vanilla CSS instead of Sass if you'd rather list them instead.
Vanilla CSS Responsive Equal Height Price Blocks w/out Flexbox
http://codepen.io/grayghostvisuals/pen/BAzFw
Vanilla CSS Responsive Equal Height Price Blocks w/Flexbox
http://codepen.io/grayghostvisuals/pen/xuplo
@grayghostvisuals The amazing work. It's great for desktop and mobile. But, when it comes to tablet it's just fine.