grid.less 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. // Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. // Centered container element
  5. .container-fixed(@gutter: @grid-gutter-width) {
  6. padding-right: ceil((@gutter / 2));
  7. padding-left: floor((@gutter / 2));
  8. margin-right: auto;
  9. margin-left: auto;
  10. &:extend(.clearfix all);
  11. }
  12. // Creates a wrapper for a series of columns
  13. .make-row(@gutter: @grid-gutter-width) {
  14. margin-right: floor((@gutter / -2));
  15. margin-left: ceil((@gutter / -2));
  16. &:extend(.clearfix all);
  17. }
  18. // Generate the extra small columns
  19. .make-xs-column(@columns; @gutter: @grid-gutter-width) {
  20. position: relative;
  21. float: left;
  22. width: percentage((@columns / @grid-columns));
  23. min-height: 1px;
  24. padding-right: (@gutter / 2);
  25. padding-left: (@gutter / 2);
  26. }
  27. .make-xs-column-offset(@columns) {
  28. margin-left: percentage((@columns / @grid-columns));
  29. }
  30. .make-xs-column-push(@columns) {
  31. left: percentage((@columns / @grid-columns));
  32. }
  33. .make-xs-column-pull(@columns) {
  34. right: percentage((@columns / @grid-columns));
  35. }
  36. // Generate the small columns
  37. .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  38. position: relative;
  39. min-height: 1px;
  40. padding-right: (@gutter / 2);
  41. padding-left: (@gutter / 2);
  42. @media (min-width: @screen-sm-min) {
  43. float: left;
  44. width: percentage((@columns / @grid-columns));
  45. }
  46. }
  47. .make-sm-column-offset(@columns) {
  48. @media (min-width: @screen-sm-min) {
  49. margin-left: percentage((@columns / @grid-columns));
  50. }
  51. }
  52. .make-sm-column-push(@columns) {
  53. @media (min-width: @screen-sm-min) {
  54. left: percentage((@columns / @grid-columns));
  55. }
  56. }
  57. .make-sm-column-pull(@columns) {
  58. @media (min-width: @screen-sm-min) {
  59. right: percentage((@columns / @grid-columns));
  60. }
  61. }
  62. // Generate the medium columns
  63. .make-md-column(@columns; @gutter: @grid-gutter-width) {
  64. position: relative;
  65. min-height: 1px;
  66. padding-right: (@gutter / 2);
  67. padding-left: (@gutter / 2);
  68. @media (min-width: @screen-md-min) {
  69. float: left;
  70. width: percentage((@columns / @grid-columns));
  71. }
  72. }
  73. .make-md-column-offset(@columns) {
  74. @media (min-width: @screen-md-min) {
  75. margin-left: percentage((@columns / @grid-columns));
  76. }
  77. }
  78. .make-md-column-push(@columns) {
  79. @media (min-width: @screen-md-min) {
  80. left: percentage((@columns / @grid-columns));
  81. }
  82. }
  83. .make-md-column-pull(@columns) {
  84. @media (min-width: @screen-md-min) {
  85. right: percentage((@columns / @grid-columns));
  86. }
  87. }
  88. // Generate the large columns
  89. .make-lg-column(@columns; @gutter: @grid-gutter-width) {
  90. position: relative;
  91. min-height: 1px;
  92. padding-right: (@gutter / 2);
  93. padding-left: (@gutter / 2);
  94. @media (min-width: @screen-lg-min) {
  95. float: left;
  96. width: percentage((@columns / @grid-columns));
  97. }
  98. }
  99. .make-lg-column-offset(@columns) {
  100. @media (min-width: @screen-lg-min) {
  101. margin-left: percentage((@columns / @grid-columns));
  102. }
  103. }
  104. .make-lg-column-push(@columns) {
  105. @media (min-width: @screen-lg-min) {
  106. left: percentage((@columns / @grid-columns));
  107. }
  108. }
  109. .make-lg-column-pull(@columns) {
  110. @media (min-width: @screen-lg-min) {
  111. right: percentage((@columns / @grid-columns));
  112. }
  113. }