Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: CSS
Posted by: Wantoi OestKnut
Added: Jul 1, 2018 1:47 PM
Modified: Jul 1, 2018 2:09 PM
Views: 21
IE 7 + compatible Grid layout. copy+c > copy+v and there you have a complete grid-css to create quality code - less=more!

A working example can be found here: http://www.anna-zorgt.nl/
  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. .frame{
  9.     margin:0 auto;
  10.     max-width:100%
  11. }
  12. .frame:after{
  13.     content:"";
  14.     display:table;
  15.     clear:both
  16. }
  17. [class*='bit-']{
  18.     display:block;
  19.     overflow:hidden;
  20.     position:relative;
  21.     float:left;
  22.     padding:.6em .4em
  23. }
  24. .bg-transparent{
  25.     background:transparent!important
  26. }
  27. .container{
  28.     overflow:hidden;
  29.     width:100%;
  30.     margin:0 auto;
  31.     padding:0 10px 0 10px;
  32.     max-width:1260px
  33. }
  34. .wrapper{
  35.     width:100%;
  36.     max-width:100%;
  37.     margin:0;
  38.     padding:0;
  39.     line-height:inherit;
  40.     position:relative;
  41.     display:block;
  42.     overflow:hidden;
  43.     float:none
  44. }
  45.  
  46. .bit-row{
  47.     clear:both;
  48.     position:relative;
  49.     margin:0 auto;
  50.     padding:0;
  51.     display:block;
  52.     width:100%;
  53.     float:none
  54. }
  55. .bit-auto{
  56.     position:relative;
  57.     width:auto
  58. }
  59. .bit-1{
  60.     width:100%
  61. }
  62. .bit-2{
  63.     width:50%
  64. }
  65. .bit-3{
  66.     width:33.33333%
  67. }
  68. .bit-4{
  69.     width:25%
  70. }
  71. .bit-5{
  72.     width:20%
  73. }
  74. .bit-6{
  75.     width:16.66667%
  76. }
  77. .bit-7{
  78.     width:14.28571%
  79. }
  80. .bit-8{
  81.     width:12.5%
  82. }
  83. .bit-9{
  84.     width:11.11111%
  85. }
  86. .bit-10{
  87.     width:10%
  88. }
  89. .bit-11{
  90.     width:9.09091%
  91. }
  92. .bit-12{
  93.     width:8.33333%
  94. }
  95. .bit-20{
  96.     width:20%
  97. }
  98. .bit-25{
  99.     width:25%
  100. }
  101. .bit-30{
  102.     width:30%
  103. }
  104. .bit-35{
  105.     width:35%
  106. }
  107. .bit-40{
  108.     width:40%
  109. }
  110. .bit-50{
  111.     width:50%
  112. }
  113. .bit-55{
  114.     width:55%
  115. }
  116. .bit-60{
  117.     width:60%
  118. }
  119. .bit-65{
  120.     width:65%
  121. }
  122. .bit-70{
  123.     width:70%
  124. }
  125. .bit-75{
  126.     width:75%
  127. }
  128. .bit-80{
  129.     width:80%
  130. }
  131. .bit-85{
  132.     width:85%
  133. }
  134. .left{
  135.     float:left
  136. }
  137. .right{
  138.     float:right
  139. }
  140. @media(min-width:0) and (max-width:480px){
  141.     [class*='left'],[class*='right']{
  142.         float:none!important
  143.     }
  144.     [class*='bit-']{
  145.         float:none!important;
  146.         width:98%;
  147.         padding:1%;
  148.         margin:0 auto
  149.     }
  150.     *{
  151.         font-size:99%
  152.     }
  153.     .horizon li{
  154.         float:none;
  155.         clear:both;
  156.         text-align:center;
  157.         width:98%;
  158.         padding:2%
  159.     }
  160. }
  161. .absolute-left{
  162.     position:absolute;
  163.     left:0;
  164.     vertical-align:middle
  165. }
  166. .absolute-right{
  167.     position:absolute;
  168.     right:0;
  169.     vertical-align:middle
  170. }
  171. @media(min-width:0) and (max-width:320px){
  172.     h1,h1 a,h2,h2 a,h3,h3 a{
  173.         font-size:1.9em
  174.     }
  175.     h4,h5,h6,h4 a,h5 a,h6 a{
  176.         font-size:1.5em
  177.     }
  178. }
  179. @media(min-width:321px) and (max-width:720px){
  180.     h1,h2,h1 a,h2 a,h3,h3 a{
  181.         font-size:2.3em
  182.     }
  183.     h4,h5,h6,h4 a,h5 a,h6 a{
  184.         font-size:1.8em
  185.     }
  186.     [class*='right']{
  187.         float:none!important
  188.     }
  189.     [class*='left']{
  190.         float:none!important
  191.     }
  192. }
  193. @media(min-width:721px) and (max-width:1960px){
  194.     h1,h2,h1 a,h2 a,h3,h3 a{
  195.         font-size:2.8em
  196.     }
  197.     h4,h5,h6,h4 a,h5 a,h6 a{
  198.         font-size:1.9em
  199.     }
  200. }
  201. @media(min-width:0) and (max-width:40em){
  202.     .bit-4,.bit-6,.bit-8,.bit-10,.bit-12{
  203.         width:48%
  204.     }
  205.     .bit-2,.bit-3,.bit-5,.bit-7,.bit-9,.bit-11,.bit-50{
  206.         width:98%;
  207.         padding:2%;
  208.         clear:both
  209.     }
  210. }
  211. @media(min-width:70em) and (max-width:88.75em){
  212.     .bit-2,.bit-7{
  213.         width:48%
  214.     }
  215.     [class*='bit-'] .bit-4,.bit-8,.bit-10,.bit-12{
  216.         width:50%
  217.     }
  218. }
  219. @media(min-width:0) and (max-width:30em){
  220.     h1,h1 a{
  221.         font-size:2em
  222.     }
  223.     h2,h2 a{
  224.         font-size:1.8em
  225.     }
  226.     h3,h3 a{
  227.         font-size:1.6em
  228.     }
  229.     h4,h4 a{
  230.         font-size:1.4em
  231.     }
  232.     h5,h5 a{
  233.         font-size:1.2em
  234.     }
  235.     h6,h6 a{
  236.         font-size:1em
  237.     }
  238. }
  239. @media(min-width:0) and (max-width:320px){
  240.     .bit-4,.bit-30,.bit-3,.bit-65,.bit-70{
  241.         width:96%!important;
  242.         padding:2%;
  243.         clear:both
  244.     }
  245.     ul.horizon li{
  246.         width:96%;
  247.         text-align:center;
  248.         float:none;
  249.         clear:both;
  250.         padding:2%
  251.     }
  252.     p img{
  253.         margin:0 auto!important
  254.     }
  255.     .text-right,.text-left{
  256.         width:98%!important;
  257.         padding:1%;
  258.         float:none;
  259.         margin:1% auto;
  260.         text-align:center!important
  261.     }
  262. }
  263. @media(min-width:321px) and (max-width:720px){
  264.     .bit-30,.bit-3,.bit-65,.bit-70{
  265.         width:96%!important;
  266.         padding:2%;
  267.         float:none;
  268.         clear:both
  269.     }
  270.     .bit-4{
  271.         width:48%!important;
  272.         padding:2%
  273.     }
  274.     ul.horizon li{
  275.         width:96%;
  276.         text-align:center;
  277.         float:none;
  278.         clear:both;
  279.         padding:2%
  280.     }
  281. }
  282. @media(min-width:721px) and (max-width:1960px){
  283.     .bit-4{
  284.         width:25%!important;
  285.         padding:2%
  286.     }
  287.     ul.horizon li{
  288.         width:32%;
  289.         text-align:center;
  290.         float:left;
  291.         padding:1%
  292.     }
  293. }
  294.     @media screen and (max-width:40em){
  295.     }
  296. }