[Pro] coloured boxes in responsive layout

I am testing new responsive layout techniques.

My question was: Is it possible to use 2 different coloured boxes side by side in a responsive website?

Basics:

  • boxes must be flexible (hight and width)
  • boxes have different amount of text (content)
  • both boxes shall shrink the same amount when resizing browser window

I have found a way, but I am not entirely happy with it.
(In my example I have a red container which contents one blue and one transparent box. Disadvantage: the blue box MUST have more text, that both both boxes (colours) shrink nicely.) I hope I can get my idea across to you.

Link

How would YOU make it?
I am sure there are other and better techniques!

Thanks a lot in advance.
Hanna


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Hanna,

I think the political correct answer is flexbox. I have to admit having no idea at all about this - but will dive into this asap.

Meanwhile, I tried something which is called:

“Faking by gradient” which could work for your specific need:

Create a gradient which is horizontal and two colored:

Color 1 (0% ->50%), Color 2 (50% → 100%)

and apply this gradient to the parent DIV. The child-items will each get their dedicated color.

I wrapped this in a pen (the best I could) http://codepen.io/Kimmich-DigitalMedia/pen/vERNyd
to have a play with it.

The gradient has been done by http://www.colorzilla.com/gradient-editor/

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

*Thomas, these are very interesting ideas. Let us play with it!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep!

All I can say is, that flexbox is cool and should even work in our “nested identified” world. I’ll share some further infos later, meanwhile the pen:

Cheers

Thomas

PS: To all my subscribers:

I’ll for sure spend an episode in the GridMeister series - but first have to mind a lil bit about.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Both of you have good solid-working solutions. Here is entry, just to show
there are still more ways to do this…

http://cssway.thebigerns.com/workbench/thomas-even-columns/

My inflow structure is something like

section -------------------------
-- content container ---------
---- row1 container ------------
------ column1-container ---
------ column2-container ---

So, very simple built. The color is applied directly to the column
containers. They are also set to height:none with a padding-bottom at a
percentage (the same for all columns in the row). This has the effect of
regulating the height of the column container.

Of course, to be responsive it helps to convert the padding-bottom from %
to px for narrower screen widths. I might add this has problems in legacy
IE, but, I don’t care.

:slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The way to do it is as big erns has described
an example of this method can be seen here:

http://www.angelsnectar.co.uk/tastingnotes.php

if you look at the 4 blocks near the bottom you will see the titles align up regardless of the width of the browser window and those blocks change to two columns at a specific break points and then finally to a single column.

speak soon max


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ooh, I do like threads like this…

Ernie, I like your example a lot but the rows would appear to be a fixed height (based on the padding of the item). If you add more content to either of the boxes then you’ll see it soon gets clipped by the bounds of the wrapper which, unfortunately, would rule this method out for use in a CMS.

One technique I’ve used in the past to achieve equal height columns (other than background images or JavaScript) is to set the padding on the bottoms of the boxes to a vast figure (9999px) and then pull the bounds back using an equal negative margin (-9999px). The effect is that the background colour will stretch right out to 9999+ pixels high should it need to but is clipped at a uniform height by a wrapper object with the overflow set to hidden.

Here’s an example;
https://dl.dropboxusercontent.com/u/795566/test/equal-height-columns/index.html

You should be able to add or remove as much content to either column and have them both be the same height. I ended up using a div for the row, another for the column, and a final one for the content although you could merge the content and column items if you make sure you integrate any existing box padding values.

The downside to this technique is that Freeway will select either of the column items if you click anywhere below them on the page (Freeway thinks the boxes are huge because of the 9999px padding values) which makes working with the page a little tricky to say the least. If anyone wanted to use this technique I’d suggest entering the padding and margin values as extended styles simply to avoid this issue.
Regards,
Tim.

Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s brilliant, Tim… everyone, really. I like these kind of threads too.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that is a clever trick Tim! Thanks for sharing, glad to have that solution in my arsenal.

Personally, though, I can’t wait until Flexbox becomes a usable thing. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am glad you like the thread!

Thanks Ernie and Max for your suggestions.

Tim, you must be „out of your mind“ to create - padding 9999px / margin -9999px plus wrapper object with overflow hidden - as technique for equal-height colored column boxes. Very creativ indeed.
I will test it later today.

When I sum up all ideas, there is no 100% perfect method, but in the end we share some sound practices.

Thanks a lot!
Hanna


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Personally, though, I can’t wait until Flexbox becomes a usable thing. :slight_smile:

On what do you wait? There are enough prefix opportunities to make even outdated browser handling flexbox.

