{"id":14990191,"url":"https://github.com/prantlf/holy-grail-layout","last_synced_at":"2026-03-15T09:52:55.072Z","repository":{"id":147938034,"uuid":"619354541","full_name":"prantlf/holy-grail-layout","owner":"prantlf","description":"Provides an extended \"Holy Grail\" layout as a web component.","archived":false,"fork":false,"pushed_at":"2024-07-10T23:10:53.000Z","size":417,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T13:48:19.754Z","etag":null,"topics":["custom-element","element","holy-grail","holy-grail-layout","holygrail","holygrail-layout","html","html-element","layout","web-component","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prantlf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-27T01:05:25.000Z","updated_at":"2023-03-27T21:41:54.000Z","dependencies_parsed_at":"2024-09-24T16:00:44.466Z","dependency_job_id":null,"html_url":"https://github.com/prantlf/holy-grail-layout","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.2666666666666667,"last_synced_commit":"ff7cd5726b70d4f565c09cc4f432dc2f9cf5b225"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Fholy-grail-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Fholy-grail-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Fholy-grail-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantlf%2Fholy-grail-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prantlf","download_url":"https://codeload.github.com/prantlf/holy-grail-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243380826,"owners_count":20281839,"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":["custom-element","element","holy-grail","holy-grail-layout","holygrail","holygrail-layout","html","html-element","layout","web-component","webcomponent"],"created_at":"2024-09-24T14:19:40.865Z","updated_at":"2025-12-26T09:36:19.343Z","avatar_url":"https://github.com/prantlf.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Holy-Grail Layout\n\n[![npm](https://img.shields.io/npm/v/holy-grail-layout)](https://www.npmjs.com/package/holy-grail-layout#top)\n![Dependency status](https://img.shields.io/librariesio/release/npm/holy-grail-layout)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/holy-grail-layout)\n\nProvides an extended \"Holy Grail\" layout as a [web component].\n\nFeatures:\n\n* Lightweight (graph 2.88 kB minified, 1.34 kB gzipped, 1.14 kB brotlied)\n* [Custom Element Manifest]\n* [IntelliSense](#intellisense) for VS Code\n\n## Synopsis\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript defer src=https://unpkg.com/holy-grail-layout@2.0.0/dist/index.min.js\u003e\u003c/script\u003e\n    \u003choly-grail\u003e\n      \u003cheader slot=\"head\" style=\"background: #ffcdd2\"\u003eHead\u003c/header\u003e\n      \u003cnav slot=\"nav-top\" style=\"background: #bbdefb\"\u003eTop Nav\u003c/nav\u003e\n      \u003cmain slot=\"main\" style=\"background: #dcedc8\"\u003eMain\u003c/main\u003e\n      \u003cnav slot=\"nav-bottom\" style=\"background: #bbdefb\"\u003eBottom Nav\u003c/nav\u003e\n      \u003caside slot=\"side-start\" style=\"background: #e1bee7\"\u003eStart Side\u003c/aside\u003e\n      \u003caside slot=\"side-end\" style=\"background: #e1bee7\"\u003eEnd Side\u003c/aside\u003e\n      \u003cfooter slot=\"foot\" style=\"background: #ffecb3\"\u003eFoot\u003c/footer\u003e\n    \u003c/holy-grail\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003choly-grail\u003e\n  \u003cheader slot=\"head\"\u003e...\u003c/header\u003e\n  \u003cnav slot=\"nav-top\"\u003e...\u003c/nav\u003e\n  \u003cmain slot=\"main\"\u003e...\u003c/main\u003e\n  \u003cnav slot=\"nav-bottom\"\u003e...\u003c/nav\u003e\n  \u003caside slot=\"side-start\"\u003e...\u003c/aside\u003e\n  \u003caside slot=\"side-end\"\u003e...\u003c/aside\u003e\n  \u003cfooter slot=\"foot\"\u003e...\u003c/footer\u003e\n\u003c/holy-grail\u003e\n\u003cscript defer src=https://unpkg.com/holy-grail-layout@2.0.0/dist/index.min.js\u003e\u003c/script\u003e\n```\n\n![Complete Layout](doc/complete-collapsed.png)\n\n## Installation\n\nMake sure that you have installed [Node.js]. Use your favourite package manager ([NPM], [Yarn] or [PNPM]) to add the `holy-grail-layout` module to your project. Add `-D` on the command line if you use a bundler:\n\n```\nnpm i holy-grail-layout\nyarn add holy-grail-layout\npnpm i holy-grail-layout\n```\n\nIf you write a plain HTML page, insert the `holy-grail-layout` script pointing either to CDN or to the local filesystem:\n\n```html\n\u003cscript src=https://unpkg.com/holy-grail-layout@2.0.0/dist/index.min.js\u003e\u003c/script\u003e\n\u003cscript src=node_modules/holy-grail-layout/dist/index.min.js\u003e\u003c/script\u003e\n```\n\n## Elements\n\n### holy-grail\n\nThe custom element `holy-grail` renders a \"Holy Grail\" layout in its shadow root and populates its parts from teh corresponding slots.\n\n```html\n\u003choly-grail\u003e...\u003c/holy-grail\u003e\n```\n\n#### Attributes\n\n| Name | Type   | Description                                                                                            |\n|------|--------|--------------------------------------------------------------------------------------------------------|\n| size | string | Disables the responsive behaviour by forcing the screen width to be detected as `small`, `medium` or `large`. |\n\nThe width breakpoint between `small` and `medium` sizes is `480px`. The width breakpoint between `medium` and `large` sizes is `768px`.\n\n#### Slots\n\n| Name       | Description                                                                                   |\n|------------|-----------------------------------------------------------------------------------------------|\n| head       | Topmost horizontal slot, as wide as the whole element, as high as its content.                |\n| nav-top    | A horizontal slot above the \"main\" slot, as wide as the \"main\" slot, as high as its content.  |\n| main       | A large slot in the middle of the element, fills the rest of width and height of the element. |\n| nav-bottom | A horizontal slot below the \"main\" slot, as wide as the \"main\" slot, as high as its content.  |\n| side-start | A vertical slot on the left side(in the left-to-right text-writing direction) with an explicit width (25% of the element by default), as high as the content between the \\\"head\\\" and \\\"foot\\\" slots. The width can be customised by a style using the part \\\"side-start\\\" in the selector. |\n| side-end   | A vertical slot on the right side (in the left-to-right text-writing direction) with an explicit width (25% of the element by default), as high as the content between the \\\"head\\\" and \\\"foot\\\" slots. The width can be customised by a style using the part \\\"side-end\\\" in the selector. |\n| foot       | Bottommost horizontal slot, as wide as the whole element, as high as its content.             |\n\n### Styles\n\nCSS variables `--holy-grail-side-start-width` and `--holy-grail-side-end-width` can be used to set the widths of the slots `side-start` and `side-end`. The default values are `25%`.\n\n```css\nholy-grail {\n  --holy-grail-side-start-width: 33%;\n}\n```\n\nParts `main`, `side-start` and `side-end` can be used for advanced styling of the stretchable slots of the layout:\n\n```css\nholy-grail::part(side-start) {\n  width: 33%;\n}\n```\n\n#### Examples\n\nAll slots populated, screen wider than 767px, see [the source](example/complete.html):\n\n```html\n\u003choly-grail\u003e\n  \u003cheader slot=\"head\"\u003e...\u003c/header\u003e\n  \u003cnav slot=\"nav-top\"\u003e...\u003c/nav\u003e\n  \u003cmain slot=\"main\"\u003e...\u003c/main\u003e\n  \u003cnav slot=\"nav-bottom\"\u003e...\u003c/nav\u003e\n  \u003caside slot=\"side-start\"\u003e...\u003c/aside\u003e\n  \u003caside slot=\"side-end\"\u003e...\u003c/aside\u003e\n  \u003cfooter slot=\"foot\"\u003e...\u003c/footer\u003e\n\u003c/holy-grail\u003e\n```\n\n![Complete Layout, Large](doc/complete-expanded.png)\n\nAll slots populated, screen wider than 479px, but narrower than 768px:\n\n![Complete Layout, Middle](doc/complete-middle.png)\n\nAll slots populated, screen narrower than 480px:\n\n![Complete Layout, Small](doc/complete-small.png)\n\nOnly some slots populated, screen wider than 767px, see [the source](example/partial.html):\n\n```html\n\u003choly-grail\u003e\n  \u003cheader slot=\"head\"\u003e...\u003c/header\u003e\n  \u003cnav slot=\"nav-top\"\u003e...\u003c/nav\u003e\n  \u003cmain slot=\"main\"\u003e...\u003c/main\u003e\n  \u003cnav slot=\"nav-bottom\"\u003e...\u003c/nav\u003e\n  \u003caside slot=\"side-start\"\u003e...\u003c/aside\u003e\n\u003c/holy-grail\u003e\n```\n\n![Partial Layout, Large](doc/partial-expanded.png)\n\nOnly some slots populated, screen wider than 479px, but narrower than 768px:\n\n![Partial Layout, Middle](doc/partial-middle.png)\n\nOnly some slots populated, screen narrower than 480px:\n\n![Partial Layout, Small](doc/partial-small.png)\n\n## IntelliSense\n\nThe language support in the VS Code editor can offer auto-completion and hover information for custom elements. To enable this feature for custom elements in this package, insert the following property to `settings.json`:\n\n```json\n\"html.customData\": [\"node_modules/holy-grail-layout/dist/html-custom-data.json\"]\n```\n\nYou will need to restart the VS Code to have this change applied.\n\n## License\n\nCopyright (c) 2023 Ferdinand Prantl\n\nLicensed under the MIT license.\n\n[web component]: https://developer.mozilla.org/en-US/docs/Web/Web_Components\n[Custom Element Manifest]: https://github.com/webcomponents/custom-elements-manifest#readme\n[Web Worker]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API\n[Node.js]: https://nodejs.org/\n[NPM]: https://docs.npmjs.com/cli/npm\n[Yarn]: https://classic.yarnpkg.com/docs/cli/\n[PNPM]: https://pnpm.js.org/pnpm-cli\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantlf%2Fholy-grail-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprantlf%2Fholy-grail-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantlf%2Fholy-grail-layout/lists"}