_grid.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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.scss 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://susy.oddbird.net/ - Grids using Compass. Very elegant.
  11. http://gridpak.com/ - Create your own responsive grid.
  12. The grid below is a combination of the 1140 grid and Twitter Boostrap.
  13. I liked 1140 but Boostrap's grid was way more detailed so I merged them
  14. together, let's see how this works out. If you want to use 1140, the original
  15. values are commented out on each line.
  16. ******************************************************************/
  17. .onecol { width: 5.801104972%; } /* 4.85%; } /* grid_1 */
  18. .twocol { width: 14.364640883%; } /* 13.45%; } /* grid_2 */
  19. .threecol { width: 22.928176794%; } /* 22.05%; } /* grid_3 */
  20. .fourcol { width: 31.491712705%; } /* 30.75%; } /* grid_4 */
  21. .fivecol { width: 40.055248616%; } /* 39.45%; } /* grid_5 */
  22. .sixcol { width: 48.618784527%; } /* 48%; } /* grid_6 */
  23. .sevencol { width: 57.182320438000005%; } /* 56.75%; } /* grid_7 */
  24. .eightcol { width: 65.74585634900001%; } /* 65.4%; } /* grid_8 */
  25. .ninecol { width: 74.30939226%; } /* 74.05%; } /* grid_9 */
  26. .tencol { width: 82.87292817100001%; } /* 82.7%; } /* grid_10 */
  27. .elevencol { width: 91.436464082%; } /* 91.35%; } /* grid_11 */
  28. .twelvecol { width: 99.999999993%; } /* 100%; } /* grid_12 */
  29. // layout & column defaults
  30. .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
  31. position: relative;
  32. float: left;
  33. margin-left: 2.762430939%;
  34. }
  35. .first {
  36. margin-left: 0;
  37. }
  38. .last {
  39. float: right;
  40. }