SHARE
TWEET

RE: A Discussion About CSS Reusability

a guest Jul 23rd, 2012 339 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*******************/
  2. /* Reset UA Styles */
  3. /*******************/
  4. html * {
  5.     outline:none;
  6. }
  7. body, html {
  8.     padding:0;
  9.     margin:0;
  10.     border:none;
  11.     height:100%;
  12. }
  13. select, button, input, fieldset, label, legend, .no_appearance {
  14.     -webkit-appearance:none;
  15.     -moz-appearance:none;
  16.     -o-appearance:none;
  17.     -ms-appearance:none;
  18.     border:none;
  19. }
  20. ul {
  21.     margin:0;
  22.     padding:0;
  23.     list-style:none;
  24. }
  25. header, section, article, div, ul, li, nav, .border_box {
  26.     box-sizing:border-box;
  27. }
  28. /*******************/
  29. /* General Classes */
  30. /*******************/
  31. .flexbox_pack_center {
  32.     -webkit-box-pack: center;
  33.     -moz-box-pack: center;  
  34.     -o-box-pack: center;    
  35.     box-pack: center;        
  36. }
  37. .flexbox_strech {
  38.     -webkit-box-align: stretch;
  39.     -moz-box-align: stretch;
  40.     -o-box-align: stretch;
  41.     box-align: stretch;
  42. }
  43. .flexbox_3 {
  44.     -webkit-box-flex:3;
  45.     -moz-box-flex:3;
  46.     -o-box-flex:3;
  47.     box-flex:3;
  48.     display:block;
  49. }
  50. .flexbox_2 {
  51.     -webkit-box-flex:2;
  52.     -moz-box-flex:2;
  53.     -ms-box-flex:2;
  54.     -o-box-flex:2;
  55.     box-flex:2;
  56.     display:block;
  57. }
  58. .flexbox_1 {
  59.     -webkit-box-flex:1;
  60.     -moz-box-flex:1;
  61.     -ms-box-flex:1;
  62.     -o-box-flex:1;
  63.     box-flex:1;
  64.     display:block;
  65. }
  66. .flexbox_0 {
  67.     -webkit-box-flex:0;
  68.     -moz-box-flex:0;
  69.     -ms-box-flex:0;
  70.     -o-box-flex:0;
  71.     box-flex:0;
  72.     display:block;
  73. }
  74. .flexbox_vert {
  75.     box-sizing:border-box;
  76.     display:-webkit-flexbox;
  77.     display:-webkit-box;
  78.     display:-moz-box;
  79.     display:-ms-box;
  80.     display:-o-box;
  81.     display:box;
  82.     -webkit-box-orient:vertical;
  83.     -moz-box-orient:vertical;
  84.     -ms-box-orient:vertical;
  85.     -o-box-orient:vertical;
  86.     box-orient:vertical;
  87. }
  88. .flexbox {
  89.     box-sizing:border-box;
  90.     display:-webkit-flexbox;
  91.     display:-webkit-box;
  92.     display:-moz-box;
  93.     display:-ms-box;
  94.     display:-o-box;
  95.     display:box;
  96. }
  97. /* Transitions */
  98. .transition {
  99.     -webkit-transition: all 0.3s ease-in-out;
  100.     -moz-transition: all 0.3s ease-in-out;
  101.     -o-transition: all 0.3s ease-in-out;
  102.     transition: all 0.3s ease-in-out;
  103. }
  104. .transition_long {
  105.     -webkit-transition: all 0.6s ease-in-out;
  106.     -moz-transition: all 0.6s ease-in-out;
  107.     -o-transition: all 0.6s ease-in-out;
  108.     transition: all 0.6s ease-in-out;
  109. }
  110. /* State */
  111. .centered_hor {
  112.     position:absolute;
  113.     left:0; right:0;
  114.     margin:auto;
  115. }
  116. .centered_ver {
  117.     position:absolute;
  118.     top:0; bottom:0;
  119.     margin:auto;
  120. }
  121. .centered {
  122.     position:absolute;
  123.     top:0; bottom:0;
  124.     left:0; right:0;
  125.     margin:auto;
  126. }
  127. .hidden {
  128.     visibility:hidden !important;
  129.     opacity:0 !important;
  130. }
  131. .shown {
  132.     visibility:visible !important;
  133.     opacity:1 !important;
  134. }
  135. /* General IDs */
  136. #app_wrapper {
  137.     position:absolute;
  138.     top:0; left:0;
  139.     bottom:0; right:0;
  140.     height:100%;
  141.     width:100%;
  142.     overflow:hidden;
  143. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top