{"id":26417397,"url":"https://github.com/philmtd/css-fx-layout","last_synced_at":"2026-01-12T00:22:16.871Z","repository":{"id":68653980,"uuid":"194160424","full_name":"philmtd/css-fx-layout","owner":"philmtd","description":"A responsive SCSS flexbox library inspired by Angular Flex-Layout.","archived":false,"fork":false,"pushed_at":"2024-11-22T12:16:05.000Z","size":2641,"stargazers_count":48,"open_issues_count":7,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-26T14:48:43.114Z","etag":null,"topics":["css","css-fx-layout","flex-layout","flexbox","flexbox-layout","flexbox-library","fx-layout","responsive","scss"],"latest_commit_sha":null,"homepage":"https://philmtd.github.io/css-fx-layout/","language":"SCSS","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/philmtd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-06-27T20:40:58.000Z","updated_at":"2025-02-11T00:29:53.000Z","dependencies_parsed_at":"2024-03-29T23:35:50.471Z","dependency_job_id":null,"html_url":"https://github.com/philmtd/css-fx-layout","commit_stats":{"total_commits":56,"total_committers":4,"mean_commits":14.0,"dds":0.4107142857142857,"last_synced_commit":"af61215651e8db1c03358dfcc6fff0b78676ed81"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philmtd%2Fcss-fx-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philmtd%2Fcss-fx-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philmtd%2Fcss-fx-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philmtd%2Fcss-fx-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philmtd","download_url":"https://codeload.github.com/philmtd/css-fx-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244135908,"owners_count":20403798,"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-fx-layout","flex-layout","flexbox","flexbox-layout","flexbox-library","fx-layout","responsive","scss"],"created_at":"2025-03-18T01:01:53.103Z","updated_at":"2026-01-12T00:22:13.575Z","avatar_url":"https://github.com/philmtd.png","language":"SCSS","readme":"# css-fx-layout 📚\n\n![GitHub Actions Test](https://github.com/philmtd/css-fx-layout/actions/workflows/test.yml/badge.svg)\n[![npm version](https://badge.fury.io/js/css-fx-layout.svg)](https://www.npmjs.com/package/css-fx-layout)\n\nThis is a lightweight and modular SCSS flexbox library. It is inspired by Angular's [Flex-Layout](https://github.com/angular/flex-layout) and can replace the\nmost popular functions of the (by now deprecated) Angular library.\n\n**Info:** This library is actively maintained and is already feature-complete, functioning as intended. Future releases will focus primarily on providing bug fixes and addressing similar issues to ensure a smooth user experience.\n\n## Features\n\nThis library gives you the option between using CSS classes or data-attributes. Both options give you the same features but the CSS classes can be more verbose when you want a more complex layout.\n\n**Please refer to the documentation on [https://philmtd.github.io/css-fx-layout](https://philmtd.github.io/css-fx-layout) for a full list of all available selectors and features.**\n\n### HTML data-attribute selectors\n\nUsing the data attributes is the easiest way to use this library and easier to migrate to from Angular Flex-Layout:\n\nFor example css-fx-layout provides attributes like the following, which can be configured through the values passed to them:\n\n* `data-layout` and `data-layout-align`\n* `data-layout-gap`\n* `data-hide-...` and `data-show-...`\n* `data-flex`\n\n### CSS class selectors\n\nUsing the CSS classes is more verbose and the more \"CSS-y\" way of styling your HTML:\n\nFor example css-fx-layout provides classes with naming patterns like:\n\n* `fx-layout-...` and `fx-align-...`\n* `fx-gap-...`\n* `show-...` and `hide-...`\n* `fx-flex-...`\n\n### Responsive API\n\nThe library provides a responsive API which allows to create different layouts for different screen sizes using known breakpoints\nlike `xs`, `sm`, `md`, `lg`, `xl` and including `lt-` and `gt-` variations of them. Please check out the [documentation](https://philmtd.github.io/css-fx-layout/docs/responsive)\nfor details on how to use it.\n\n## Getting started\n\nAdd the library to your project's `package.json`:\n\n```bash\nnpm i -s css-fx-layout\n```\n\nThen follow the [Getting Started](https://philmtd.github.io/css-fx-layout/docs/getting-started) guide in the documentation.\n\n## Examples\n\nThese are just two simple examples how to use `css-fx-layout`. Visit [the examples page](https://philmtd.github.io/css-fx-layout/examples) for more and live-rendered\nexamples.\n\n### Layout\n\n#### Example 1\nThis is the simplest example. It will make the div a flex container and align the three spans in a row:\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003eCSS Classes\u003c/th\u003e\n\u003cth\u003eData Attributes\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```html\n\u003cdiv class=\"fx-layout-row\"\u003e\n    \u003cspan\u003eOne\u003c/span\u003e\n    \u003cspan\u003eTwo\u003c/span\u003e\n    \u003cspan\u003eThree\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u003c/td\u003e     \n\u003ctd\u003e   \n\n```html\n\u003cdiv data-layout=\"row\"\u003e\n    \u003cspan\u003eOne\u003c/span\u003e\n    \u003cspan\u003eTwo\u003c/span\u003e\n    \u003cspan\u003eThree\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\nThe resulting layout:\n\n\u003cimg src=\"images/example-1.png\" alt=\"Example 1\" width=\"280px\" /\u003e\n\n\n#### Example 2\nAn advanced example that aligns the items in reverse order with a gap of four pixels and vertically centered:\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003cth\u003eCSS Classes\u003c/th\u003e\n\u003cth\u003eData Attributes\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n````html\n\u003cdiv class=\"fx-layout-row \n            fx-layout-reverse \n            fx-align--start-x \n            fx-align--x-center \n            fx-gap--4px\"\u003e\n    \u003cspan\u003eOne\u003c/span\u003e\n    \u003cspan\u003eTwo\u003c/span\u003e\n    \u003cspan\u003eThree\u003c/span\u003e\n\u003c/div\u003e\n````\n\n\u003c/td\u003e     \n\u003ctd\u003e   \n\n````html\n\u003cdiv data-layout=\"row reverse\" \n     data-layout-align=\"start center\" \n     data-layout-gap=\"4px\"\u003e\n    \u003cspan\u003eOne\u003c/span\u003e\n    \u003cspan\u003eTwo\u003c/span\u003e\n    \u003cspan\u003eThree\u003c/span\u003e\n\u003c/div\u003e\n````\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\nThe resulting layout:\n\n\u003cimg src=\"images/example-2.png\" alt=\"Example 2\" width=\"280px\" /\u003e\n\n\n## What problem does this library solve?\n\nInitially I created this library because I liked the convenient syntax of Angular Flex-Layout and wanted to use it in non-Angular \nprojects and without JavaScript.\n\nBy now Angular Flex-Layout has been deprecated and this library can be a replacement for most of the popular parts.\n","funding_links":[],"categories":["Angular-Inspired Solutions"],"sub_categories":["Wrappers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilmtd%2Fcss-fx-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilmtd%2Fcss-fx-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilmtd%2Fcss-fx-layout/lists"}