Skip to content

Latest commit

 

History

History
68 lines (62 loc) · 3.09 KB

README.md

File metadata and controls

68 lines (62 loc) · 3.09 KB
Raw

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)