_grid.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. // ==========================================================================
  2. // Grid styles
  3. // 12 column grid
  4. // ==========================================================================
  5. .j-row {
  6. width: 100%;
  7. margin: 0 auto;
  8. &:before,
  9. &:after {
  10. content: " ";
  11. display: table;
  12. }
  13. &:after {
  14. clear: both;
  15. }
  16. }
  17. .j-col {
  18. padding: 0.85em;
  19. width: 100%;
  20. float: left;
  21. position: relative;
  22. }
  23. // Small grid (Mobile first)
  24. @media only screen {
  25. // .j-sm-1 {width: 8.33333%;}
  26. // .j-sm-2 {width: 16.66667%;}
  27. // .j-sm-3 {width: 25%;}
  28. // .j-sm-4 {width: 33.33333%;}
  29. .j-sm-5 {width: 41.66667%;}
  30. // .j-sm-6 {width: 50%;}
  31. .j-sm-7 {width: 58.33333%;}
  32. // .j-sm-8 {width: 66.66667%;}
  33. // .j-sm-9 {width: 75%;}
  34. // .j-sm-10 {width: 83.33333%;}
  35. // .j-sm-11 {width: 91.66667%;}
  36. .j-sm-12 {width: 100%;}
  37. }
  38. // Medium grid
  39. // 530px and up
  40. @include minbreakpoint(large-phone) {
  41. // .j-md-1 {width: 8.33333%;}
  42. // .j-md-2 {width: 16.66667%;}
  43. // .j-md-3 {width: 25%;}
  44. .j-md-4 {width: 33.33333%;}
  45. // .j-md-5 {width: 41.66667%;}
  46. .j-md-6 {width: 50%;}
  47. // .j-md-7 {width: 58.33333%;}
  48. .j-md-8 {width: 66.66667%;}
  49. // .j-md-9 {width: 75%;}
  50. // .j-md-10 {width: 83.33333%;}
  51. // .j-md-11 {width: 91.66667%;}
  52. .j-md-12 {width: 100%;}
  53. }
  54. // Large grid
  55. // 782px and up
  56. @include minbreakpoint(tablet) {
  57. // .j-lrg-1 {width: 8.33333%;}
  58. // .j-lrg-2 {width: 16.66667%;}
  59. // .j-lrg-3 {width: 25%;}
  60. .j-lrg-4 {width: 33.33333%;}
  61. .j-lrg-5 {width: 41.66667%;}
  62. .j-lrg-6 {width: 50%;}
  63. .j-lrg-7 {width: 58.33333%;}
  64. .j-lrg-8 {width: 66.66667%;}
  65. // .j-lrg-9 {width: 75%;}
  66. // .j-lrg-10 {width: 83.33333%;}
  67. // .j-lrg-11 {width: 91.66667%;}
  68. .j-lrg-12 {width: 100%;}
  69. }