HTML/CSS Chain Challenge

For those of you enjoy a deceptively difficult challenge, we offer the HTML/CSS Chain challenge! The code is fully responsive; ie, the chain elements adjoin and flow as expected if zoomed to any size that fits the width of the browser window. These screenshots show a range of sizes and how they fit within different browser windows. In my original code, the link boxes (large circles) are 12em; the link connectors (the smaller circles) are 4em (numbers that are easy to manipulate). You do not have to use these numbers; eg, 6em and 2em would have worked just as well. The goal is to create a responsive layout that respects the stacking order of the chain elements and the directional flow of the numbers using the most efficient HTML and CSS.

This first screenshot shows how the chain adapts to a mobile device.
(These chain elements are the native 12em and 4em sizes mentioned earler.)

At a zoom factor of 60%, I have room for 7 elements in my browser window before the snake wraps.

At 50%, they might look like this:

At 30% one could fit the entire row on a single line.

(These examples are to emphasize that the chain code should be responsive.)

This challenge is expected to run for 1 week before prizes are awarded. Prizes? Bragging rights, of course!!! :smile:

5 Likes

Hi Ron,

Looks like an interesting challenge :slight_smile:

Can you clarify what you mean by ‘zoom’ exactly?

Is the layout only changing on the browsers zoom feature or are items wrapping and snaking on the width of the browser window?

Hi, Paul and everyone. Sorry for the abstraction. Zooming text-only (changing the rendered font-size) in Firefox is an easy way to change the dimensions at which an object whose size in set using ems is rendered on the page. At 30% Zoom, the oversized chain elements are reduced to approximately 3em with 1em joints. My logic probably seems backwards since we normally think of “zooming” characters larger. The act of “zooming” isn’t essential to the design of the page at all. It simply demonstrates how the page behaves if the user’s browser font size is different from the default font size in most browsers. Likewise, I would not have been able to demonstrate 12 links in one row had I not used some method of reducing the size of the font from “gargantuan” to “reasonable”.

My “bad” for not explaining myself clearly. :frowning:

3 Likes

Are there any restrictions or requirements regarding browser or versions of html and css?

(Other than the most efficient of course.)

Can the number of chain elements be more or less than tvelwe?

Should the “50%” image wrap more times in a narrower viewport?

(I guess No, Yes, Yes.)

No. I hadn’t considered any, anyway. Cross-browser compatible in modern browsers seems reasonable.

Sure. I picked 12 as a “happy medium” that divides evenly by 1, 2, 3, 4 and 6.

Yes. :slight_smile:
If you write your code using smaller dimensions for the links, then my so-called 50% scale may be your 100%.

I really should never have introduced the word “zoom” into the description. Bad, distracting wording.

1 Like

I’m glad you did! :smiley:

I wish all devs used the text zoom feature in different viewports when testing designs.

2 Likes

I’ll post this attempt just for interest’s sake as I misread the instructions initially and the example does not ‘snake’ as required.

I’ll have another go tomorrow and see if I can come up with something that follows the rules :slight_smile:

2 Likes

As an exercise I used SVG to create the circles. The middle row with the reversed numbers was not straight forward. Smaller joined circles was ok. Source code at the screen bottom.

Snakes version 001 - not responsive

I have searched at length and cannot find how to check for the responsive screen width without using JavaScript. Anyone have any ideas?

1 Like

Open yours or someone’s Firefox browser and then…

click “Tools” => “Web Developer” => “Responsive Design Mode”. :sunglasses:

coothead

Ok here’s my attempt using flexbox.

It should snake around if you open and close the browsers window or zoom the text-size from the browser controls. I could have done without classes in the html but that would make the css a little messy.

Probably needs a bit of tweaking but I was supposed to be working today:slight_smile:

4 Likes

I was wanting to check the browser width using SVG, when the width changes to decide how many circles to draw and also to change the link circle from three-o-clock to six-o-clock.

“Responsive Design Mode” does show the browser width and height…

…or was I totally misunderstanding your requirement.?

Misunderstanding, of course, is a state I frequently frequent. :wonky:

coothead

Looks like you have it already. I did make a start on one this morning using flex-box and order, but only got so far, then went to play outside for the afternoon while the weather is not terrible. :slight_smile:
Now I’m not sure if I want to spend time finishing it now it’s already been done. :thinking:

2 Likes

Hmmm. In hindsight, I believe that Paul kept people interested in the challenge by asking them to submit their code to him via PM. The results were revealed at the end of the challenge. I didn’t think about that.

1 Like

Hey Ron I can remove the links above
if you feel that would be better?

Thanks, @PaulOB, but I think I’ll just chalk this up to a learning experience. Plus, if anyone else decides to launch a challenge, they will know to avoid my mistakes :tongue:

There hasn’t been a non-flex solution posted yet (I’m working on mine), and John might come up with a PHP generated version, so there are still opportunities for new creative solutions.

3 Likes

Sometimes though I think its helpful to see solutions as that gives others ideas on how to improve or to do it differently. No one has to look at the code anyway if they want to do it themselves;)

I suppose the actual benefit of not showing the code is that people can’t actually cheat or just copy the code but as its only for fun that’s not a real issue here :slight_smile:

4 Likes

“Just for fun” was my thought, exactly, but it is disappointing that @SamA74 seems to have dropped out now that a flex solution has been submitted.

2 Likes

I agree, you always learn something new from other peoples’ ideas or solutions. Even when you had done the same yourself, you see and think and learn some more.

Through all my life, in lack of the proper scholar knowledge, I’m used to reinvent the wheel in all places.
Of course I must look at all the code. :grinning:

4 Likes

Here’s a simpler floated version :slight_smile:

3 Likes