{"id":15292574,"url":"https://github.com/saghen/lese","last_synced_at":"2025-04-13T11:12:17.017Z","repository":{"id":57142421,"uuid":"208346139","full_name":"Saghen/lese","owner":"Saghen","description":"Tiny \u003c2kb layout framework for @emotion/styled","archived":false,"fork":false,"pushed_at":"2023-10-18T01:30:14.000Z","size":170,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T11:12:10.248Z","etag":null,"topics":["css","css-in-js","framework","layout","styled-components","web"],"latest_commit_sha":null,"homepage":"","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/Saghen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-09-13T21:02:12.000Z","updated_at":"2023-10-03T19:53:03.000Z","dependencies_parsed_at":"2024-10-20T14:35:47.706Z","dependency_job_id":null,"html_url":"https://github.com/Saghen/lese","commit_stats":{"total_commits":156,"total_committers":3,"mean_commits":52.0,"dds":"0.41025641025641024","last_synced_commit":"0170c481180715567f605831feb5f4abf4c6877a"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saghen%2Flese","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saghen%2Flese/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saghen%2Flese/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saghen%2Flese/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Saghen","download_url":"https://codeload.github.com/Saghen/lese/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703198,"owners_count":21148118,"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","css-in-js","framework","layout","styled-components","web"],"created_at":"2024-09-30T16:18:52.690Z","updated_at":"2025-04-13T11:12:16.997Z","avatar_url":"https://github.com/Saghen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/Dtw886b.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/static/v1?label=coverage\u0026message=100%\u0026color=success\u0026style=flat-square\"\u003e\n  \u003cimg src=\"https://img.shields.io/static/v1?label=version\u0026message=0.5.6\u0026color=blue\u0026style=flat-square\"\u003e\n\u003c/p\u003e\n\n# Lese\n\nEasy to use and lightweight layout framework for @emotion/styled.\n\nLese was inspired after using Laco, an extremely lightweight package for state management, with React. Lese's goal is to provide a powerful set of tools to quickly build layouts in emotion's styled components while being under 2KBs in size when gzipped. The modern flex and grid specifications are excellent. Thus the framework provides very little abstraction on top of these specs and instead provides convenient shorthand properties to make responsive layouts a breeze. The project is in early alpha so bugs and breaking API changes are to be expected between minor releases.\n\n## To-Do\n\n- [x] Base Components\n- [x] Switch to @emotion/styled\n- [x] First Draft of Documentation\n- [X] API Review\n- [X] Add type defintions\n- [x] Convenience functions in helpers to reduce code size\n- [x] Properties for modifying position of flex and grid children\n\n## Features\n\n- 🔥 Extremely lightweight - \u003c2KBs gzipped\n- 📦 Out of the box support for Grid and Flex\n- 🚀 Blazing fast development speed\n\n## How It Works\n\nAll components (aside from image) inherit from the Base component which includes convienence props for responsive sizing, text modification, and sizing. The framework's goal is not to provide a layer of abstraction over the existing css properties (beyond xAlign and yAlign) but rather to provide easy to use short hand properties.\n\n\u003e The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework baked right into the browser - Jen Simmons\n\n## The Future\n\n`lese` is planned to be the underlying framework of a future project called `morre` which will be a comprehensive UI Framework that aims to avoid the pitfalls popular frameworks such as Bootstrap by making custom styling and components using base styles and components easy and maintainable (no more `!important`). Before that project begins, the API for `lese` must be stable.\n\n# API\n\n## Base\n\nContains all of the base props for Flex and Grid components. Possible prop values are as follows:\n\n### `relative: boolean`\n\nShort-hand property for applying `position: relative`\n\n### `padding: string`\n\nShort-hand property for applying `padding`\n\n### `margin: string` \n\nShort-hand property for applying `margin`\n\n## Row/Column\n\nA flex container with `flex-direction: row` or `flex-direction: column` set by default based on the selected element. Includes 3 main abstractions for making flex easier to interact with.\n\n### `xAlign: boolean | string`\n\nBased on the component (Row or Column), xAlign will automatically switch between justify-content (Row) and align-items (Column). Defaults to \"center\" when set to `true`. Otherwise, it passes the string to the appropriate css property.\n\n### `yAlign: boolean | string`\n\nBased on the component (Row or Column), xAlign will automatically switch between align-items (Row) and justify-content (Column). Defaults to \"center\" when set to `true`. Otherwise, it passes the string to the appropriate css property.\n\n### `separation: string | string[]`\n\nBased on the component (Row or Column), separation will use margin-top (Column) or margin-left (Row) on its immediate children on all but the first child using `* + *`. The value of the string will be passed to the appropriate css property. When the value is a single CSS length, such as `8px`, all elements are separated based on this value. When multiple values are provided in the form of a string array or space delimited string, each index will correspond to the separation of one element. Additionally, a rest operator (`...`) can be used anywhere in the string for defaulting a separation value.\n\n```tsx\n() =\u003e (\n  \u003cRow separation=\"8px 12px\"\u003e\n    \u003cdiv\u003ea\u003c/div\u003e\n    {/* Separated by 8px */}\n    \u003cdiv\u003eb\u003c/div\u003e\n    {/* Separated by 12px */}\n    \u003cdiv\u003ec\u003c/div\u003e\n    {/* No separation */}\n    \u003cdiv\u003ed\u003c/div\u003e\n  \u003c/Row\u003e\n)\n```\n\n```tsx\n() =\u003e (\n  \u003cRow separation=\"8px ...10px 12px\"\u003e\n    \u003cdiv\u003ea\u003c/div\u003e\n    {/* Separated by 8px */}\n    \u003cdiv\u003eb\u003c/div\u003e\n    {/* Separated by 10px */}\n    \u003cdiv\u003ec\u003c/div\u003e\n    {/* Separated by 10px */}\n    \u003cdiv\u003ed\u003c/div\u003e\n    {/* Separated by 12px */}\n    \u003cdiv\u003ee\u003c/div\u003e\n  \u003c/Row\u003e\n)\n```\n\n\n### `wrap: boolean | string`\n\nSets the flex-wrap css property. Defaults to \"wrap\" when set to `true`.\n\n## Grid\n\n### `columns: string`\n\nShorthand for `grid-template-columns`\n\n### `rows: string`\n\nShorthand for `grid-template-rows`\n\n### `autoColumns: string`\n\nShorthand for `grid-auto-columns`\n\n### `autoRows: string`\n\nShorthand for `grid-auto-rows`\n\n### `columnGap: string`\n\nShorthand for `grid-column-gap`\n\n### `rowGap: string`\n\nShorthand for `grid-row-gap`\n\n### `gap: string`\n\nShorthand for `grid-gap`\n\n### `xAlign: boolean | string`\n\nShorthand for `justify-items`. Defaults to `center` when set to true.\n\n### `yAlign: boolean | string`\n\nShorthand for `align-items`. Defaults to `center` when set to true.\n\n### `align: boolean | string`\n\nShorthand for `place-items`. Defaults to `center center` when set to true.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaghen%2Flese","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaghen%2Flese","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaghen%2Flese/lists"}