×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

super-simple-easy-grids.css

1
0
 
1
Language: CSS
Posted by: Wantoi OestKnut
Added: Oct 29, 2014 7:55 AM
Views: 1889
Tags: css grid grids gridsystem intergration lemonade.css responsive simple super
  1. *{ margin:0;  padding:0;  -webkit-box-sizing:border-box;  -moz-box-sizing:border-box;  box-sizing:border-box}
  2.  
  3. .frame{ margin:0 auto;  max-width:100%}
  4. .frame:after{ content:"";  display:table;  clear:both}
  5.  
  6. [class*='bit-']{ float:left;  padding:0.3em}
  7.  
  8. .bit-1{ width:100%}
  9.  
  10. .bit-2{ width:50%}
  11.  
  12. .bit-3{ width:33.33333%}
  13.  
  14. .bit-4{ width:25%}
  15.  
  16. .bit-5{ width:20%}
  17.  
  18. .bit-6{ width:16.66667%}
  19.  
  20. .bit-7{ width:14.28571%}
  21.  
  22. .bit-8{ width:12.5%}
  23.  
  24. .bit-9{ width:11.11111%}
  25.  
  26. .bit-10{ width:10%}
  27.  
  28. .bit-11{ width:9.09091%}
  29.  
  30. .bit-12{ width:8.33333%}
  31.  
  32.  
  33.  
  34. .bit-25{ width:25%}
  35.  
  36. .bit-40{ width:40%}
  37.  
  38. .bit-60{ width:60%}
  39.  
  40. .bit-75{ width:75%}
  41.  
  42. @media (max-width:30em){ .bit-1{ width:100%}
  43.  
  44.                          .bit-2{ width:100%}
  45.  
  46.                          .bit-3{ width:100%}
  47.  
  48.                          .bit-4{ width:100%}
  49.  
  50.                          .bit-5{ width:100%}
  51.  
  52.                          .bit-6{ width:100%}
  53.  
  54.                          .bit-7{ width:100%}
  55.  
  56.                          .bit-8{ width:100%}
  57.  
  58.                          .bit-9{ width:100%}
  59.  
  60.                          .bit-10{ width:100%}
  61.  
  62.                          .bit-11{ width:100%}
  63.  
  64.                          .bit-12{ width:100%}
  65.  
  66.                          .bit-25{ width:100%}
  67.  
  68.                          .bit-40{ width:100%}
  69.  
  70.                          .bit-60{ width:100%}
  71.  
  72.                          .bit-75{ width:100%}
  73. }
  74. @media (min-width:30em) and (max-width:50em){ .bit-4, .bit-6, .bit-8, .bit-10, .bit-12{ width:50%}
  75.  
  76.                                               .bit-1,
  77.                                               .bit-2,
  78.                                               .bit-3,
  79.                                               .bit-5,
  80.                                               .bit-7,
  81.                                               .bit-9,
  82.                                               .bit-11{ width:100%}
  83. }
  84. @media (min-width:50em) and (max-width:68.75em){ .bit-2, .bit-7{ width:100%}
  85.  
  86.                                                  .bit-4,
  87.                                                  .bit-8,
  88.                                                  .bit-10,
  89.                                                  .bit-12{ width:50%}
  90. }

1 comment

Wantoi OestKnut 8 years ago
Reply
Updated, check out @TagMyCode ::
easy-super-simple-grid-system-user-friendly-responsive-minimal-grids.css

Write a comment

To post comments, please log in or register.