{"id":13563991,"url":"https://github.com/mattrothenberg/vue-grid-styled","last_synced_at":"2025-04-03T20:32:28.450Z","repository":{"id":41796619,"uuid":"132905880","full_name":"mattrothenberg/vue-grid-styled","owner":"mattrothenberg","description":"Lightweight set of functional grid components","archived":true,"fork":false,"pushed_at":"2022-04-28T19:38:54.000Z","size":1415,"stargazers_count":17,"open_issues_count":18,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-03T13:48:04.844Z","etag":null,"topics":["css","functional","grid","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-grid-styled.netlify.com/","language":"JavaScript","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/mattrothenberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-10T13:42:04.000Z","updated_at":"2023-01-27T21:59:18.000Z","dependencies_parsed_at":"2022-08-11T17:42:07.755Z","dependency_job_id":null,"html_url":"https://github.com/mattrothenberg/vue-grid-styled","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-grid-styled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-grid-styled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-grid-styled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattrothenberg%2Fvue-grid-styled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattrothenberg","download_url":"https://codeload.github.com/mattrothenberg/vue-grid-styled/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223030811,"owners_count":17076508,"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","functional","grid","vue","vuejs"],"created_at":"2024-08-01T13:01:25.324Z","updated_at":"2024-11-04T16:31:37.402Z","avatar_url":"https://github.com/mattrothenberg.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI布局","Components \u0026 Libraries","UI Layout","UI Layout [🔝](#readme)"],"sub_categories":["游览","UI Layout","Tour"],"readme":"# vue-grid-styled\n\n![Npm badge](https://img.shields.io/npm/v/vue-grid-styled.svg)\n\n\u003e Vue.js port of @jxnblk's React library, [grid-styled](https://github.com/jxnblk/grid-styled)\n\n## Installation\n\n```shell\nyarn add vue-grid-styled\n```\n\n## Default Theme\n\n```js\n// Breakpoints\nconst breakpoints = [\"40em\", \"52em\", \"64em\"];\n// @media screen and (min-width: 40em)\n// @media screen and (min-width: 52em)\n// @media screen and (min-width: 64em)\n\n// Typographic Scale (numbers are converted to px values)\nconst fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72];\n\n// Spacing Scale (used for margin and padding)\nconst space = [0, 4, 8, 16, 32, 64, 128, 256, 512];\n```\n\n## Import \u0026 Install\n\n```js\nimport VueGridStyled from \"vue-grid-styled\";\n// OR\nimport { Box, Flex } from \"vue-grid-styled\";\n\n// OPTIONAL: Pass a custom theme\nconst theme = {\n  colors: {\n    red: \"#F22613\"\n  }\n};\n\nVue.use(VueGridStyled, { theme });\n// OR\nVue.component(\"v-box\", Box);\nVue.component(\"v-flex\", Flex);\n```\n\n## Component Usage\n\n`vue-grid-styled` tries to emulate the [grid-styled API](https://github.com/jxnblk/grid-styled#box-) as closely as possible. Check it out for comprehensive documentation.\n\nOne exception is that the `\u003cv-box\u003e` component exposes a `tag` prop that you can use to programatically assign a HTML tag (e.g., \"div\", \"section\").\n\nIn a nutshell, replace the JSX syntax with Vue \"binding\" syntax and you should be good to go! Here are a few clarifying examples.\n\n#### Examples\n\n```jsx\n// Grid-Styled JSX: Pixel Width\n\u003cBox width={256} /\u003e\n```\n\n```html\n\u003c!-- VUE: Pixel Width --\u003e\n\u003cv-box :width=\"256\" tag=\"section\" /\u003e\n```\n\n```jsx\n// JSX: Responsive Widths\n\u003cBox width={[1 / 2, 1 / 3, 1 / 4, 1 / 6]} /\u003e\n```\n\n```html\n\u003c!-- VUE: Responsive widths --\u003e\n\u003cv-box\n  tag=\"main\"\n  :width=\"[\n    1/2,\n    1/3,\n    1/4,\n    1/6\n  ]\"\n/\u003e\n```\n\n```html\n\u003c!-- Altogther now! --\u003e\n\u003cv-flex flexWrap=\"wrap\" maxWidth=\"960px\" mx=\"auto\"\u003e\n  \u003cv-box :width=\"[1, 1/2]\" :px=\"[0, 1]\" :mb=\"2\"\u003e\n    \u003cv-box bg=\"aliceblue\" :py=\"4\"/\u003e\n  \u003c/v-box\u003e\n  \u003cv-box :width=\"[1, 1/2]\" :px=\"[0, 1]\" :mb=\"2\"\u003e\n    \u003cv-box bg=\"aliceblue\" :py=\"4\"/\u003e\n  \u003c/v-box\u003e\n\u003c/v-flex\u003e\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](.github/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattrothenberg%2Fvue-grid-styled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattrothenberg%2Fvue-grid-styled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattrothenberg%2Fvue-grid-styled/lists"}