https://github.com/prince3339/flex-helpers-like-angular-material
CSS flex helper classes like angular material directives
https://github.com/prince3339/flex-helpers-like-angular-material
angular-material css css-flex flex flex-css flex-layout flexbox
Last synced: 6 months ago
JSON representation
CSS flex helper classes like angular material directives
- Host: GitHub
- URL: https://github.com/prince3339/flex-helpers-like-angular-material
- Owner: prince3339
- License: mit
- Created: 2017-03-04T18:54:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-30T07:21:45.000Z (almost 7 years ago)
- Last Synced: 2025-10-22T20:56:03.341Z (6 months ago)
- Topics: angular-material, css, css-flex, flex, flex-css, flex-layout, flexbox
- Language: CSS
- Size: 28.3 KB
- Stars: 2
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# flex-helpers-like-angular-material
CSS flex helper classes like angular material directives
## Usage:
1. Download this repo
2. Or use Bower to install:
bower install flex-helpers-like-angular-material
3. Browse to flex-helpers-like-angular-material and run npm install in command prompt/terminal
4. Run grunt to compile sass to css
5. You'll see main.css file inside style folder
You are now ready to go. Just include the css file into your project.
Generated class will be almost like angular material.
Examples:
### 1. Layout row classes:
1. layout-row
2. layout-row-xs
3. layout-row-gt-xs
4. layout-row-sm
5. layout-row-gt-sm
6. layout-row-gt-sm-max
7. layout-row-md
8. layout-row-gt-md
9. layout-row-lg
10. layout-row-gt-lg
### 2. Layout column classes:
1. layout-column
2. layout-column-xs
3. layout-column-gt-xs
4. layout-column-sm
5. layout-column-gt-sm
6. layout-column-gt-sm-max
7. layout-column-md
8. layout-column-gt-md
9. layout-column-lg
10. layout-column-gt-lg
### 3. Layout align classes
1. layout-align-start-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg [These are breakpoints])
2. layout-align-start-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
3. layout-align-start-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
4. layout-align-start-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
5. layout-align-center-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
6. layout-align-center-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
7. layout-align-center-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
8. layout-align-center-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
9. layout-align-end-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
10. layout-align-end-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
11. layout-align-end-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
12. layout-align-end-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
13. layout-align-space-around-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
14. layout-align-space-around-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
15. layout-align-space-around-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
16. layout-align-space-around-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
17. layout-align-space-between-start (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
18. layout-align-space-between-center (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
19. layout-align-space-between-end (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
20. layout-align-space-between-stretch (-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)
### 4. Flex classes
1. flex
2. flex-5 (5, 10, 15, 20 ... 100)
3. flex-(-xs, -gt-xs, sm, gt-sm, gt-sm-max, md, gt-md, lg, gt-lg)-(5, 10, 15, 20 ... 100)