grid.less 852 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. @import "var";
  2. @import "reset";
  3. // float elements
  4. .left {
  5. float: left;
  6. }
  7. .right {
  8. float: right;
  9. }
  10. .clear::after {
  11. clear: both;
  12. content: " ";
  13. width: 0;
  14. height: 0;
  15. display: block;
  16. }
  17. .hide {
  18. display: none;
  19. }
  20. // 12 based grids
  21. .grid-1-12 {
  22. width: 8.33%;
  23. }
  24. .grid-2-12,
  25. .grid-1-6 {
  26. width: 16.67%;
  27. }
  28. .grid-3-12,
  29. .grid-1-4 {
  30. width: 25%;
  31. }
  32. .grid-4-12,
  33. .grid-1-3 {
  34. width: 33%;
  35. }
  36. .grid-5-12 {
  37. width: 41.67%;
  38. }
  39. .grid-6-12,
  40. .grid-1-2 {
  41. width: 50%;
  42. }
  43. .grid-7-12 {
  44. width: 58.33%;
  45. }
  46. .grid-8-12,
  47. .grid-2-3 {
  48. width: 66.67%;
  49. }
  50. .grid-9-12,
  51. .grid-3-4 {
  52. width: 75%;
  53. }
  54. .grid-10-12,
  55. .grid-5-6 {
  56. width: 83.33%;
  57. }
  58. .grid-11-12 {
  59. width: 91.67%;
  60. }
  61. *[class*="grid-"] {
  62. box-sizing: content-box;
  63. }
  64. // 5 based
  65. .grid-1-5 {
  66. width: 20%;
  67. }
  68. .grid-2-5 {
  69. width: 40%;
  70. }
  71. .grid-3-5 {
  72. width: 60%;
  73. }
  74. .grid-4-5 {
  75. width: 80%;
  76. }