{"id":21155612,"url":"https://github.com/vladocar/flex-one","last_synced_at":"2025-10-03T21:48:53.822Z","repository":{"id":66578061,"uuid":"157023310","full_name":"vladocar/Flex-One","owner":"vladocar","description":"1 CSS Class Layout System made with Flex","archived":false,"fork":false,"pushed_at":"2018-11-15T09:43:29.000Z","size":34,"stargazers_count":49,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-09T11:37:17.769Z","etag":null,"topics":["css","css-flexbox","css-flexbox-layout","css-flexible-grid","css-framework","css-layout","css3"],"latest_commit_sha":null,"homepage":"https://vladocar.github.io/Flex-One/","language":"HTML","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/vladocar.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":"2018-11-10T21:31:52.000Z","updated_at":"2023-03-03T12:19:44.000Z","dependencies_parsed_at":"2023-06-01T21:15:30.904Z","dependency_job_id":null,"html_url":"https://github.com/vladocar/Flex-One","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vladocar/Flex-One","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2FFlex-One","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2FFlex-One/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2FFlex-One/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2FFlex-One/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vladocar","download_url":"https://codeload.github.com/vladocar/Flex-One/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2FFlex-One/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278234028,"owners_count":25953074,"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","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-flexbox","css-flexbox-layout","css-flexible-grid","css-framework","css-layout","css3"],"created_at":"2024-11-20T11:24:27.092Z","updated_at":"2025-10-03T21:48:53.816Z","avatar_url":"https://github.com/vladocar.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e Flex One - 1 CSS Class System \u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e Flex One is CSS Layout system based on one CSS class. This class: .fluid {flex:1} \u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003cp\u003eWith this .fluid {flex:1} you can build entire CSS grid system. \u003c/p\u003e\n\n\u003ch4\u003eLet me show you how it works: \u003c/h4\u003e\n\n```shell\n.main{display: flex; flex-flow: row wrap;  width: 80%; margin: 0 auto}\n\n.fluid{flex:1}\n\n.clear{width: 100%}\n```\n\u003cp\u003eThis CSS is the base for everything. With this CSS you can build solid Grid System. \u003c/p\u003e\n\n```shell\n\u003cdiv class=\"fluid\"\u003e33,3%\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e33,3%\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e33,3%\u003c/div\u003e\n\u003cdiv class=\"clear\"\u003e\u003c/div\u003e\n\n\u003cdiv class=\"fluid\"\u003e25%\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e25%\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e25%\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e25%\u003c/div\u003e\n\u003cdiv class=\"clear\"\u003e\u003c/div\u003e\n```\n\n\u003cp\u003eSuper simple, just add the number of columns you need. You can have infinite number of columns. Plus is fluid with natural responsiveness.\u003c/p\u003e\n\n\u003cp\u003e When you are finished add the .clear class.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://vladocar.github.io/Flex-One/\"\u003e Here is the Demo Grid\u003c/a\u003e\u003c/p\u003e \n\n\u003cp\u003e\u003ca href=\"https://vladocar.github.io/Flex-One/demo.html\"\u003e Here is clear dynamic example on how .fluid {flex:1} works \u003c/a\u003e\u003c/p\u003e\n\n\u003ch4\u003eLimitations? Yes, many. \u003c/h4\u003e\n\n\u003cp\u003e One of the biggest limitation is: you must use identical size columns. You can't have 1-1-1-3 or 1-2-1 grid.\n\n\u003cp\u003e We can fix these limitations by adding some CSS code:\u003c/p\u003e\n\n```shell\n.merge2 {flex:2}\n.merge3 {flex:3}\n```\n\nNow we can have this 1-1-1-3:\n\n```shell\n\u003cdiv class=\"fluid\"\u003e1\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e1\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e1\u003c/div\u003e\n\u003cdiv class=\"merge3\"\u003eMerge 3\u003c/div\u003e\n\u003cdiv class=\"clear\"\u003e\u003c/div\u003e\n```\n\n\u003cimg src=\"1-1-1-3.png\" /\u003e\n\n\u003ch4\u003eWhat about nested columns? \u003c/h4\u003e\n\n\u003cp\u003e We can use this code for the nested columns:\u003c/p\u003e\n\n```shell\n.nested{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important}\n```\n\n```shell\n\u003cdiv class=\"fluid nested\"\u003e\n    \u003cdiv class=\"fluid\"\u003eNested column\u003c/div\u003e\n    \u003cdiv class=\"fluid\"\u003eNested column\u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cp\u003eInside any fluid column we can insert any number of other fluid columns by adding the .nested class.\u003c/p\u003e\n\n\u003ch4\u003eOk. What about gutter?\u003c/h4\u003e\n\n\u003cp\u003eThe Gutter is optional. If you need it you can use something like this:\u003c/p\u003e\n\n```shell\n.fluid,.merge2,.merge3 {margin:0 0 0 15px}\n\n// or maybe\n\n.fluid,.merge2,.merge3,.merge4 {padding:0 10px}\n```\n\n\u003ch4\u003eSome other tweaks.\u003c/h4\u003e\n\n\u003cp\u003e Here is also alternative to the .clear class:\u003c/p\u003e\n\n\n```shell\n\u003cdiv class=\"fluid\"\u003e\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e\u003c/div\u003e\n\u003cdiv class=\"clear\"\u003e\u003c/div\u003e\n\n// Alternative columns class:\n\n\u003cdiv class=\"columns\"\u003e\n\u003cdiv class=\"fluid\"\u003e\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e\u003c/div\u003e\n\u003cdiv class=\"fluid\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\u003cp\u003e\u003ca href=\"https://vladocar.github.io/Flex-One/fluid1.html\"\u003e Demo Complete Grid\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eComplete version of the CSS code is included in \u003cb\u003efluid.css\u003c/b\u003e and \u003cb\u003efluid.scss\u003c/b\u003e file\u003c/p\u003e\n\n\u003ch3\u003eConclusion\u003c/h3\u003e\n\n\u003cp\u003e Starting with the .fluid{flex:1} class and by adding few other CSS classes we can build infinite column grid system that is fluid and responsive. You need just few lines of CSS to build solid layout system.\u003c/p\u003e\n    \n\u003ch3\u003eLicense\u003c/h3\u003e\n\u003cp\u003eThis project is licensed under the MIT License\u003c/p\u003e\n\n\u003ch3\u003eP.S\u003c/h3\u003e\n\n\u003cp\u003eWe can push the system even further and use only 2 classes .column and .row and make it more semantic.\u003c/p\u003e\n\n```shell\n\n// Just 2 classes for the layout\n\n.column{display: flex; flex-flow: row wrap;  width: 80%; margin: 0 auto}\n.row{flex:1}\n\n// Use the HTML like this:\n\n\u003cdiv class=\"column\"\u003e\n\u003cdiv class=\"row\"\u003e\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\u003c/div\u003e\n....\n\u003c/div\u003e\n```\n\n\u003cp\u003e\u003ca href=\"https://vladocar.github.io/Flex-One/semantic.html\"\u003eDemo Semantic Grid\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladocar%2Fflex-one","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvladocar%2Fflex-one","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladocar%2Fflex-one/lists"}