_grid.less 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. /******************************************************************
  2. Site Name:
  3. Author:
  4. Stylesheet: Grid Stylesheet
  5. I've seperated the grid so you can swap it out easily. It's
  6. called at the top the style.less stylesheet.
  7. There are a ton of grid solutions out there. You should definitely
  8. experiment with your own. Here are some recommendations:
  9. http://gridsetapp.com - Love this site. Responsive Grids made easy.
  10. http://gridpak.com/ - Create your own responsive grid.
  11. The grid below is a combination of the 1140 grid and Twitter Boostrap.
  12. I liked 1140 but Boostrap's grid was way more detailed so I merged them
  13. together, let's see how this works out. If you want to use 1140, the original
  14. values are commented out on each line.
  15. ******************************************************************/
  16. .onecol { width: 5.801104972%; } /* 4.85%; } /* grid_1 */
  17. .twocol { width: 14.364640883%; } /* 13.45%; } /* grid_2 */
  18. .threecol { width: 22.928176794%; } /* 22.05%; } /* grid_3 */
  19. .fourcol { width: 31.491712705%; } /* 30.75%; } /* grid_4 */
  20. .fivecol { width: 40.055248616%; } /* 39.45%; } /* grid_5 */
  21. .sixcol { width: 48.618784527%; } /* 48%; } /* grid_6 */
  22. .sevencol { width: 57.182320438000005%; } /* 56.75%; } /* grid_7 */
  23. .eightcol { width: 65.74585634900001%; } /* 65.4%; } /* grid_8 */
  24. .ninecol { width: 74.30939226%; } /* 74.05%; } /* grid_9 */
  25. .tencol { width: 82.87292817100001%; } /* 82.7%; } /* grid_10 */
  26. .elevencol { width: 91.436464082%; } /* 91.35%; } /* grid_11 */
  27. .twelvecol { width: 99.999999993%; } /* 100%; } /* grid_12 */
  28. // layout & column defaults
  29. .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
  30. position: relative;
  31. float: left;
  32. margin-left: 2.762430939%;
  33. }
  34. .first {
  35. margin-left: 0;
  36. }
  37. .last {
  38. float: right;
  39. }