{"id":13495646,"url":"https://github.com/rescriptbr/ancestor","last_synced_at":"2025-03-28T16:33:04.437Z","repository":{"id":37893096,"uuid":"391342075","full_name":"rescriptbr/ancestor","owner":"rescriptbr","description":":skull:  UI primitives for ReScript and React","archived":true,"fork":false,"pushed_at":"2024-01-27T14:49:57.000Z","size":23951,"stargazers_count":154,"open_issues_count":9,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-31T10:36:50.280Z","etag":null,"topics":["css","design-system","react","reactjs","rescript","rescript-react","ui","ui-primitives"],"latest_commit_sha":null,"homepage":"https://ancestor.netlify.app","language":"ReScript","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/rescriptbr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-31T11:52:14.000Z","updated_at":"2024-07-01T18:37:01.000Z","dependencies_parsed_at":"2024-01-15T19:16:47.093Z","dependency_job_id":"41bc505c-c623-4303-a1db-01827a6c6321","html_url":"https://github.com/rescriptbr/ancestor","commit_stats":null,"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Fancestor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Fancestor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Fancestor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rescriptbr%2Fancestor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rescriptbr","download_url":"https://codeload.github.com/rescriptbr/ancestor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246063141,"owners_count":20717750,"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","design-system","react","reactjs","rescript","rescript-react","ui","ui-primitives"],"created_at":"2024-07-31T19:01:36.707Z","updated_at":"2025-03-28T16:33:04.041Z","avatar_url":"https://github.com/rescriptbr.png","language":"ReScript","funding_links":[],"categories":["ReScript"],"sub_categories":[],"readme":"\u003e ⚠️ **DISCLAIMER**: Considering the recent changes in the use of CSS in JS with runtime and also the maintenance and adaptation effort of this project to align with the direction the ecosystem is taking in the use of CSS in JS, especially with the advent of RSC and frameworks like Remix and Next, this repository is no longer maintained. Furthermore, there are excellent solid options in the JS ecosystem such as Chakra UI, Panda CSS, and Tailwind that satisfactorily meet requirements and work well with ReScript through bindings.\n\n\u003cp align=\"center\"\u003e  \n  \u003cimg src=\"https://raw.githubusercontent.com/rescriptbr/ancestor/master/assets/ancestor-logo.svg\" /\u003e \n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ca target=\"_blank\" href=\"https://ancestor.netlify.app\"\u003e Docs \u003c/a\u003e //\n    \u003ca target=\"_blank\" href=\"https://ancestor.netlify.app/docs/getting-started\"\u003e Getting Started \u003c/a\u003e //\n  \u003ca target=\"_blank\" href=\"https://github.com/rescriptbr\"\u003e ReScript Brazil Community \u003c/a\u003e\n \u003c/p\u003e\n\n# Introduction\n\n**Ancestor** is a suite of components that works as layout primitives to develop high-quality \nweb apps, design systems, and style guides focused on responsiveness.\n\n## What and Why?\nEvery front-end project that is using libraries based on components like [React](https://reactjs.org), faces the same situation: \n**Choose or develop a UI library to develop the interfaces.**\n\nIn some cases, you can use libraries like [Chakra UI](https://chakra-ui.com/), [Material UI](https://material-ui.com/pt/), or\n[Ant Design](https://material-ui.com/pt/) that delivers a set of styled components (grids, buttons, inputs, selects, etc) \nand a lot of other utility functions and components for your web app.\n\nHowever, in some cases, the team needs to create its own design system or style guide with a design language, colors, fonts, buttons, inputs\nand other specifications created by a design team. In this case, the usage of a library like Material UI or Chakra UI might \nnot be the best choice, because depends on a lot of customizations or changes to adapt the library to the design specification.\n\nIt was the reason that we created Ancestor: **to act as a foundation for your project or design system.**\n\n## Features\n\n### Unstyled 💀\n\nDifferent from popular libraries like Material UI, we don't deliver styled components with colors, fonts, borders, etc. \nAll Ancestor's components are **layout primitives** with support to a lot of CSS properties like padding, margin, height, width, etc.\n\n### Responsiveness 💡\nAll properties from Ancestor's components are responsive, which makes it easy to develop interfaces that need to support multiple devices. \nThrough the **breakpoints** defined by the library, you can change the appearance of a component in a specific device or screen size.\n\n### Consistent design 🎨\nWe don't deliver styled components, but we care about design consistency, especially when dealing with spacing, borders, etc.\n\n### Customizable ⚙️\n\nAll properties from Ancestor's components and parameters are customizable: \nBreakpoints, spacing, radius, grid columns, etc which makes it easy to customize and adapt Ancestor to your design system or style guide.\n\n## Installation\n\n\n\u003e ⚠️ **DISCLAIMER**: We're working on a new version of Ancestor bringing a complete set of UI tools for ReScript. The most stable version is @rescriptbr/ancestor@0.0.8 and you can install by following the instructions below. Don't forget to install the most stable version, there are unstable pre-release versions that might not work as expected since they're pre-releases.\n\nFirst off, install **Ancestor** using npm/yarn:\n\n```sh title=\"Terminal\"\nyarn add @rescriptbr/ancestor@0.8.0\n```\n\nIf you want to use the default setup, you need to install [Emotion](https://emotion.sh).\n\n```sh title=\"Terminal\"\nyarn add @emotion/css\n```\n\nAdd the package to `bs-dependencies` in your `bsconfig.json`:\n\n```json title=\"bsconfig.json\"\n{\n\"bs-dependencies\": [\n  \"@rescript/react\",\n  \"@rescriptbr/ancestor\"\n ]\n}\n\n```\n\n## Basic usage\n\n```rescript\nopen Ancestor.Default\n\n@react.component\nlet make = () =\u003e {\n  \u003cGrid height=[#xs(100.0-\u003e#pct)]\u003e\n    \u003cBox\n      flexDirection=[#xs(#column), #md(#row)]\n      p=[xxs(6), md(12), lg(8)]\n      position=[#xs(#relative)]\n      columns=[#xs(#12), #md(#6)]\n    \u003e\n      \u003cBox\n        flexGrow=[#xs(#num(1.0))]\n        width=[#xs(15.0-\u003e#rem), #md(20.0-\u003e#rem)]\n      \u003e\n        \u003cLogo /\u003e\n      \u003c/Box\u003e\n      \u003cBox flexGrow=[#xs(#num(3.0))] pt=[xxs(4)]\u003e\n        \u003ch1\u003e\n          {\"A place to share knowledge\"-\u003eReact.string}\n        \u003c/h1\u003e\n        \u003cp\u003e\n          {\"Where good ideas find you.\"-\u003eReact.string}\n        \u003c/p\u003e\n      \u003c/Box\u003e\n      \u003cBox\n        position=[#xs(#absolute)]\n        bottom=[#xs(-5.0-\u003e#rem)]\n        left=[#xs(-5.0-\u003e#rem)]\n      \u003e\n          ....\n      \u003c/Box\u003e\n    \u003c/Box\u003e\n  \u003c/Grid\u003e\n}\n\n```\n\n_Example from [ReScript Conduit](https://github.com/rescriptbr/rescript-conduit/blob/master/src/pages/Signin/Signin.res)_\n\n## Documentation\n\nCheck out the [official documentation](https://ancestor.netlify.app).\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescriptbr%2Fancestor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frescriptbr%2Fancestor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frescriptbr%2Fancestor/lists"}