{"id":13394361,"url":"https://github.com/queckezz/veel","last_synced_at":"2025-05-15T21:34:20.589Z","repository":{"id":57391379,"uuid":"96200308","full_name":"queckezz/veel","owner":"queckezz","description":"Base react styling components using fela with a design system","archived":false,"fork":false,"pushed_at":"2017-08-31T13:35:15.000Z","size":527,"stargazers_count":26,"open_issues_count":1,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T10:49:46.789Z","etag":null,"topics":["css-in-js","design-systems","fela","react","styled-system"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/queckezz.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-04T09:24:27.000Z","updated_at":"2023-07-08T10:44:46.000Z","dependencies_parsed_at":"2022-08-25T18:42:05.507Z","dependency_job_id":null,"html_url":"https://github.com/queckezz/veel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fveel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fveel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fveel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Fveel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/queckezz","download_url":"https://codeload.github.com/queckezz/veel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254425577,"owners_count":22069200,"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-in-js","design-systems","fela","react","styled-system"],"created_at":"2024-07-30T17:01:17.077Z","updated_at":"2025-05-15T21:34:20.314Z","avatar_url":"https://github.com/queckezz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n![logo](./logo.png)\n\n# veel [![NPM version][version-image]][version-url] [![Js Standard Style][standard-image]][standard-url]\n\n:package: Base React styling components using [`Fela`](http://fela.js.org) with a [design system](https://github.com/jxnblk/styled-system)\n\n* **Low-Level** - Exposes only a few components which can be used as a base layer to build your UI components upon\n* **Consistency** - Uses `styled-system` which encourages consistency of spacing, typography and color\n* **Universal** - By using fela it's really easy to prerender your styles on the server or anywhere\n\n```\nnpm install veel\n```\n\n```js\nconst Badge = (props) =\u003e (\n  \u003cBox\n    m={2}\n    fontSize={2}\n    bg='tomato'\n    css={{ textDecoration: 'underline' }}\n    {...props}\n  /\u003e\n)\n```\n\n## Contents\n\n* [Example](#example)\n* [Usage](#usage)\n* [Components](#components)\n  + [Box](#box)\n  + [Flex](#flex)\n* [Plugins](#plugins)\n  + [Recommend plugins](#recommend-plugins)\n* [Author](#author)\n\n## Example\n\nThe following renders a responsive row with two equally divided divs collapsing on mobile.\n\n![Example](./example.gif)\n\n```js\nconst CenteredBox = props =\u003e (\n  \u003cBox\n    p={2}\n    w={[1, 0.5]}\n    css={{ height: '50%' }}\n    {...props}\n  /\u003e\n)\n\nconst App = () =\u003e (\n  \u003cFlex\n    wrap\n    align='center'\n    css={{ height: '100vh' }}\n  \u003e\n    \u003cCenteredBox bg='lightblue'\u003e1\u003c/CenteredBox\u003e\n    \u003cCenteredBox color='white' bg='blue'\u003e2\u003c/CenteredBox\u003e\n  \u003c/Flex\u003e\n)\n```\n\n## Usage\n\n1. Create a [`fela`](http://fela.js.org/docs/api/fela-native/createRenderer.html) renderer.\n\n```js\nimport { createRenderer } from 'veel'\nconst renderer = createRenderer()\n```\n\n2. Wrap your application in a `StyleProvider` so that each `veel` component has access to the renderer and the optional theme.\n\n```js\nimport { StyleProvider, Box } from 'veel'\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cStyleProvider={renderer}\u003e\n        \u003cBox is='h1' fontSize={2}\u003eApplication\u003c/Box\u003e\n      \u003c/StyleProvider\u003e\n    )\n  }\n}\n```\n\n3. Now you need some way of injecting the generated css into the html. There are many ways to do it, each with their positive and negative aspects.\n\n**Injecting the css dynamically**\n```js\nrequire('inject-css')(renderer.renderToString())\n```\n\n**Render to a sheet list ([Next.js](http://ghub.io/next) example)**\n\nThis makes the most sense when you create the document skeleton with JSX.\n\n```js\nimport Document, { Head } from 'next/document'\n\nclass CustomDocument extends Document {\n  static getInitialProps ({ renderPage }) {\n    const page = renderPage()\n    const sheets = renderer.renderToSheetList()\n    renderer.clear()\n    return { ...page, sheets }\n  }\n\n  render () {\n    const sheets = this.props.sheets\n    return (\n      \u003cHead\u003e\n        {sheets.map(({ type, media, css }) =\u003e (\n          \u003cstyle data-fela-type={type} media={media}\u003e{css}\u003c/style\u003e\n        ))}\n      \u003c/Head\u003e\n\n      ...\n    )\n  }\n}\n```\n\n4. You're done!\n\n## Components\n\n### Box\n\n```js\n\u003cBox w={1}\u003eHello Veel!\u003c/Box\u003e\n```\n\nThe core layout component. Take a look at [`styled-system`](https://github.com/jxnblk/styled-system/blob/master/README.md) for documentation on `\u003cBox /\u003e` `props`.\n\n#### `Box.is`\n\nBy default a `\u003cBox /\u003e` component will render out to a `div`. You can change the tag by providing an `is` property.\n\n### Flex\n\n```js\n\u003cFlex wrap center /\u003e\n```\n\n[View the example](./demo/src/index.js) on how to use it.\n\n#### `Flex.center`\n\nSets both `alignItems` and `justifyContent` to `center`.\n\n#### `Flex.wrap`\n\nSets `flexWrap` to `wrap`.\n\n#### `Flex.column`\n\nSets `flexDirection` to `column`.\n\n#### `Flex.justify`\n\nCSS `justifyContent` property.\n\n#### `Flex.align`\n\nCSS `alignItem` property.\n\n#### `Flex.order`\n\nCSS `order` property.\n\n## Plugins\n\nBy using fela you have a wide variety of plugins available. Check out the [plugin list](http://fela.js.org/docs/introduction/Ecosystem.html#plugins)\n\n### Recommend plugins\n\n* [**`fela-plugin-embedded`**](https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-embedded) - Inline keyframes and font-faces\n\n```js\n\u003cBox css={{\n  animationName: {\n  '0%': { color: 'red ' },\n  '100%': { color: 'blue' }\n  },\n}} /\u003e\n\n// -\u003e { animationName: 'k1' }\n```\n\n## Author\n\n**veel** © [Fabian Eichenberger](https://github.com/queckezz), Released under the [MIT](./license) License.\u003cbr\u003e\nAuthored and maintained by Fabian Eichenberger with help from contributors ([list](https://github.com/queckezz/veel/contributors)).\n\n\u003e GitHub [@queckezz](https://github.com/queckezz) · Twitter [@queckezz](https://twitter.com/queckezz)\n\n[version-image]: https://img.shields.io/npm/v/veel.svg?style=flat-square\n[version-url]: https://npmjs.org/package/veel\n\n[standard-image]: https://img.shields.io/badge/code-standard-brightgreen.svg?style=flat-square\n[standard-url]: https://github.com/feross/standard\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueckezz%2Fveel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueckezz%2Fveel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueckezz%2Fveel/lists"}