Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rescriptbr/ancestor
:skull: UI primitives for ReScript and React
https://github.com/rescriptbr/ancestor
css design-system react reactjs rescript rescript-react ui ui-primitives
Last synced: 5 days ago
JSON representation
:skull: UI primitives for ReScript and React
- Host: GitHub
- URL: https://github.com/rescriptbr/ancestor
- Owner: rescriptbr
- Archived: true
- Created: 2021-07-31T11:52:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-27T14:49:57.000Z (9 months ago)
- Last Synced: 2024-08-01T19:56:12.156Z (3 months ago)
- Topics: css, design-system, react, reactjs, rescript, rescript-react, ui, ui-primitives
- Language: ReScript
- Homepage: https://ancestor.netlify.app
- Size: 22.8 MB
- Stars: 154
- Watchers: 2
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> ⚠️ **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.
Docs //
Getting Started //
ReScript Brazil Community
# Introduction
**Ancestor** is a suite of components that works as layout primitives to develop high-quality
web apps, design systems, and style guides focused on responsiveness.
## What and Why?
Every front-end project that is using libraries based on components like [React](https://reactjs.org), faces the same situation:
**Choose or develop a UI library to develop the interfaces.**
In some cases, you can use libraries like [Chakra UI](https://chakra-ui.com/), [Material UI](https://material-ui.com/pt/), or
[Ant Design](https://material-ui.com/pt/) that delivers a set of styled components (grids, buttons, inputs, selects, etc)
and a lot of other utility functions and components for your web app.
However, in some cases, the team needs to create its own design system or style guide with a design language, colors, fonts, buttons, inputs
and other specifications created by a design team. In this case, the usage of a library like Material UI or Chakra UI might
not be the best choice, because depends on a lot of customizations or changes to adapt the library to the design specification.
It was the reason that we created Ancestor: **to act as a foundation for your project or design system.**
## Features
### Unstyled 💀
Different from popular libraries like Material UI, we don't deliver styled components with colors, fonts, borders, etc.
All Ancestor's components are **layout primitives** with support to a lot of CSS properties like padding, margin, height, width, etc.
### Responsiveness 💡
All properties from Ancestor's components are responsive, which makes it easy to develop interfaces that need to support multiple devices.
Through the **breakpoints** defined by the library, you can change the appearance of a component in a specific device or screen size.
### Consistent design 🎨
We don't deliver styled components, but we care about design consistency, especially when dealing with spacing, borders, etc.
### Customizable ⚙️
All properties from Ancestor's components and parameters are customizable:
Breakpoints, spacing, radius, grid columns, etc which makes it easy to customize and adapt Ancestor to your design system or style guide.
## Installation
> ⚠️ **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/[email protected] 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.
First off, install **Ancestor** using npm/yarn:
```sh title="Terminal"
yarn add @rescriptbr/[email protected]
```
If you want to use the default setup, you need to install [Emotion](https://emotion.sh).
```sh title="Terminal"
yarn add @emotion/css
```
Add the package to `bs-dependencies` in your `bsconfig.json`:
```json title="bsconfig.json"
{
"bs-dependencies": [
"@rescript/react",
"@rescriptbr/ancestor"
]
}
```
## Basic usage
```rescript
open Ancestor.Default
@react.component
let make = () => {
#pct)]>
#rem), #md(20.0->#rem)]
>
{"A place to share knowledge"->React.string}
{"Where good ideas find you."->React.string}
#rem)]
left=[#xs(-5.0->#rem)]
>
....
}
```
_Example from [ReScript Conduit](https://github.com/rescriptbr/rescript-conduit/blob/master/src/pages/Signin/Signin.res)_
## Documentation
Check out the [official documentation](https://ancestor.netlify.app).
## License
MIT