{"id":18994021,"url":"https://github.com/cipherlogs/layerzs","last_synced_at":"2025-04-22T12:47:03.185Z","repository":{"id":222875565,"uuid":"757970166","full_name":"cipherlogs/layerzs","owner":"cipherlogs","description":"Higher level toolkits for creating robust modern web designs fast.","archived":false,"fork":false,"pushed_at":"2024-02-17T14:28:21.000Z","size":550,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-17T01:36:17.887Z","etag":null,"topics":["css","frontend","js","nextjs","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":null,"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/cipherlogs.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":"2024-02-15T11:11:55.000Z","updated_at":"2025-01-12T21:25:47.000Z","dependencies_parsed_at":"2024-11-08T17:30:41.366Z","dependency_job_id":"20cc7430-2201-4ccc-9b20-3a85598280c5","html_url":"https://github.com/cipherlogs/layerzs","commit_stats":null,"previous_names":["cipherlogs/layerzs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Flayerzs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Flayerzs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Flayerzs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Flayerzs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cipherlogs","download_url":"https://codeload.github.com/cipherlogs/layerzs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250243347,"owners_count":21398327,"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","frontend","js","nextjs","reactjs","tailwindcss"],"created_at":"2024-11-08T17:23:50.299Z","updated_at":"2025-04-22T12:47:03.089Z","avatar_url":"https://github.com/cipherlogs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" width=\"100%\"\u003e\n  \u003cimg width=\"25%\" src=\"https://layerzs.tixte.co/r/layerzs.jpeg\" alt=\"Layerzs\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eLayerzs\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\nUser-friendly API that makes web design and development simpler. \u003cbr /\u003e\nIt's available as either \u003cstrong\u003eTailwind\u003c/strong\u003e classes or\n\u003cstrong\u003eReact\u003c/strong\u003e components.\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://twitter.com/cipherlogs\"\u003e\u003cimg alt=\"X (formerly Twitter) Follow\" src=\"https://img.shields.io/twitter/follow/cipherlogs?style=flat\"\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/work_is_still_in_progress-WIP-green?style=flat\" alt=\"WIP\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/cipherlogs/layerzs\" alt=\"License\"\u003e\n\u003c/p\u003e\n\n------\n\n\u003cbr /\u003e\n\n## How does it work?\nLayerzs offers sophisticated layers for various tasks such as layout design,\nsizing, alignment, typography, table creation, effects, and more. To get a\nbetter understanding of how Layerzs is constructed, let's use flexbox as an\nexample:\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig0-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig0-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig0-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\n+ **API Layers:**\n    + **Layer1:** This is a basic layer that supports the next layer. You usually won't use it directly, but it's necessary for Layer2 to function.\n\n    + **Layer2:** This is a more advanced layer built on Layer1. It lets you create layouts quickly and easily. It can switch between CSS grid and CSS flexbox automatically, so you don't need to worry about the details. This combination creates a powerful and universal API.\n\n    + **Niche Layers:** These are built on Layer2. They're used to build components and more complex user interfaces.\n\n\n\u003e [!CAUTION]\n\u003e\n\u003e Each new layer in the API is designed to replace the previous one. This\n\u003e means if you're using Layer2, you won't need to use Layer1 or the base\n\u003e layer. This is a key principle of our design. If a new layer doesn't make\n\u003e the previous one obsolete, it's not a good abstraction. That's why our\n\u003e top-level components are built with Layer2. They're not bloated like\n\u003e other UI libraries, and they're easy to read, edit, and modify.\n\n\n**Note:** Please read the [discussion](https://github.com/cipherlogs/layerzs/discussions/1) and vote for what you believe is best.\n\n\u003cbr /\u003e\n\n**Next, we'll compare using flexes to using flexbox. Keep in mind that flexes is just Layer1. In practice, you'll be using Layer2 and above.**\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## The Base Layer\nThe base layer is what you're already using, whether you write vanilla CSS,\nCSS in JS, or use tailwind classes. The same rules still apply.\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/figg1-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/figg1-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/figg1-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\nBefore using it, you need to understand the main axis, the cross axis, and how\nthey change. This is great for beginners, but for advanced users it is\ninefficient and a waste of time.\n\n**Does Layerzs offer a better solution?**\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## The First Layer\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/figs2-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/figs2-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/figs2-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n### Getting Started\nIn the first layer, we'll be using *flexes*. This simplifies things by\nremoving unnecessary details and extra work from the base layer.\n\nStart by installing *flexes*:\n\n```bash\n$ npm -i flexes\n```\n\nThis version of flexes uses tailwind as the **base layer**, so ensure tailwind\nis installed. Then, import and initialize flexes:\n\n```js\nimport flex from \"flexes\";\n\nfunction App() {\n  const {cls, f} = flex ();\n\n  return (\u003c\u003e\u003c/\u003e);\n}\n```\n\nHere, `f` contains the entire flexes API, and `cls` is a utility that helps us\nmanage and run all tailwind classes and layerzs utils.\n\n\n#### cls\n\n`cls` removes tailwind duplicates and conflicts, and helps organize long\ntailwind class sets. It can also include variables and functions.\n\n```js\nclassName={cls(\"hover:p-2 hover:p-4\")} // → 'hover:p-4'\n```\n\nIt also assists in organizing lengthy sets of Tailwind classes.\n\nInstead of this:\n\n```js\nclassName=\"relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\"\n```\n\nYou could break it down to small sets that makes sense to you\n\n```jsx\nclassName={cls(\n  \"relative inline-flex items-center justify-center\",\n  \"rounded-md p-2 text-gray-400\",\n  \"hover:bg-gray-700 hover:text-white\",\n  \"focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\",\n)}\n```\n\nYou can also include variables and functions,\n\n```jsx\nconst display = \"flex\";\nconst background = (color = \"black\") =\u003e\n    color === \"black\"\n    ? \"bg-black\"\n    : \"bg-white\";\n\n...\n\n\u003cdiv className={cls(display, background,)}\u003e\u003c/div\u003e\n\u003cdiv className={cls(display, background(\"white\"),)}\u003e\u003c/div\u003e\n\u003cdiv className={cls(display, \"border border-dashed\")}\u003e\u003c/div\u003e\n```\n\n### Creating a container\nTo create a flex box container using flexes, label the parent as a box and its\nchildren as items.\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box)}\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n#### Box API\n\u003e **box(direction, wrap, orders)**\n\u003e\n\u003e + direction (*optional*): \"row\", \"col\" (*default* = \"row\")\n\u003e\n\u003e + wrap (*optional*): enable wrap (*default* = false)\n\u003e\n\u003e + orders (*optional*): (*default* = items are ordered automatically)\n\n### Dealing with nested containers\nOften, you'll need to create a container that's also an item. In this case,\nyou need to help flexes understand the nesting level you're at. Simply use\n`f.lastItem`.\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box)}\u003e\n    \u003cdiv className={cls(f.item, f.box)}\u003e\n      \u003cp\u003eChild 1\u003c/p\u003e\n      \u003cdiv className={cls(f.item)}\u003eSub child 1\u003c/div\u003e\n      \u003cdiv className={cls(f.lastItem)}\u003eSub child 2\u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv className={cls(f.lastItem)}\u003e\n      \u003cp\u003eChild 2\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n**Note:** to use this featuer, switch to the *dev* branch.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### Alignments\nFlexes is straightforward. It operates with only two fixed axes. These axes don't change, which makes understanding things very simple.\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig3-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig3-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig3-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\nFor example, if you want to center an item along the X-axis, it will be\ncentered along the X-axis regardless of the flex direction or other factors.\nIt will always be centered along the X-axis.\n\nUnlike flexbox, where many behaviors depend on various factors that you always\nhave to remember, flexes is different. Its API is like a strict rule that\nnever changes, making it really easy to understand and figure out. Let's try\nusing the *center* utility and see how it works in two different situations.\n\u003cbr /\u003e\n\n\u003cins\u003eNote:\u003c/ins\u003e When you use center, it's like using both centerX and centerY\nat once. This means it will center along both the X-axis and the Y-axis.\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig4-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig4-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig4-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box, center)}\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n\u003cbr /\u003e\n\nBy default, the API targets the **container**. To target an **item**, we add\n'i' to any method we want. So instead of using 'center', we'll use item center\n'iCenter'.\n\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig5-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig5-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig5-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box)}\u003e\n    \u003cdiv className={cls(f.item, f.iCenter(3))}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\nThat's interesting, flexbox doesn't have `justify-self` **how's *flexes*\ncapable of centering an item along the X-axis when direction is row?**\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### Order\nFlexes automatically manages the arrangement of items. If you need to change\nthe order of a specific item, you can use 'iShift'.\n\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig6-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig6-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig6-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box)}\u003e\n    \u003cdiv className={cls(f.item, f.iShift(2))}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n#### iShift API\n\u003e **iShift(n)**\n\u003e\n\u003e + n: (*default* = 0)\n\u003e\n\u003e   + if n \u003e 0 -\u003e shift to the right by n (if direction is col, it will shift\n\u003e       to the bottom)\n\u003e\n\u003e   + if n \u003c 0 -\u003e shift to the left by n (if direction is col, it will shift\n\u003e       to the top)\n\u003e\n\u003e   + if n == 0 -\u003e no mouvement\n\n\nSometimes, you might want to set a custom order. Here's an example:\n\n```css\n.item:nth-child(3n+1) { order: 1; }\n.item:nth-child(3n+2) { order: 2; }\n.item:nth-child(3n)   { order: 3; }\n```\n\nYou can create a custom order and use it with flex.\n\n```jsx\nconst orders = {\n  // \"start, step\": order\n  \"1, 3\": 1,\n  \"2, 3\": 2,\n  \"3, 3\": 3,\n};\n\n\u003cdiv className={cls(f.box(\"col\", true, orders))}\u003e...\u003c/div\u003e\n```\n\nIn the second layer, you can't set a custom order. Instead, you get access to\na higher level API that lets you do more without worrying about low-level\ndetails.\n\nTo learn more, check out the [API](./flexesAPI.md)\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### Orientation\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig7-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig7-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig7-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box, flip)}\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n\n#### flip API\n\u003e **flip(mode)**\n\u003e\n\u003e  it will flip the direction, but only if wrap in on, if wrap is off and you\n\u003e  want to flip the direction, use `flip(\"dir\")`\n\u003e\n\nThe reverse function changes the direction but keeps the layout the same. It\nlooks like the item orders are reversed. To only reverse the direction, use\n*flip (\"dir\")*, or just *flip* if wrap is on.\n\n**Note:** Please take a moment to [vote \u0026uarr;](https://github.com/cipherlogs/layerzs/discussions/1) on upcoming API changes.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### Spacing\nYou can manage spacing from the **container** globally using autoGap. There\nare 4 modes: none, around, between, even, and a fallback value if the mode\ncan't be used.\n\nExample:\n+ *autoGap (\"around\")*\n+ *autoGap (\"even\", \"gap-2\")*\n+ *autoGap (\"none\", \"gap-x-2 gap-y-2\")*\n\n\nIf you don't provide a fallback, a gap of `gap-2` will be used.\n\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig8-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig8-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig8-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box, f.autoGap)}\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n#### autoGap API\n\u003e **autoGap(mode, fallback)**\n\u003e  + mode:\n\u003e    + \"none\"\n\u003e    + \"around\"\n\u003e    + \"even\"\n\u003e    + \"between\"\n\u003e\n\u003e  + fallback: any value you want using tailwind classes (*default* gap-1)\n\n\nTo control the spacing of each item, use *iSpace*. It can do two things:\n\nIn order to control the spacing of each **item**, you can use *iSpace*. to\ninstruct it to do two things\n\n+ Decide what to do when there's extra space:\n    + Either add that space inside the item. **Inject**\n    + Or put that space after, before or around the item. **Put**\n\n+ Decide what to do when there's no space left (by default items will shrink). You can stop this or control how fast each item shrinks compared to others.\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://layerzs.tixte.co/r/fig9-dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://layerzs.tixte.co/r/fig9-light.png\"\u003e\n     \u003cimg alt=\"Tailwind CSS\" src=\"https://layerzs.tixte.co/r/fig9-light.png\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\n\n```jsx\n\u003c\u003e\n  \u003cdiv className={cls(f.box)}\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 1\u003c/div\u003e\n    \u003cdiv className={cls(f.item, f.iSpace(\"inject\"))}\u003eChild 2\u003c/div\u003e\n    \u003cdiv className={cls(f.item)}\u003eChild 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/\u003e\n```\n\n#### iSpace API\n\u003e **iSpace(arg1, arg2)**\n\u003e  + arg1: what to do when there's available free space\n\u003e    + \"inject\"\n\u003e      + iSpace(\"inject\"), or explicitly add the amount iSpace(\"inject\", 4)\n\u003e\n\u003e    + \"put\"\n\u003e      + \"putBefore\"\n\u003e      + \"putAfter\"\n\u003e      + \"putAround\"\n\u003e\n\u003e  + arg2: what to do when there's no avilable free space (*default* shrink)\n\u003e    + control the amount of shrinking\n\u003e      + `iSpace(\"inject\", 1, 2)`\n\u003e      + `iSpace(\"putAround\", 2)`\n\u003e\n\u003e    + stop shrinking\n\u003e      + `iSpace(\"inject\", 1, 0)`\n\u003e      + `iSpace(\"putAround\", 0)`\n\u003e\n\n\u003cbr /\u003e\n\nThis compact API lets you do everything you could with flexbox, and more.\n\nKeep in mind, the next layer built on top of this should only use Layer1 and\nshould render this layer obsolete. You've seen how simple and seamless it is\nto work with flexbox using Layer1. **But what about Layer2, which is the layer\nyou'll actually be using?**\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## What's coming next?\nStar this repository to receive updates on upcoming changes and join the discussion! [discussion](https://github.com/cipherlogs/layerzs/discussions/1)\n\nPlease vote for what you believe is best.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipherlogs%2Flayerzs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcipherlogs%2Flayerzs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipherlogs%2Flayerzs/lists"}