search

bradfrost / this-is-responsive

This Is Responsive
1.59k stars 193 forks source link

Price Block Pattern : Flexbox and Pseudo Columns #87

Closed grayghostvisuals closed 10 years ago

grayghostvisuals commented 10 years ago

@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

bradfrost commented 10 years ago

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):

ember

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?

grayghostvisuals commented 10 years ago

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. :metal:

grayghostvisuals commented 10 years ago

@bradfrost Okay I made them collapse now. You can take a look again and tell me your thoughts. http://codepen.io/grayghostvisuals/pen/KIfDy

grayghostvisuals commented 10 years ago

Here's the flexbox demo of the same thing http://codepen.io/grayghostvisuals/pen/gGxfh

bradfrost commented 10 years ago

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/bradfrost/this-is-responsive/issues/87#issuecomment-40271814 .

grayghostvisuals commented 10 years ago

@bradfrost Excellente! Thanks B! :+1:

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

iraycd commented 10 years ago

@grayghostvisuals The amazing work. It's great for desktop and mobile. But, when it comes to tablet it's just fine.