{"id":21942068,"url":"https://github.com/richardzcode/fluid-react","last_synced_at":"2025-06-25T01:35:20.670Z","repository":{"id":57239049,"uuid":"112908961","full_name":"richardzcode/fluid-react","owner":"richardzcode","description":"Grid system for React, and more","archived":false,"fork":false,"pushed_at":"2018-02-15T17:51:17.000Z","size":942,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T17:35:40.095Z","etag":null,"topics":["fluid","grid","javascript","mediaquery","pseudo-elements","react"],"latest_commit_sha":null,"homepage":"https://richardzcode.github.io/fluid-react/index.html","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/richardzcode.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":"2017-12-03T07:31:14.000Z","updated_at":"2019-07-13T16:49:59.000Z","dependencies_parsed_at":"2022-08-29T22:22:24.475Z","dependency_job_id":null,"html_url":"https://github.com/richardzcode/fluid-react","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/richardzcode%2Ffluid-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardzcode%2Ffluid-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardzcode%2Ffluid-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richardzcode%2Ffluid-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richardzcode","download_url":"https://codeload.github.com/richardzcode/fluid-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250296175,"owners_count":21407037,"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":["fluid","grid","javascript","mediaquery","pseudo-elements","react"],"created_at":"2024-11-29T03:16:22.872Z","updated_at":"2025-04-22T18:10:59.384Z","avatar_url":"https://github.com/richardzcode.png","language":"JavaScript","readme":"# fluid-react\n\nReact inline-style solution for frontend development. CSS free.\n\nWhy Javascript styling instead of CSS? Check out this [video](https://youtu.be/ERB1TJBn32c)\n\n* [Install](#install)\n* [Example](#example)\n* [Documentation](#documentation)\n* [CSS](#css)\n  - [MediaQuery](#mediaquery)\n  - [Match](#match)\n  - [Pseudo Element](#pseudo-element)\n* [Grid](#grid)\n\n\u003cimg src=\"media/fluid_react.png\" width=\"360px\" /\u003e\n\n## Install\n\nNo CSS file needed.\n\n```\nnpm install --save fluid-react\n```\n\n## Example\n\nOf course I am biased, to me this is the simplest to use library in this category.\n\n**Mobile vs Desktop**\n\n```\n\u003e npm install --save fluid-react\n```\n\nthen\n```\nimport React, { Component } from 'react';\nimport { Container, Row, Col } from 'fluid-react';\n\nexport default class App extends Component {\n    render() {\n        return (\n            \u003cContainer\u003e\n                \u003cRow\u003e\n                    \u003cCol xs=\"12\" md=\"3\"\u003eSidebar\u003c/Col\u003e\n                    \u003cCol xs=\"12\" md=\"9\"\u003eMain Section\u003c/Col\u003e\n                \u003c/Row\u003e\n            \u003c/Container\u003e\n        )\n    }\n}\n```\n\n## Documentation\n\nDocumentation is on [Live Demo](https://richardzcode.github.io/fluid-react/index.html)\n\nTo run documentation/demo in local:\n```\ngit clone https://github.com/richardzcode/fluid-react.git\ncd fluid-react/example\nnpm install\nnpm start\n```\n\n## CSS\n\n### MediaQuery\n\n```\n    const style = {\n        margin: 'auto 1rem',\n        padding: '2rem',\n        color: '#fff',\n        backgroundColor: '#0275d8',\n        borderColor: '#0275d8',\n        '@media (min-width: 576px) and (max-width: 767px)': {\n            backgroundColor: '#5cb85c',\n            borderColor: '#5cb85c'\n        },\n        '@media (min-width: 768px) and (max-width: 991px)': {\n            backgroundColor: '#5bc0de',\n            borderColor: '#5bc0de'\n        },\n        '@media (min-width: 992px) and (max-width: 1199px)': {\n            backgroundColor: '#f0ad4e',\n            borderColor: '#f0ad4e'\n        },\n        '@media (min-width: 1200px)': {\n            backgroundColor: '#d9534f',\n            borderColor: '#d9534f'\n        }\n    }\n```\n\n### Match\n```\n    export const MatchBlocks = (props) =\u003e (\n        \u003cdiv\u003e\n            \u003cMatch show=\"xs,sm\"\u003exs, sm\u003c/Match\u003e\n            \u003cMatch show=\"md,lg\"\u003emd,lg\u003c/Match\u003e\n            \u003cMatch show=\"xl\"\u003exl\u003c/Match\u003e\n        \u003c/div\u003e\n    )\n```\n\n### Pseudo Element\n```\n    const brandStyle = {\n        fontSize: '24px',\n        verticalAlign: 'top',\n        padding: '4px',\n        '::before': {\n            content: '',\n            display: 'inline-block',\n            width: '64px',\n            height: '32px',\n            backgroundImage: 'url(https://reactjs.org/logo-og.png)',\n            backgroundSize: '64px 32px'\n        }\n    }\n```\n\n## Grid\n\nBase on [Bootstrap 12 column grid system](https://v4-alpha.getbootstrap.com/layout/grid/). A mobile-first grid system for React.\n\n```\n    \u003cContainer\u003e\n        \u003cRow\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e1\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e2\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e3\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e4\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e5\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e6\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e7\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e8\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e9\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e10\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e11\u003c/Col\u003e\n            \u003cCol xs=\"12\" sm=\"6\" md=\"4\" lg=\"3\" xl=\"2\"\u003e12\u003c/Col\u003e\n        \u003c/Row\u003e\n    \u003c/Container\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichardzcode%2Ffluid-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichardzcode%2Ffluid-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichardzcode%2Ffluid-react/lists"}