{"id":15047046,"url":"https://github.com/henriquecustodia/fuux","last_synced_at":"2025-04-10T00:50:46.998Z","repository":{"id":57238172,"uuid":"75721068","full_name":"henriquecustodia/fuux","owner":"henriquecustodia","description":" :cyclone: :sunglasses: flexbox library to create amazing layouts ","archived":false,"fork":false,"pushed_at":"2018-10-22T21:41:10.000Z","size":133,"stargazers_count":9,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-20T09:41:30.160Z","etag":null,"topics":["css","flexbox","flexbox-library"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/henriquecustodia.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}},"created_at":"2016-12-06T10:31:20.000Z","updated_at":"2023-03-17T14:38:19.000Z","dependencies_parsed_at":"2022-08-26T15:11:46.634Z","dependency_job_id":null,"html_url":"https://github.com/henriquecustodia/fuux","commit_stats":null,"previous_names":["henriquecustodia/flex-boy"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquecustodia%2Ffuux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquecustodia%2Ffuux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquecustodia%2Ffuux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriquecustodia%2Ffuux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henriquecustodia","download_url":"https://codeload.github.com/henriquecustodia/fuux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137998,"owners_count":21053775,"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","flexbox","flexbox-library"],"created_at":"2024-09-24T20:53:59.604Z","updated_at":"2025-04-10T00:50:46.973Z","avatar_url":"https://github.com/henriquecustodia.png","language":"CSS","funding_links":[],"categories":["Libraries and Frameworks"],"sub_categories":["[Sketching with CSS](http://www.sketchingwithcss.com) Flexbox Guide by [@sfioritto](https://github.com/sfioritto)"],"readme":"\n\u003cdiv align=\"center\"\u003e\n   \u003cimg src=\"https://github.com/henriquecustodia/flex-boy/blob/master/fuux.gif\" width=\"300px\" height=\"300px\"\u003e\n\u003c/div\u003e\n\n# Fuux \n:cyclone: :sunglasses: flexbox library to create amazing layouts \n \n## Features\n* Writes all using just css classes\n* Support to ``flex-direction``, ``justify-content``, ``align-items``, ``flex-wrap`` and ``flex-basis``.\n    * support to other properties is under development.\n* Support to responsive classes\n* Support for [autoprefixer](https://github.com/postcss/autoprefixer)\n\n## How to install \n``npm install --save fuux``\n\n## Get started\n```html\n\u003cdiv class=\"green fx-column fx-15 fx-center\"\u003e\n    \u003cspan\u003eSidenav\u003c/span\u003e\n\u003c/div\u003e\n    \n\u003cdiv class=\"fx-column fx-85\"\u003e\n\n     \u003cdiv class=\"coral fx-10 fx-center\"\u003e\n        \u003cspan\u003eToolbar\u003c/span\u003e \n    \u003c/div\u003e\n\n    \u003cdiv class=\"blue fx-90 fx-center\"\u003e\n        \u003cspan\u003eContent\u003c/span\u003e \n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\nThe result is:\n\n![alt tag](https://github.com/henriquecustodia/flex-boy/blob/master/images/example.png)\n\n\u003e The code above you can see [here](https://github.com/henriquecustodia/flex-boy/blob/master/examples/basic.html).\n\n## Documentation\n\n### Basic \n**Fuux** is purely [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes), so everything you can do with Flexbox, you can do with Fuux!\n\nThe basic structure to do anything:\n\n```html\n\u003cdiv class=\"fx-row|fx-column\"\u003e\n     \u003cdiv class=\"fx-100\" \u003e\u003c/div\u003e\n\u003c/div\u003e \n```\n\n### API Reference\nAll Fuux's classes always starts with `fx` prefix. \n\n#### Directions\n\n##### ``fx-column``\n```css\n   flex-direction: column\n```\n\n##### ``fx-row``\n```css\n   flex-direction: row\n```\n\n#### Wrap\n\n##### ``fx-wrap``\n```css\n    flex-wrap: wrap \n```\n\n#### Alignment\n\n##### ``fx-start`` or ``fx-start-start``\n```css\n   justify-content: flex-start\n   align-items: flex-start\n```\n\n##### ``fx-start-center``\n```css\n   justify-content: flex-start\n   align-items: center\n```\n\n##### ``fx-start-end``\n```css\n   justify-content: flex-start\n   align-items: flex-end\n```\n\n##### ``fx-center-start``\n```css\n   justify-content: center\n   align-items: flex-start\n```\n\n##### ``fx-center`` or ``fx-center-center``\n```css\n   justify-content: center\n   align-items: center\n```\n\n##### ``fx-center-end``\n```css\n   justify-content: center\n   align-items: flex-end\n```\n\n##### ``fx-end-start``\n```css\n   justify-content: flex-end\n   align-items: flex-start\n```\n\n##### ``fx-end-center``\n```css\n   justify-content: flex-end\n   align-items: center\n```\n\n##### ``fx-end`` or ``fx-end-end``\n```css\n   justify-content: flex-end\n   align-items: flex-end\n```\n\n#### Basis\nThe Fuux's basis are values from 5 to 100 (Multiples of five)\n\nFor example: \n##### ``fx-5``\n```css\n    flex-basis: 5%\n```\nOr \n##### ``fx-100``\n```css\n    flex-basis: 100%\n```\n\n### Responsive\n\nFuux uses prefixes to manage which classes should be used for each resolution.\n\n#### Usage\nAdd the responsive prefix to the classes to use on specific resolution, for example:\n\n``fx-[responsive prefix]-[property]`` \n\u003e fx-md-center\n\n#### Responsive Table\n\n\u003ctable\u003e\n   \u003ctr\u003e\n     \u003cth\u003ePrefix\u003c/th\u003e\n     \u003cth\u003eMedia\u003c/th\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n       \u003ctd\u003exs\u003c/td\u003e\n       \u003ctd align=\"center\"\u003e (max-width: 599px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n       \u003ctd\u003egt-xs\u003c/td\u003e\n       \u003ctd align=\"center\"\u003e (min-width: 600px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003esm\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 600px)  and (max-width: 959px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003egt-sm\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 960px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003emd\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 960px)  and (max-width: 1279px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003egt-md\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 1280px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003elg\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 1280px)  and (max-width: 1919px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003egt-lg\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 1920px) \u003c/td\u003e\n   \u003c/tr\u003e\n   \u003ctr\u003e\n      \u003ctd\u003exl\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e(min-width: 1920px)  and (max-width: 5000px) \u003c/td\u003e\n   \u003c/tr\u003e\n\u003c/table\u003e\n\n## How to run\nTo run the Fuux on your machine:  \n\n``npm install``\n\n``gulp``\n\n\n## Contributions \nContributions is very welcome.\nIf you want to contribute just follow the steps:\n* Fork this repository\n* Make your changes :p\n* Create a branch for your changes in this repository \n* Create a Pull Request to your created branch as target\n\nEnjoy!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriquecustodia%2Ffuux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenriquecustodia%2Ffuux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriquecustodia%2Ffuux/lists"}