{"id":24062133,"url":"https://github.com/leeboyin/vue-layout-system","last_synced_at":"2025-04-23T13:19:01.403Z","repository":{"id":44732622,"uuid":"365423270","full_name":"LeeBoYin/vue-layout-system","owner":"LeeBoYin","description":"A pack of Vue components that solve daily layout problems","archived":false,"fork":false,"pushed_at":"2022-05-09T02:56:59.000Z","size":5173,"stargazers_count":36,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-23T13:18:55.526Z","etag":null,"topics":["column","component","flex","grid","layout","list","row","vue"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/LeeBoYin.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":"2021-05-08T05:03:16.000Z","updated_at":"2025-01-19T19:31:07.000Z","dependencies_parsed_at":"2022-08-27T16:41:35.522Z","dependency_job_id":null,"html_url":"https://github.com/LeeBoYin/vue-layout-system","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeBoYin%2Fvue-layout-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeBoYin%2Fvue-layout-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeBoYin%2Fvue-layout-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeBoYin%2Fvue-layout-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeeBoYin","download_url":"https://codeload.github.com/LeeBoYin/vue-layout-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250439295,"owners_count":21430824,"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":["column","component","flex","grid","layout","list","row","vue"],"created_at":"2025-01-09T08:20:04.428Z","updated_at":"2025-04-23T13:19:01.387Z","avatar_url":"https://github.com/LeeBoYin.png","language":"SCSS","funding_links":[],"categories":["UI Layout [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Layout"],"readme":"# Vue Layout System\n\n[![npm (scoped)](https://img.shields.io/npm/v/vue-layout-system.svg)](https://www.npmjs.com/package/vue-layout-system)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://leeboyin.github.io/vue-layout-system/logo.png\"\u003e\u003c/p\u003e\n\nVue Layout System is a pack of Vue components that solve daily layout problems.\n\nLightweight and no dependencies.\n\nPlease check out the [Documentation Website](https://leeboyin.github.io/vue-layout-system/) for demo and more information.\n\n## Overview\n\nVue Layout System lets you intuitively arrange your components. Simply drop your contents into slots, configure options with props, Vue Layout system will take care of all CSS challenges for you.\n\nWith Vue Layout System developers are empowered to\n\n- Create various types of layout with much shorter developing time\n- Arrange contents faster in a intuitive and predictable way\n- Control space between contents precisely with system-wide consistency\n\n![](https://leeboyin.github.io/vue-layout-system/layout_highlight.gif)\n\n## Layout Components\n\nVue Layout System is a pack of Vue components, where each one layout component solves one specific problem while sharing similar pattern with the others.\n\n- [LayoutAbsolute](https://leeboyin.github.io/vue-layout-system/components/LayoutAbsolute.html) lets you place contents at 9 absolute positions in a relative position element.\n- [LayoutAlign](https://leeboyin.github.io/vue-layout-system/components/LayoutAlign.html) lets you align contents both horizontally and vertically.\n- [LayoutColumns](https://leeboyin.github.io/vue-layout-system/components/LayoutColumns.html) divide a space evenly into columns, arranging contents into the columns in order.\n- [LayoutFlexColumn](https://leeboyin.github.io/vue-layout-system/components/LayoutFlexColumn.html) divides a vertical space into 3 sections, where you can place contents at top, bottom and the remaining space.\n- [LayoutFlexRow](https://leeboyin.github.io/vue-layout-system/components/LayoutFlexRow.html) divides a horizontal space into 3 sections, where you can place contents at left, right and the remaining space.\n- [LayoutGrid](https://leeboyin.github.io/vue-layout-system/components/LayoutGrid.html) divides a horizontal space into a number of columns evenly, helps align elements based on sequenced columns and rows.\n- [LayoutList](https://leeboyin.github.io/vue-layout-system/components/LayoutList.html) arranges contents vertically.\n- [LayoutListInline](https://leeboyin.github.io/vue-layout-system/components/LayoutListInline.html) arranges contents horizontally.\n\n## Spacing System\n\nVue Layout System uses a finite set of spacing scales for all spacing needs, such as padding around the contents and gaps between contents. This is a vital foundation for consistent and precise control of the spacing.\n\nThe default spacing scales are integers from `0` to `10`, You can easily customize the spacing scales by using either Sass variables or CSS custom properties. See more details in [Customize](https://leeboyin.github.io/vue-layout-system/customize/).\n\n![](https://leeboyin.github.io/vue-layout-system/spacing_system.png)\n\n## Installation\n\n### JavaScript Package Manager \nThe preferred way to use Vue Layout System is to install via JavaScript package manager.\n\n#### Install via npm\n```shell script\nnpm install vue-layout-system\n```\n\n#### Add to Vue\n```javascript\nimport vueLayoutComponents from 'vue-layout-system';\nimport 'vue-layout-system/dist/vue-layout-system.css';\n\nnew Vue({\n\tcomponents: {\n\t\t...vueLayoutComponents,\n\t}\n});\n```\n\n### CDN\nAlternatively, if your project doesn't have a build process, you can load Vue Layout System directly off of a CDN. Note that you need to load Vue before loading Vue Layout System into your project.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-layout-system\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-layout-system/dist/vue-layout-system.css\"\u003e\n\n\u003cdiv id=\"app\"\u003e\n\t\u003c!-- Note that components use kebab-case when installed with CDN --\u003e\n\t\u003clayout-list\u003e\n\t\t...\n\t\u003c/layout-list\u003e\n\u003c/div\u003e\n```\n\nTo learn how layout components work, please check out the [Documentation Website](https://leeboyin.github.io/vue-layout-system/) for demo and more information.\n\n## Contributing\nFor any question or feature request please feel free to create an [issue](https://github.com/LeeBoYin/vue-layout-system/issues/new) or [pull request](https://github.com/LeeBoYin/vue-layout-system/pulls).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleeboyin%2Fvue-layout-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleeboyin%2Fvue-layout-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleeboyin%2Fvue-layout-system/lists"}