{"id":13575355,"url":"https://github.com/luncheon/flex-splitter-directive","last_synced_at":"2025-06-18T09:35:16.385Z","repository":{"id":35206569,"uuid":"215292310","full_name":"luncheon/flex-splitter-directive","owner":"luncheon","description":"Dead simple panes splitter control based on flexbox. JS + CSS \u003c 1kB (gzipped) with no dependencies.","archived":false,"fork":false,"pushed_at":"2025-02-10T23:47:19.000Z","size":268,"stargazers_count":27,"open_issues_count":2,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T14:58:06.947Z","etag":null,"topics":["split-layout","split-pane","splitter","vanilla-js"],"latest_commit_sha":null,"homepage":"https://luncheon.github.io/flex-splitter-directive/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luncheon.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-10-15T12:23:40.000Z","updated_at":"2024-12-02T04:36:22.000Z","dependencies_parsed_at":"2025-04-06T10:45:25.880Z","dependency_job_id":"6ed0508a-5262-4f16-bc65-7caf3c983104","html_url":"https://github.com/luncheon/flex-splitter-directive","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/luncheon/flex-splitter-directive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fflex-splitter-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fflex-splitter-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fflex-splitter-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fflex-splitter-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luncheon","download_url":"https://codeload.github.com/luncheon/flex-splitter-directive/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fflex-splitter-directive/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260527938,"owners_count":23022851,"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":["split-layout","split-pane","splitter","vanilla-js"],"created_at":"2024-08-01T15:01:00.291Z","updated_at":"2025-06-18T09:35:11.365Z","avatar_url":"https://github.com/luncheon.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# flex-splitter-directive\n\nDead simple panes splitter control based on flexbox.\n\n[Demo](https://luncheon.github.io/flex-splitter-directive/)\n\n* **Declarative.**  \n  Just add an attribute to the DOM element. Don't need to write any JavaScript.\n* **Lightweight.**  \n  JS + CSS ~ 1.2kB (gzipped) with no dependencies.\n\n\n## Installation\n\n### [npm](https://www.npmjs.com/package/flex-splitter-directive) (with a module bundler)\n\n```sh\n$ npm i flex-splitter-directive\n```\n\n```js\nimport \"flex-splitter-directive\"\nimport \"flex-splitter-directive/styles.min.css\"\n```\n\n### CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/flex-splitter-directive))\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.5.1/styles.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.5.1\"\u003e\u003c/script\u003e\n```\n\n### Download Directly\n\n* [index.js](https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.5.1/index.js)\n* [styles.min.css](https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.5.1/styles.min.css)\n\n\n## Usage\n\n1. Load CSS and JS.\n2. Set `data-flex-splitter-horizontal` (or `data-flex-splitter-vertical` for vertical) attribute to the parent element of the panes.\n    * Optionally, specify the `keyboard-movement` option, as in `data-flex-splitter-horizontal=\"keyboard-movement:10\"`.\n3. Insert `\u003cdiv role=\"separator\" tabindex=\"1\"\u003e\u003c/div\u003e` between each pane.\n4. Set the following styles for each pane as required:\n    * `width` / `height` for the initial size.\n    * `min-width` / `min-height` for the minimum size.\n    * `max-width` / `max-height` for the maximum size.\n    * `flex: auto` for filling space.\n\n\n## License\n\n[WTFPL](http://www.wtfpl.net/)\n\n\n## Other vanilla-js panes splitters\n\n* [Split (nathancahill/split)](https://github.com/nathancahill/split)\n* [Splitter (andrienko/splitter)](https://github.com/andrienko/splitter)\n* [SplitMe (alesgenova/split-me)](https://github.com/alesgenova/split-me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fflex-splitter-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluncheon%2Fflex-splitter-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fflex-splitter-directive/lists"}