{"id":21659206,"url":"https://github.com/joshuacc/flexbox-challenge","last_synced_at":"2025-06-24T06:08:20.471Z","repository":{"id":138352138,"uuid":"42522512","full_name":"joshuacc/flexbox-challenge","owner":"joshuacc","description":null,"archived":false,"fork":false,"pushed_at":"2015-09-15T13:56:08.000Z","size":128,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2025-03-20T05:28:21.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://adripofjavascript.com/flexbox-challenge/index.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshuacc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-15T13:53:54.000Z","updated_at":"2018-08-12T05:30:10.000Z","dependencies_parsed_at":"2023-03-13T07:55:37.679Z","dependency_job_id":null,"html_url":"https://github.com/joshuacc/flexbox-challenge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joshuacc/flexbox-challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuacc%2Fflexbox-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuacc%2Fflexbox-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuacc%2Fflexbox-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuacc%2Fflexbox-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshuacc","download_url":"https://codeload.github.com/joshuacc/flexbox-challenge/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuacc%2Fflexbox-challenge/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261618130,"owners_count":23185095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T09:30:39.839Z","updated_at":"2025-06-24T06:08:20.451Z","avatar_url":"https://github.com/joshuacc.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flexbox-challenge\n\nThis demo illustrates a way of achieving a specific challenging layout via flexbox.\nThe original source of the challenge is [this thread](https://lobste.rs/s/fudw9z/the_future_of_layout_with_css_grid_layouts/comments/tmghsh#c_tmghsh).\n\n[View the Demo](http://adripofjavascript.com/flexbox-challenge/index.html)\n\nThe requirements of the layout:\n\n\u003e The chunks were site logo, navigation links, copyright footer, and article body text.\n\u003e\n\u003e On the desktop layout, logo and navigation are in a left-hand sidebar, with logo at the top and navigation stretched to fill all the remaining space. Body is in the “other column”, and footer is below both the sidebar and the body, stretching across everything. Everything is relative to the whole page, no viewport-based positioning or sizing, except probably the width of the sidebar, but don’t worry about that for the sake of the exercise.\n\u003e\n\u003e On the mobile layout, there’s only one column. From top to bottom, the elements are logo, body, navigation, and footer. Navigation is below body because there’s a fair number of links; mobile Wikipedia does this, and it works well there.\n\u003e\n\u003e The example was separating these cases using a media query based on something like a 400px threshold for viewport width, but that isn’t particularly essential; the point is only to try to do them with pure css.\n\u003e\n\u003e I’m not sure whether the preferred document order for accessibility would be logo, body, navigation, footer, … the other thing that occurs to me is logo, navigation, body, footer. Feel free to pick one and try to make it happen, for bonus points.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuacc%2Fflexbox-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshuacc%2Fflexbox-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuacc%2Fflexbox-challenge/lists"}