{"id":32263450,"url":"https://github.com/prince3339/flex-helpers-like-angular-material","last_synced_at":"2025-10-22T20:56:21.263Z","repository":{"id":58221029,"uuid":"83916920","full_name":"prince3339/flex-helpers-like-angular-material","owner":"prince3339","description":"CSS flex helper classes like angular material directives","archived":false,"fork":false,"pushed_at":"2019-04-30T07:21:45.000Z","size":29,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-22T20:56:03.341Z","etag":null,"topics":["angular-material","css","css-flex","flex","flex-css","flex-layout","flexbox"],"latest_commit_sha":null,"homepage":null,"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/prince3339.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-03-04T18:54:10.000Z","updated_at":"2019-04-30T07:21:46.000Z","dependencies_parsed_at":"2022-08-31T02:51:12.115Z","dependency_job_id":null,"html_url":"https://github.com/prince3339/flex-helpers-like-angular-material","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prince3339/flex-helpers-like-angular-material","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prince3339%2Fflex-helpers-like-angular-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prince3339%2Fflex-helpers-like-angular-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prince3339%2Fflex-helpers-like-angular-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prince3339%2Fflex-helpers-like-angular-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prince3339","download_url":"https://codeload.github.com/prince3339/flex-helpers-like-angular-material/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prince3339%2Fflex-helpers-like-angular-material/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280511639,"owners_count":26343102,"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-22T02:00:06.515Z","response_time":63,"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":["angular-material","css","css-flex","flex","flex-css","flex-layout","flexbox"],"created_at":"2025-10-22T20:56:19.302Z","updated_at":"2025-10-22T20:56:21.259Z","avatar_url":"https://github.com/prince3339.png","language":"CSS","readme":"# flex-helpers-like-angular-material\nCSS flex helper classes like angular material directives\n## Usage:\n1. Download this repo\n2. Or use Bower to install: \n   \u003cbr\u003e\n   \u003cstrong\u003ebower install flex-helpers-like-angular-material\u003c/strong\u003e\n3. Browse to flex-helpers-like-angular-material and run npm install in command prompt/terminal\n4. Run grunt to compile sass to css\n5. You'll see main.css file inside style folder\n\nYou are now ready to go. Just include the css file into your project.\n\nGenerated class will be almost like angular material.\n\u003c/br\u003e\nExamples: \n\u003c/br\u003e\n### 1. Layout row classes:\n   1. layout-row \n   2. layout-row-xs\n   3. layout-row-gt-xs\n   4. layout-row-sm\n   5. layout-row-gt-sm\n   6. layout-row-gt-sm-max\n   7. layout-row-md\n   8. layout-row-gt-md\n   9. layout-row-lg\n   10. layout-row-gt-lg\n   \n### 2. Layout column classes:\n   1. layout-column \n   2. layout-column-xs\n   3. layout-column-gt-xs\n   4. layout-column-sm\n   5. layout-column-gt-sm\n   6. layout-column-gt-sm-max\n   7. layout-column-md\n   8. layout-column-gt-md\n   9. layout-column-lg\n   10. layout-column-gt-lg\n   \n### 3. Layout align classes\n   1. layout-align-start-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg [These are breakpoints])\n   2. layout-align-start-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   3. layout-align-start-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   4. layout-align-start-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   5. layout-align-center-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   6. layout-align-center-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   7. layout-align-center-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   8. layout-align-center-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   9. layout-align-end-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   10. layout-align-end-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   11. layout-align-end-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   12. layout-align-end-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   13. layout-align-space-around-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   14. layout-align-space-around-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   15. layout-align-space-around-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   16. layout-align-space-around-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   17. layout-align-space-between-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   18. layout-align-space-between-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   19. layout-align-space-between-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n   20. layout-align-space-between-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)\n    \n### 4. Flex classes\n   1. flex\n   2. flex-5 (5, 10, 15, 20 ... 100)\n   3. flex-(-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)-(5, 10, 15, 20 ... 100)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprince3339%2Fflex-helpers-like-angular-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprince3339%2Fflex-helpers-like-angular-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprince3339%2Fflex-helpers-like-angular-material/lists"}