{"id":16931265,"url":"https://github.com/leodido/matrix-layout","last_synced_at":"2025-09-06T19:43:11.391Z","repository":{"id":57292544,"uuid":"84815360","full_name":"leodido/matrix-layout","owner":"leodido","description":"A custom element and a style useful to create responsive and fluid grid layouts","archived":false,"fork":false,"pushed_at":"2017-06-09T09:35:57.000Z","size":24,"stargazers_count":5,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-14T01:20:02.094Z","etag":null,"topics":["customelements","es2015","grid","html5","layout","polymer","style","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leodido.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}},"created_at":"2017-03-13T10:46:49.000Z","updated_at":"2020-09-04T03:20:47.000Z","dependencies_parsed_at":"2022-08-27T16:41:06.925Z","dependency_job_id":null,"html_url":"https://github.com/leodido/matrix-layout","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/leodido/matrix-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodido%2Fmatrix-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodido%2Fmatrix-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodido%2Fmatrix-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodido%2Fmatrix-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leodido","download_url":"https://codeload.github.com/leodido/matrix-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodido%2Fmatrix-layout/sbom","scorecard":{"id":584600,"data":{"date":"2025-08-11","repo":{"name":"github.com/leodido/matrix-layout","commit":"f240aebb7186d334523ab0f1524f821bf6b34e45"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/23 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-20T20:06:47.427Z","repository_id":57292544,"created_at":"2025-08-20T20:06:47.427Z","updated_at":"2025-08-20T20:06:47.427Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273955611,"owners_count":25197579,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["customelements","es2015","grid","html5","layout","polymer","style","webcomponents"],"created_at":"2024-10-13T20:43:36.486Z","updated_at":"2025-09-06T19:43:11.367Z","avatar_url":"https://github.com/leodido.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/leodido/matrix-layout)\n [![NPM](https://img.shields.io/npm/v/matrix-layout.svg?style=flat-square)](https://www.npmjs.com/package/matrix-layout) [![License](https://img.shields.io/badge/license-apache--2.0-yellowgreen.svg?style=flat-square)](http://opensource.org/licenses/Apache-2.0)\n\n# \\\u003cmatrix-layout\\\u003e\n\n\u003e A custom element and a style useful to create responsive and fluid grid layouts.\n\nFor this purpose this package provides a custom element - **matrix-layout** - and a shared style - **matrix-style**.\n\n\u003e The **matrix-layout** is an element wrapping and using **matrix-style** providing responsiveness and frameless mode for your [grid](https://material.io/guidelines/components/grid-lists.html#grid-lists-specs) layouts.\n\nWhile ...\n\n\u003e The **matrix-style** is an helper style useful for creating your own [grid](https://material.io/guidelines/components/grid-lists.html#grid-lists-specs) layouts using CSS custom properties and CSS mixins it provides.\n\nBecause custom properties can be defined inside a `@media` rule, you can customize your grid layout for different **responsive breakpoints**.\n\nFurthermore, since the only assumption it does is that you create a layout to use it, inserting within it some items in the light DOM it is completely decoupled from children elements.\n\nIt does not impose any constraint on child nodes.\n\nSo, you can use any element you want as child item.\n\nSee the [demo](/demo) directory to look at some implementations.\n\n## Installation\n\nOne way to install it is executing `bower install leodido/matrix-layout --save` in your shell.\n\nOr if you prefer `yarn add leodido/matrix-layout --save`, since it is published on [npm](www.npmjs.com/package/matrix-layout) registry also.\n\n## Usage\n\nImport `matrix-style.html` and include **matrix-style** in the style of an element's definition.\n\n```html\n\u003cdom-module id=\"awesome-lattice\"\u003e\n    \u003ctemplate\u003e\n        \u003c!-- Include the style to use the CSS mixins and the CSS variables it provides. --\u003e\n        \u003cstyle include=\"matrix-style\"\u003e\n        \u003c/style\u003e\n    \u003c/template\u003e\n    \u003cslot\u003e\u003c/slot\u003e\n\u003c/dom-module\u003e\n```\n\nThen define the style details of your grid layout via **custom properties** and **mixin**.\n\n```css\n:host {\n    --matrix-columns: 3;\n    --matrix-gutter: 3px;\n    --matrix-item-height: 30px;\n    @apply --matrix-layout;\n}\n```\n\nTo all its slotted children will be applied the `--matrix-item` mixin.\n\nSo use can already use the `\u003cawesome-lattice\u003e` custom element.\n\n```html\n\u003cawesome-lattice\u003e\n    \u003cdiv\u003eAwesome\u003c/div\u003e\n    \u003cdiv\u003eWonderful\u003c/div\u003e\n    \u003cdiv\u003eBeautiful\u003c/div\u003e\n\u003c/awesome-lattice\u003e\n```\n\nThe [demo](/demo) directory contains more comprehensive examples.\n\n### Expansible items\n\nIn many cases, it's useful to expand an item more than 1 column.\n\nWe call such type of items **wide items**.\n\nTo achieve this type of irregular grid layout, first you have to specify within the style of your custom element the number of columns that such items should expand to.\n\nHow? Setting the custom property `--matrix-wide-item-columns`.\n\n```css\n:host {\n  --matrix-wide-item-columns: 3;\n}\n```\n\nTo indicate which item should expand, apply the **CSS mixin** `--matrix-wide-item` ...\n\n```css\n:host ::slotted(.wide) {\n  @apply(--matrix-wide-item);\n}\n```\n\nThis way you can also combine the expansibility of items with responsive breakpoints.\n\nOtherwise simply use the provided **attribute** - i.e., `wide` - on the items in the light DOM.\n\n```html\n\u003cawesome-lattice\u003e\n    \u003cdiv wide\u003eExtensible\u003c/div\u003e\n    \u003cdiv\u003eAwesome\u003c/div\u003e\n    \u003cdiv\u003eWonderful\u003c/div\u003e\n    \u003cdiv\u003eBeautiful\u003c/div\u003e\n    \u003cdiv\u003eHassle Free\u003c/div\u003e\n    \u003cdiv wide\u003eLayout\u003c/div\u003e\n    \u003cdiv\u003eGrid\u003c/div\u003e\n\u003c/awesome-lattice\u003e\n```\n\n### Aspect ratio\n\nSometimes you want that your items maintain a given aspect ratio.\n\nAlso in this case we provide more ways to accomplish this result.\n\nIn any case we first need to setup the aspect ratio.\n\n```css\n:host {\n  --matrix-item-aspect-ratio: calc(16 / 9);\n}\n```\n\nThen we can set the `has-aspect-ratio` **attribute** on our layout element to male **all** the elements respect it.\n\n```html\n\u003cawesome-lattice has-aspect-ratio\u003e\n    ...\n\u003c/awesome-lattice\u003e\n```\n\nAnother approach is to selectively define the items that have to respect the aspect ratio.\n\nOne way to do it is applying the **CSS mixin** - i.e., `--matrix-aspect-ratio-item` - to items we want to keep the choosen aspect ratio.\n\nOtherwise simply use the `aspect-ratio` attribute on any item (in the light DOM) you want ...\n\nThis approaches are more flexible than the previous one since you can choose which items have to maintain the aspect ratio and which not.\n\n### Styling\n\nCustom property                             | Description                                                | Default\n--------------------------------------------|------------------------------------------------------------|------------------\n`--matrix-columns`                          | The number of columns per row.                             | 1\n`--matrix-gutter`                           | The space between two items.                               | 0px\n`--matrix-item-height`                      | The height of the items.                                   | auto\n`--matrix-item-aspect-ratio`                | The aspect ratio of the items.                             | 1\n`--matrix-wide-item-columns`                | The number of columns a wide item should expand to.        | 1\n\nMixin                                       | Description\n--------------------------------------------|--------------------------------------------------------------------------\n`--matrix-layout`                           | The styles to apply to the host we want to become a matrix layout.\n`--matrix-item`                             | The styles to apply to each item.\n`--matrix-wide-item`                        | The styles to apply to wide items (includes `--matrix-item`).\n`--matrix-aspect-ratio-item`                | The styles to apply to items with aspect ratio (includes `--matrix-item`).\n`--matrix-without-space-around`             | The styles to apply to the container within the layout to remove side spaces from it.\n\n---\n\n[![Analytics](https://ga-beacon.appspot.com/UA-49657176-1/matrix-layout?flat)](https://github.com/igrigorik/ga-beacon)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleodido%2Fmatrix-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleodido%2Fmatrix-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleodido%2Fmatrix-layout/lists"}