{"id":18519780,"url":"https://github.com/reasonml-community/bs-glamor","last_synced_at":"2025-04-09T09:32:18.158Z","repository":{"id":85336756,"uuid":"94030957","full_name":"reasonml-community/bs-glamor","owner":"reasonml-community","description":"BuckleScript bindings for glamor","archived":false,"fork":false,"pushed_at":"2018-12-22T23:22:29.000Z","size":70,"stargazers_count":84,"open_issues_count":0,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T10:15:41.907Z","etag":null,"topics":["bucklescript-bindings","glamor","reasonml"],"latest_commit_sha":null,"homepage":null,"language":"OCaml","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/reasonml-community.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}},"created_at":"2017-06-11T20:47:45.000Z","updated_at":"2024-04-23T16:05:27.109Z","dependencies_parsed_at":null,"dependency_job_id":"7c29ffcb-bfec-407a-a794-e1f99e27bf70","html_url":"https://github.com/reasonml-community/bs-glamor","commit_stats":null,"previous_names":["poeschko/bs-glamor"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reasonml-community%2Fbs-glamor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reasonml-community%2Fbs-glamor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reasonml-community%2Fbs-glamor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reasonml-community%2Fbs-glamor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reasonml-community","download_url":"https://codeload.github.com/reasonml-community/bs-glamor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248012532,"owners_count":21033218,"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":["bucklescript-bindings","glamor","reasonml"],"created_at":"2024-11-06T17:17:22.792Z","updated_at":"2025-04-09T09:32:17.861Z","avatar_url":"https://github.com/reasonml-community.png","language":"OCaml","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bs-glamor – [BuckleScript](https://github.com/bucklescript/bucklescript) bindings for [glamor](https://github.com/threepointone/glamor)\n\nThe API is still **experimental**. Only a few functions from glamor such as `css` and `global` are exposed; other functions such as `renderStatic` are not supported yet.\n\n## Installation\n\n```sh\nnpm install --save bs-glamor\n```\n\nIn your `bsconfig.json`, include `\"bs-glamor\"` in the `bs-dependencies`.\n\n## Usage\n\nThe following examples (in [Reason](http://reasonml.github.io) syntax) assume that `Glamor` is included in the namespace:\n\n```reason\nopen Glamor;\n```\n\n* Simple styling:\n\n    ```reason\n    css([\n        color(\"red\"),\n        border(\"1px solid black\")\n    ])\n    ```\n\n* Styling with selectors (`@media`, `:hover`, `\u0026`, etc.):\n\n    ```reason\n    css([\n        color(\"red\"),\n        Selector(\"@media (min-width: 300px)\", [\n            color(\"green\")\n        ])\n    ])\n    ```\n\n* Selectors can be nested:\n\n    ```reason\n    css([\n        color(\"red\"),\n        Selector(\"@media (min-width: 300px)\", [\n            color(\"green\"),\n            Selector(\"\u0026 .foo\", [\n                color(\"blue\")\n            ])\n        ])\n    ])\n    ```\n\nYou can isolate inclusion of the `Glamor` namespace in the following way:\n\n```reason\nGlamor.(css([color(\"red\")]))\n```\n\nThe result of the `css` function can be assigned to a class name, e.g. in JSX:\n\n```reason\n\u003cdiv className=(css([color(\"red\")])) /\u003e\n```\n\nYou can also combine stylings with a class names. For example, if you want to use\nsome classes from third-party libraries (e.g. Bootstrap), or just to add a class name\nfor testing purposes along with glamor styles:\n\n```reason\n\u003cdiv className=(\"btn \" ^ css([color(\"red\")])) /\u003e\n```\n\n### Merging CSS rules\n\nYou can merge CSS rules using `merge`:\n\n```reason\nlet text_primary = css([color(\"indigo\")]);\nlet small = css([fontSize(\"10px\")]);\n\n\u003cp className=(merge([text_primary, small])) /\u003e\n```\n\nglamor will make sure that rules are merged in the correct order, managing nesting and precedence for you.\n\n### Global CSS\n\n You can define global CSS rules with `global`:\n\n ```reason\n Glamor.(global(\"body\", [margin(\"0px\")]));\n Glamor.(global(\"h1, h2, h3\", [color(\"palegoldenrod\")]));\n ```\n\n### Keyframes\n\nDefine animation keyframes:\n\n```reason\nlet bounce = Glamor.keyframes([\n  (\"0%\", [transform(\"scale(0.1)\"), opacity(\"0\")]),\n  (\"60%\", [transform(\"scale(1.2)\"), opacity(\"1\")]),\n  (\"100%\", [transform(\"scale(1)\")])\n]);\nlet styles = css([\n    animationName(bounce),\n    animationDuration(\"2s\"),\n    width(\"50px\"),\n    height(\"50px\"),\n    backgroundColor(\"red\")\n]);\n\n\u003cdiv className=styles\u003ebounce!\u003c/div\u003e\n```\n\n## Example\n\nSee [reason-react-tictactoe](https://github.com/poeschko/reason-react-tictactoe) for a live example.\n\n## Development\n\n```sh\nnpm run start\n```\n\n### Tests\n\nThere are some simplistic tests using [bs-jest](https://github.com/BuckleTypes/bs-jest).\n\n```sh\nnpm run test\n```\n\n## Thanks\n\nThanks to [reason-react-example](https://github.com/chenglou/reason-react-example), [reason-react](https://github.com/reasonml/reason-react), and [bs-jest](https://github.com/BuckleTypes/bs-jest) for inspiration how to create a Reason library, and of course, thanks to [glamor](https://github.com/threepointone/glamor).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freasonml-community%2Fbs-glamor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freasonml-community%2Fbs-glamor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freasonml-community%2Fbs-glamor/lists"}