oocss grid, as SASS mixins


/ Published in: Other
Save to your folder(s)



Copy this code and paste it in your HTML
  1. @mixin unit ($margin: 0, $padding: 0, $right: 0) {
  2. @if $right == 0 {
  3. float: left;
  4. } @else {
  5. float: right;
  6. }
  7. margin: $margin;
  8. padding: $padding;
  9. }
  10.  
  11. @mixin last-unit {
  12. margin-right: -2px;
  13. // oocss source, a bit more roburst:
  14. // display: table-cell;
  15. // float: none;
  16. // width: auto;
  17. // *display: block;
  18. // *zoom:1;
  19. // _position:relative;
  20. // _left:-3px;
  21. // _margin-right:-3px;
  22. }
  23.  
  24. @mixin size1of1 {
  25. float: none;
  26. width: 50%;
  27. }
  28.  
  29. @mixin size1of2 {
  30. width: 50%;
  31. }
  32.  
  33. @mixin size1of3 {
  34. width: 33.3333%;
  35. }
  36.  
  37. @mixin size2of3 {
  38. width: 66.6666%;
  39. }
  40.  
  41. @mixin size1of4 {
  42. width: 25%;
  43. }
  44.  
  45. @mixin size3of4 {
  46. width: 75%;
  47. }
  48.  
  49. @mixin size1of5 {
  50. width: 20%;
  51. }
  52.  
  53. @mixin size2of5 {
  54. width: 40%;
  55. }
  56.  
  57. @mixin size3of5 {
  58. width: 60%;
  59. }
  60.  
  61. @mixin size4of5 {
  62. width: 80%;
  63. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.