css cheat sheet

https://hackpad.com/PSD-to-HTML-Instructions-Guidelines-WzxGCccNO8M

https://blog.omgmog.net/post/why-your-reasons-for-no-longer-using-a-css-pre-processor-are-wrong/

font suff / size conversion table

http://www.abdullahyahya.com/2011/10/convert-photoshop-font-point-pt-to-pixels-px/

http://pxtoem.com/

http://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/

Remove bottom margin from img

• <img src="your-image.jpg" style="vertical-align: bottom;">

background fade transition

transition: background 0.6s ease 0s;

allow to break words

a, a:visited {
  word-wrap: break-word;
}

responsive resizing while keeping an aspect ratio

From http://www.mademyday.de/css-height-equals-width-with-pure-css.html

template:

<div class="box" <?php echo ull_rimg_bg_attributes('image.jpg') ?>>

  <div class="box_content">
    <h2>foo</h2>
    bar baz
  </div>

</div> 

css:

.box {
  position: relative;
  width: 50%;   /* desired width */  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;  
} 

.box:before{
  content: "";
  display: block;
  padding-top: 50%;  /* aspect ratio */
}

.box_content{
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

complete responsive centering

<div class="container">
  <div class="box">
    <h2>Hello</h2>
    <p>Some content</p>
  </div>
</div>

.container {
  display: table;
  width: 100%;
  height: 100%;
  /* If you want "min-height" here, it's not allowed for tables. 
     Use "height" instead, the table grows anyway */
  /* Do not use horizontal padding here as it busts width: 100% */
}

.box {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  /* You cannot use margin for table cells, use padding instead */
}

center multiple responsive fixed-width items

<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

.container {
  text-align: center;
} 

.container ul {
  list-style-type: none;
}

.container li {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 226px;
  margin: 0 10px 1em 10px;
  padding: 0 15px;
}

same as above, but left align the items, still center the whole block

using custom fitContent() function from miscellaneous.js

<!-- HTML -->
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

<script type="text/javascript">
  $(window).load(function() {            
    $(".container ul").fitContent();
    $(window).resize(function() {
      $(".container ul").fitContent();
    });
  });
</script>


/* CSS */
.container {
} 

.container ul {
  list-style-type: none;
}

.container li {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  width: 226px;  
  padding: 0 15px;
}

Same as above but without javascript by omitting the unordered list

<div class="items">
  <div class="item">
    ...
  </div
  ...
</div>

CSS:

.items {
  overflow: hidden;
  margin: 0 auto;
  display: table;
}

.item {
  float: left;
  width: 300px;
}

z-index issues

Every z-index statement needs "position:" to be explictly set!

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

vertical center of image in a div

set line-height = div height, set image vertical-align:middle

img in div creates bottom space

put img in div. float img left. overflow hidden on div.

logo/intro total centering

<div id="intro_container">

  <div id="intro">
    <?php echo link_to(image_tag('/images/intro.gif'), '@homepage') ?>
  </div>

</div>

html, body {
  height: 100%;
}

#intro_container {
  position:relative;
  height: auto !important; /* normale Browser */
  height: 100%; /* IE6: setzt dies wie min-height um*/
  min-height: 100%; /* normale Browser */ 
}

#intro {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 338px;
  width: 600px;
  margin-top: -169px; /* negative half of the height */
  margin-left: -300px; /* negative half of the height */
}

Inspect mouseover elements (Firebug)

For Javascript events such as Mouse over.

• Open Firebug/Inspect an element.
• Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
• Put your mouse over the element and don't move it from this point forward.
• Use your ?/? arrow keys to manoeuvre in Firebug.
• Use your ?/? arrow keys to expand/contract code with + or -.
• Double tap Tab to get to the CSS pane.
• Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
• Hold Shift and double tap Tab to get back to the HTML pane.

@see http://stackoverflow.com/a/28174018/4968441

Multi Column (column-count)

Avoid list item ugliness:

<ul style="column-count: 2;">
  <li style="break-inside: avoid;"></li>
  ...
</ul>