{"id":16278667,"url":"https://github.com/pixelass/contour","last_synced_at":"2025-04-07T21:19:19.225Z","repository":{"id":42571726,"uuid":"428226795","full_name":"pixelass/contour","owner":"pixelass","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-24T20:16:04.000Z","size":645,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T18:12:30.378Z","etag":null,"topics":["column","compound-grid","flexbox","grid","layout","material-design","material-ui"],"latest_commit_sha":null,"homepage":"https://contour-rust.vercel.app/","language":"TypeScript","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/pixelass.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null}},"created_at":"2021-11-15T10:56:58.000Z","updated_at":"2025-03-22T05:00:15.000Z","dependencies_parsed_at":"2022-08-20T17:10:20.367Z","dependency_job_id":null,"html_url":"https://github.com/pixelass/contour","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fcontour","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fcontour/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fcontour/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fcontour/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelass","download_url":"https://codeload.github.com/pixelass/contour/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478152,"owners_count":20945258,"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","compound-grid","flexbox","grid","layout","material-design","material-ui"],"created_at":"2024-10-10T18:59:22.117Z","updated_at":"2025-04-07T21:19:19.202Z","avatar_url":"https://github.com/pixelass.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contour\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./resources/contour-logo.png\" alt=\"Contour Logo\" width=\"200px\"/\u003e\u003c/p\u003e\n\n[![Issues](https://img.shields.io/github/issues/pixelass/contour?style=for-the-badge)](https://github.com/pixelass/contour/issues)\n[![Forks](https://img.shields.io/github/forks/pixelass/contour?style=for-the-badge)](https://github.com/pixelass/contour/network/members)\n[![Stars](https://img.shields.io/github/stars/pixelass/contour?style=for-the-badge)](https://github.com/pixelass/contour/stargazers)\n\n[![License](https://img.shields.io/github/license/pixelass/contour?style=for-the-badge)](https://github.com/pixelass/contour/blob/main/LICENSE)\n\n## Give your App some contour\n\nContour offers a set of components, hooks and utility functions, that help give your app some\ncontour.\nWe recommend keeping your layout contour at a minimum. If you feel that you have to adjust Contour's\ncore components, then this is either the wrong tool or you're overthinking it.\n\nContour was built to allow a KISS solution for layout. It closely follows the recommendations of\n[material design](https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins)\nand can be used in [combination with Material-ui](https://contour-rust.vercel.app/?path=/story/examples-with-other-libraries--material-ui)\nor similar libraries with ease.\n\nRead more about the core values of Contour: https://contour-rust.vercel.app/?path=/story/introduction--page\n\n## Why should I use this instead of Material UI's Grid?\n\nWe love [Material-ui](https://mui.com) but the [Grid](https://mui.com/components/grid/#main-content)\nimplementation doesn't satisfy our expectations.\n\nWith [v5](https://mui.com/blog/mui-x-v5/) Material-ui added a lot of improvements. Contour picked up\nsome beautiful parts of their API, the Grid however still has several disadvantages.\n\nContour is built for nesting, it inherits valuable information from its ancestor components.  \n**Read more about it here:** https://contour-rust.vercel.app/?path=/story/introduction--page#inheritance-of-column-count\n\nFurthermore, contour allows you to switch between `grid` and `flex`.  \n**Read more about it here:** https://contour-rust.vercel.app/?path=/story/introduction--page#grid-vs-flexbox\n\nContour has been going through a long process of prototyping. Over ten similar systems taught us\nhow to build the ~~perfect~~ Grid (don't say perfect, it suggests that you gave up on improvement).\n\nThe main idea existed long before Material-design existed, and we are happy that some smart people\ncame to the same conclusion as us.\n\nThe latest versions of the prototypes are built on css-variables. Due to this, we were able to keep\nthe CSS logic at a minimum. The Core idea was built in only 11 lines of CSS.\n\nWatch a video about the core of this library:\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://youtu.be/Os6f2m8VDGU?t=1463\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"./resources/cssday.jpg\" alt=\"Contour Logo\" width=\"200px\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Next Generation Grid System\n\n| version                                    | description               |\n|:-------------------------------------------|:--------------------------|\n| [![contour react][contour-badge]][contour] | The core components       |\n| [![contour theme][theme-badge]][theme]     | Theming tools             |\n| [![contour utils][utils-badge]][utils]     | Utilities tools and types |\n| [![contour hooks][hooks-badge]][hooks]     | Hooks to enhance contour  |\n\n\n\n[contour-badge]: https://img.shields.io/npm/v/@contour/react?style=for-the-badge\n[theme-badge]: https://img.shields.io/npm/v/@contour/theme?style=for-the-badge\n[hooks-badge]: https://img.shields.io/npm/v/@contour/utils?style=for-the-badge\n[utils-badge]: https://img.shields.io/npm/v/@contour/hooks?style=for-the-badge\n[contour]: https://www.npmjs.com/package/@contour/react\n[theme]: https://www.npmjs.com/package/@contour/theme\n[utils]: https://www.npmjs.com/package/@contour/utils\n[hooks]: https://www.npmjs.com/package/@contour/hooks\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelass%2Fcontour","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelass%2Fcontour","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelass%2Fcontour/lists"}