Basically I had a play with it in Freeway and it works in Safari, Chrome, FF, Opera. I call this progressive enhancement, cause it won’t break anything (theoretically :slight_smile:

That’s what I did:

The parent container (via extended and using Ernie’s one-liner trick):

display: flex; display: -webkit-flex;
flex-wrap: wrap; -webkit-flex-wrap: wrap;

The child items (via extended) in a 4 col example:

flex: 1 25%;-webkit-flex: 1 25%;

and on each breakpoint (I have only two):

flex: 1 50%;-webkit-flex: 1 50%; /* Tablet world*/
flex: 1 100%;-webkit-flex: 1 100%; /* Tablet world*/

to make this responsive.

What I try next is to “classify” rather than hook the styles to the IDs.

I’m trying to wrap this in an example asap.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

… and naturally forgot to add:

display: flex; display: -webkit-flex;

to each child-items as well.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - let me pick this up again.

While I’m unsure what speaks against flexbox - all I can say is that chances are enormous - if you support progressive enhancement.

So thanks Hanna for bringing this up - and thanks guys for all the input.

  1. Naturally the gradient-trick is a bit outdated (but once saw a pretty impressive example at Chris Coyier’s CSS Tricks).

  2. Tim’s method is something that reminds me on very old days - I think the sticky footer stuff was something similar, was it?

  3. JavaScript sucks (for this).

  4. Flexbox?

Probably too new for Freeway, but the interesting part is, that you won’t need clearfix anymore - which is an advantage - but I’m not aware if auto-clearfix action breaks something or not (regarding display:—).

If we talk about display (and this just for info), Freeway doesn’t allow (reasonably) more than one “display” property :slight_smile: - uses the first declaration and skips the second.

I finally solved flexbox by classifying which would make even a lil action thinkable.

Here is my Freeway example:

http://backstage.kimmich-digitalmedia.com/templates/GridMeister/cssmeister.html

and here some more infos:

http://philipwalton.github.io/solved-by-flexbox/

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t recall the sticky footer issues. I know Paul had an Action for this a while back.

I think your list is missing a couple of other options Thomas. By far the easiest method of achieving equal height columns would be to use a table. The columns are naturally flexible and will always remain at a fixed height regardless of the content. Now that really is an ‘old days’ solution.

If you’d rather not use tables for non-tabular data then a faux-table structure using divs and display properties will do the same thing but with less code (albeit losing IE7 support).

I don’t have a problem with flexbox as such and see that it is almost certainly the future but it currently needs using with polyfills or fallbacks to support legacy browsers that won’t render any of this content at all. Safari 5 for example (that I use on one of my Macs still);
https://dl.dropboxusercontent.com/u/795566/test/equal-height-columns/CSSMeister-Safari5-sml.png

By the way your GridMeister project is looking good.

Equal height columns in web pages are a pain. They always have been and although there are solutions on the horizon I think we each need to select a method that works with our target audience. A lot of web design is about minimising layout issues and providing a predictable experience for all users regardless of how they are consuming the site.
Regards,
Tim.

On 20 Feb 2015, at 09:51, Thomas Kimmich wrote:

  1. Tim’s method is something that reminds me on very old days - I think the sticky footer stuff was something similar, was it?

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Tim,

cool - Safari 5 :-). Ahm - yes, I haven’t got any chance to debug this version anymore, but am aware, that I haven’t add the prefixes on all items down to this. And the shot shows even more problems.

If it comes to GridMeister (glad you like it) - my target is a FreewayPro 7+ user - and I instantly hope, that FW7 can’t be installed on iOS 10.3 (roundabout).

But I agree in its entirety, that we have to check our audience. But this embraces the outline and design as well - so no modern audience, no fancy stuff. (Should we really honor Safari 5 and bros?)

Cheers

Thomas

With sticky footer, I mixed this up (it was something like a specific height and a negative top-margin thing).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I wanted to come back to this thread… having enshrined the examples given
with a workbench article-- and an opportunity at redemption with a couple
extra methods…

http://cssway.thebigerns.com/workbench/css-even-column-cookoff/

At the end, I was plagued by Freeway’s stupid 19,000px workspace usability
limit… which still needs fixing by the way SP WIZARDS. But please, enjoy
and comment. Perhaps when I’ve recovered from battling all the niggling
behaviors Freeway still employs to try my patience, I’ll break the document
into several unnecessary pages and include a link to the file. Or not.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie, what a great summary! Thanks a lot for your effort. It made me smile.

By the way in my method: It is easy to remember the box which need to contain longer content when you give items obvious names.

  • “row column orange"
  • “box left green long content”
  • “box right transparent small content”

And sometimes I find it useful to make an invisible textfield with infos (no layer) in the workung space, in case you open the FW file after a long period in order to quickly remember the structure.

I would not use my method in a cms though, clients tend to forget the requirement and will break layouts possibly.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie,

what an excellent wrap - and furthermore I understood all those methods (yippee - that isn’t always the case).

One add to my “faking by gradient”:

The box-color (#thomas-col1 + #thomas-col2) is not optional - it’s necessary to be applied in order to cover the responsive aspect on whatever breakpoint.

Cheers

Thomas

And a small addition to my flexbox method which obviously starts at 19,001 px (and is therefor hidden :slight_smile: reacting on Tim’s screenshot:

I removed all fallbacks - so it at least shows up the content. This is progressive enhancement.

SVG is a mess and will be forever.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thomas-- when you earlier mentioned Flexbox, I spent some time trying to
dig up an example that I did a while back, but could not find it. I found
flexbox to be exciting, with that brand new code smell… but I didn’t do a
flexbox example here because to me it is still mysterious-- more like
snake-charming than css. If I come back to this article then I promise to
look at flexbox again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Likewise, I saw a breathless demo of flexbox, but could not connect the dots in my own head to the point that I have tried it.

What does work really well (even IE8!) is to declare that the parent box of your columns has display:table and width:whatever (since :table means collapse to shrink-wrap the contents, and you probably don’t want that) and then each of your columns has display:table-cell.

With those two changes, you can have visual columns that expand and contract to wrap the tallest contents, while keeping the shorter contents the correct background color. Naturally, this does mean breaking out the Item / Extended interface. since those particular values aren’t available for you to use in the UI.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options