{"id":22612088,"url":"https://github.com/ryu-man/svelte-layouts","last_synced_at":"2025-04-11T08:52:26.097Z","repository":{"id":57141595,"uuid":"314065170","full_name":"ryu-man/svelte-layouts","owner":"ryu-man","description":"Easily structure your page using components","archived":false,"fork":false,"pushed_at":"2022-01-01T20:10:10.000Z","size":1307,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T06:22:39.018Z","etag":null,"topics":["css","flexbox","grid","html","javascript","layout","svelte"],"latest_commit_sha":null,"homepage":"https://svelte.dev/repl/4a5602981b2c48a9836bb82bbb1a6d58?version=3.50.0","language":"Svelte","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/ryu-man.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}},"created_at":"2020-11-18T21:43:00.000Z","updated_at":"2025-01-12T20:47:07.000Z","dependencies_parsed_at":"2022-09-03T07:40:34.904Z","dependency_job_id":null,"html_url":"https://github.com/ryu-man/svelte-layouts","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Fsvelte-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryu-man","download_url":"https://codeload.github.com/ryu-man/svelte-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248363312,"owners_count":21091328,"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","flexbox","grid","html","javascript","layout","svelte"],"created_at":"2024-12-08T17:09:44.217Z","updated_at":"2025-04-11T08:52:26.072Z","avatar_url":"https://github.com/ryu-man.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n\t\u003cimg alt=\"LAYOUTS\" src=\"./banner.png\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.com/package/svelte-layouts\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/svelte-layouts.svg?style=flat-square\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/ryu-man/layouts/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/svelte-layouts.svg?style=flat-square\" alt=\"license\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Layouts\n\nThis project is an implementation of CSS Flexbox \u0026 Grid for [Svelte](https://svelte.dev/) framework for making it easier for developers to create layouts and build apps faster \n\n## Install\n\n```bash\n// npm\nnpm install svelte-layouts\n\n// yarn\nyarn add svelte-layouts\n```\n\n## Get started\n\nLayouts have four main components: Row, Col (Column) ,Grid and Item\n\n**Row**: a layout with horizontal main-axis, place it items from left to right\n\n**Col**: a layout with vertical main-axis, place it items from top to left\n\n**Grid**: a multi-directional layout, where items can be positione vertically and horizontally\n\n**Item**: a controllable layout item\n\n## Examples\n\n```html\n\u003cscript\u003e\n    import { Row, Col, Grid, Item } from 'svelte-layouts'\n\u003c/script\u003e\n\n// control how elements are positioned horizontally\n\u003cRow justifyContent=\"space-between\"\u003e\n  // Create div element, controled with style property\n  \u003cdiv\u003e\u003c/div\u003e\n\n  // Create an item\n  \u003cItem\u003e\u003c/Item\u003e\n\n  // Create a row item\n  \u003cRow\u003e\u003c/Row\u003e\n\n  // Create a Col item\n  \u003cCol\u003e\u003c/Col\u003e\n\n  // Create a grid item\n  \u003cGrid\u003e\u003c/Grid\u003e\n\u003c/Row\u003e\n\n\u003cCol\u003e\u003c/Col\u003e\n\n// Define the number \u0026 width of rows and columns\n\u003cGrid templateRows=\"auto\" templateCols=\"20vw 1fr\"\u003e\u003c/Grid\u003e\n```\n\n## Responsive Design\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cRow class=\"custom-class\"\u003e\u003c/Row\u003e\n\u003c/div\u003e\n```\n\n```css\n@media (min-width: 1000px) {\n/*\nyou can target .col , .row, .grid, .item, also you can add .layout class to prevent style collision \nor you can target a specific  class provided to the component via it class prop\n.class :global(.class) syntax is recommended to prevent style leakage\n*/\n  .container :global(.row) { \n    /*make sure to use !important to override component's inline style*/\n    background-color: black !important;\n  }\n}\n```\n\n## License\n\nsvelte-layouts is [MIT Licenced](./LICENSE)\n\n## Learn More\n\nif you want to learn more about css flexbox and grid and how they works, you can feel free to check out these useful links:\n\n- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\n- [Flexbox vs Grid](https://dev.to/nadayousry/grid-vs-flexbox-3fbh)\n  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Fsvelte-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryu-man%2Fsvelte-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Fsvelte-layouts/lists"}