{"id":22808550,"url":"https://github.com/sixarm/sixarm_css_holy_grail_layout_with_flexbox","last_synced_at":"2025-04-22T12:48:35.024Z","repository":{"id":137270445,"uuid":"52926124","full_name":"SixArm/sixarm_css_holy_grail_layout_with_flexbox","owner":"SixArm","description":"SixArm.com » CSS » Holy Grail layout with flexbox","archived":false,"fork":false,"pushed_at":"2025-04-14T08:49:17.000Z","size":10,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T09:46:24.388Z","etag":null,"topics":["css","flexbox","holy-grail","layout"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/SixArm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-03-02T02:14:56.000Z","updated_at":"2025-04-14T08:49:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"e6eb698c-fa36-4730-9ceb-071e28dbe6b8","html_url":"https://github.com/SixArm/sixarm_css_holy_grail_layout_with_flexbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SixArm%2Fsixarm_css_holy_grail_layout_with_flexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SixArm%2Fsixarm_css_holy_grail_layout_with_flexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SixArm%2Fsixarm_css_holy_grail_layout_with_flexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SixArm%2Fsixarm_css_holy_grail_layout_with_flexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SixArm","download_url":"https://codeload.github.com/SixArm/sixarm_css_holy_grail_layout_with_flexbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250243530,"owners_count":21398363,"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":["css","flexbox","holy-grail","layout"],"created_at":"2024-12-12T11:10:40.573Z","updated_at":"2025-04-22T12:48:35.007Z","avatar_url":"https://github.com/SixArm.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SixArm.com » CSS » \u003cbr\u003e Holy Grail layout with flexbox\n\nTo accomplish a CSS \"Holy Grail\" layout with flexbox,\nwe use the excellent work published by Philip Walton,\nin the open source \"Solved By Flexbox\" repository:\nhttps://github.com/philipwalton/solved-by-flexbox/blob/master/demos/holy-grail.md\n\nFiles:\n\n  * [demo.css](demo.css)\n  * [demo.html](demo.html)\n\n\n## Changes ##\n\nWe have edited the CSS code with the goal of making it easier for beginners:\n\n * Added comments and examples\n * Added blank classes to make it easier to see how to customize this.\n * Omitted inessential items, such as margin, padding, color, border, etc.\n * Renamed classes to make them more generic and also more semantic.\n\n\n## Naming Conventions ##\n\nThe CSS code uses the naming conventions of SuitCSS:\n\n  * .ComponentName\n  * .ComponentName-partName\n  * .ComponentName--modifierName\n  * .ComponentName.is-stateOfComponent\n\nIf you know CSS well, and you want to optimize this file for speed,\nthen you may want to elide the blank classes, combine equal classes,\ndelete these comments, and ideally also use a CSS preprocessor.\n\n\n## Header, Leader, Footer ##\n\nOur layout has these sections:\n\n  * header\n  * leader, which has first area, main area, last area\n  * footer \n\nThe \"header\" and \"footer\" are the typical HTML5 tags.\n\nThe \"leader\" is our naming convention for the middle area\nthat goes between the header tag and the footer tag.\nWe hope the HTML standard will add a tag for this area.\nSome coders call it \"master container\", or \"body content\",\nor similar names. You can rename \"leader\" if you prefer.\n\nThe leader has these areas:\n\n * first area. This is the left column on a big screen, or the top row on a small screen.\n * The main area. This is the middle center area on any size scren, and it grows to fit.\n * The last area. This is the right column on a big screen, or the bottom row on a small screen.\n\nHTML example:\n\n    \u003cbody class=\"HolyGrail\"\u003e\n      \u003cdiv class=\"HolyGrail-header\"\u003e\n        \u003cheader\u003e...\u003c/header\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"HolyGrail-leader\"\u003e\n        \u003cdiv class=\"HolyGrail-leader-first\"\u003e\u003caside\u003eShow first, at top or left\u003c/aside\u003e\u003c/div\u003e\n        \u003cdiv class=\"HolyGrail-leader-main\"\u003e\u003cmain\u003eShow in main area, in the middle\u003c/main\u003e\u003c/div\u003e\n        \u003cdiv class=\"HolyGrail-leader-last\"\u003e\u003caside\u003eShow last, at bottom or right\u003c/aside\u003e\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"HolyGrail-footer\"\u003e\n        \u003cfooter\u003e...\u003c/footer\u003e\n      \u003c/div\u003e\n    \u003c/body\u003e\n\nWe recommend using the HTML tag `main` for the main area.\n\nWe suggest using the HTML tag `aside` for the first area and laster area,\nunless you feel there is a better tag, such as `nav` for a navigation area.\n\n## Pro Tip for SEO\n\nIf you're building a page that you want to be indexed by search engines,\nthen we suggest you rearrange the leader areas to make the `main` area \ncomes before the `first` area and the `last` area.\n\nExample:\n\n    \u003cdiv class=\"HolyGrail-leader-main\"\u003e\u003cmain\u003eShow in main area, in the middle\u003c/main\u003e\u003c/div\u003e\n    \u003cdiv class=\"HolyGrail-leader-first\"\u003e\u003caside\u003eShow first, at top or left\u003c/aside\u003e\u003c/div\u003e\n    \u003cdiv class=\"HolyGrail-leader-last\"\u003e\u003caside\u003eShow last, at bottom or right\u003c/aside\u003e\u003c/div\u003e\n\n## Pro Tip for optimization\n\nDo you have goals like these?\n\n  * Use a typical \"nav\" section at the top or left side.\n  * Use a typical \"main\" section, and load it high on the page because of SEO.\n  * Use a typical \"aside\" tag at the bottom or right side.\n  * Use each specific HTML tag when possible, rather than using unnessary div tags.\n\nExample:\n\n    \u003cbody class=\"HolyGrail\"\u003e\n      \u003cheader class=\"HolyGrail-header\"\u003e...\u003c/header\u003e\n      \u003cdiv class=\"HolyGrail-leader\"\u003e\n        \u003cmain class=\"HolyGrail-leader-main\"\u003eShow in main area, in the middle\u003c/main\u003e\n        \u003cnav class=\"HolyGrail-leader-first\"\u003eShow first, at top or left\u003c/nav\u003e\n        \u003caside class=\"HolyGrail-leader-last\"\u003eShow last, at bottom or right\u003c/aside\u003e\n      \u003c/div\u003e\n      \u003cfooter class=\"HolyGrail-footer\"\u003e...\u003c/footer\u003e\n    \u003c/body\u003e\n\n## Media queries ##\n\nThe layout uses media queries to enable responsive pages:\n\n * A small screen shows the three areas as rows.\n * A large screen shows the three areas as columns.\n\nWe choose 768 pixels as the start of a large screen size.\n\nIf you prefer different settings, or prefer more than two\nscreen sizes, then you'll want to edit these media queries.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsixarm%2Fsixarm_css_holy_grail_layout_with_flexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsixarm%2Fsixarm_css_holy_grail_layout_with_flexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsixarm%2Fsixarm_css_holy_grail_layout_with_flexbox/lists"}