prince3339 / flex-helpers-like-angular-material

CSS flex helper classes like angular material directives

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)