×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

easy-super-simple-grid-system-user-friendly-responsive-minimal-grids.css

1
0
 
2
Language: CSS
Posted by: Wantoi OestKnut
Added: Nov 5, 2014 2:56 PM
Modified: Nov 14, 2014 8:32 AM
Views: 1914
Tags: clean code css css3 easy grid grids lemonade.css minimal responsive simple super system
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     -webkit-box-sizing: border-box;
  5.     -moz-box-sizing: border-box;
  6.     box-sizing: border-box
  7. }
  8.  
  9. .frame {
  10.     margin: 0 auto;
  11.     max-width: 100%
  12. }
  13.  
  14. .frame:after {
  15.     content: "";
  16.     display: table;
  17.     clear: both
  18. }
  19.  
  20. [class*='bit-'] {
  21.     float: left;
  22.     padding-top: 0.3em;
  23.     padding-bottom: 0.3em;
  24. }
  25.  
  26. /*############################ PARTS COLUMN-WISE ##############################*/
  27. .wrap-this-bit {
  28.     margin: 0 auto;
  29.     max-width: 1004px;              /* Use this to wrap your content for centering - use whatever you like px, %, em  */
  30.     position: relative;
  31.     background: transparent;
  32. }
  33.  
  34. .auto-bit {
  35.     width: auto
  36. }
  37.  
  38. .bit-1 {
  39.     width: 100%
  40. }
  41.  
  42. .bit-2 {
  43.     width: 50%
  44. }
  45.  
  46. .bit-3 {
  47.     width: 33.33333%
  48. }
  49.  
  50. .bit-4 {
  51.     width: 25%
  52. }
  53.  
  54. .bit-5 {
  55.     width: 20%
  56. }
  57.  
  58. .bit-6 {
  59.     width: 16.66667%
  60. }
  61.  
  62. .bit-7 {
  63.     width: 14.28571%
  64. }
  65.  
  66. .bit-8 {
  67.     width: 12.5%
  68. }
  69.  
  70. .bit-9 {
  71.     width: 11.11111%
  72. }
  73.  
  74. .bit-10 {
  75.     width: 10%
  76. }
  77.  
  78. .bit-11 {
  79.     width: 9.09091%
  80. }
  81.  
  82. .bit-12 {
  83.     width: 8.33333%
  84. }
  85.  
  86. /* END OF COLUMN-WISE *****/
  87.  
  88. /*############################ PARTS COLUMN in % ##############################*/
  89. .bit-25 {
  90.     width: 25%
  91. }
  92.  
  93. .bit-40 {
  94.     width: 40%
  95. }
  96.  
  97. .bit-45 {
  98.     width: 45%
  99. }
  100.  
  101. .bit-50 {
  102.     width: 50%
  103. }
  104.  
  105. .bit-55 {
  106.     width: 55%
  107. }
  108.  
  109. .bit-60 {
  110.     width: 60%
  111. }
  112.  
  113. .bit-70 {
  114.     width: 70%
  115. }
  116.  
  117. .bit-75 {
  118.     width: 75%
  119. }
  120.  
  121. /* END OF in % *****/
  122.  
  123. /* - - - DELETE IF NOT NEEDED ############################################# THEME MEDIA QUERY'S ### */
  124. @media (min-width: 0) and (max-width: 1000px) {
  125.     .bit-1 {
  126.         width: 100%
  127.     }
  128.  
  129.     .bit-2 {
  130.         width: 100%
  131.     }
  132.  
  133.     .bit-3 {
  134.         width: 100%
  135.     }
  136.  
  137.     .bit-4 {
  138.         width: 100%
  139.     }
  140.  
  141.     .bit-5 {
  142.         width: 100%
  143.     }
  144.  
  145.     .bit-6 {
  146.         width: 100%
  147.     }
  148.  
  149.     .bit-7 {
  150.         width: 100%
  151.     }
  152.  
  153.     .bit-8 {
  154.         width: 100%
  155.     }
  156.  
  157.     .bit-9 {
  158.         width: 100%
  159.     }
  160.  
  161.     .bit-10 {
  162.         width: 100%
  163.     }
  164.  
  165.     .bit-11 {
  166.         width: 100%
  167.     }
  168.  
  169.     .bit-12 {
  170.         width: 100%
  171.     }
  172.  
  173.     .bit-25 {
  174.         width: 100%
  175.     }
  176.  
  177.     .bit-40 {
  178.         width: 100%
  179.     }
  180.  
  181.     .bit-50 {
  182.         width: 100%
  183.     }
  184.  
  185.     .bit-55 {
  186.         width: 100%
  187.     }
  188.  
  189.     .bit-60 {
  190.         width: 100%
  191.     }
  192.  
  193.     .bit-70 {
  194.         width: 100%
  195.     }
  196.  
  197.     .bit-75 {
  198.         width: 100%
  199.     }
  200. }
  201.  
  202. /* - - - DELETE IF NOT NEEDED ############################################# THEME MEDIA QUERY'S ### */
  203.  
  204. @media (min-width: 0) and (max-width: 50em) {
  205.     .bit-4,
  206.     .bit-6,
  207.     .bit-8,
  208.     .bit-10,
  209.     .bit-12 {
  210.         width: 50%
  211.     }
  212.  
  213.     .bit-1,
  214.     .bit-2,
  215.     .bit-3,
  216.     .bit-5,
  217.     .bit-7,
  218.     .bit-9,
  219.     .bit-11 {
  220.         width: 100%
  221.     }
  222. }
  223.  
  224. @media (min-width: 50em) and (max-width: 88.75em) {
  225.     .bit-2,
  226.     .bit-7 {
  227.         width: 100%
  228.     }
  229.  
  230.     [class*='bit-']
  231.      .bit-4,
  232.     .bit-8,
  233.     .bit-10,
  234.     .bit-12 {
  235.         width: 50%
  236.     }
  237. }
  238.  
  239. /* + floating + ############################################# POSITIONING BITS ### */
  240. @media (min-width: 30em) and (max-width: 88.75em) {
  241.     [class*='go-left-bit'] {
  242.         float: none;
  243.     }
  244.  
  245.     [class*='go-right-bit'] {
  246.         float: none;
  247.     }
  248. }
  249.  
  250. [class*='go-left-bit'] {
  251.     float: left !important;
  252. }
  253.  
  254. [class*='go-right-bit'] {
  255.     float: right !important;
  256. }
  257.  
  258. /* END OF floating ***** */
  259.  
  260. /* _ absolute _ ############################################# POSITIONING BITS ### */
  261. div.left_bit:before {
  262.     position: relative;
  263.     overflow: hidden
  264. }
  265.  
  266. div.right_bit:before {
  267.     position: relative;
  268.     overflow: hidden
  269. }
  270.  
  271. .left_bit {
  272.     position: absolute;
  273.     left: 0;
  274.     vertical-align: middle;
  275. }
  276.  
  277. .right_bit {
  278.     position: absolute;
  279.     right: 0;
  280.     vertical-align: middle;
  281. }
  282.  
  283. /* END OF absolute ***** */

Write a comment

To post comments, please log in or register.