Great mixin for vertical align

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Advertisements

Axiomatic CSS and Lobotomized Owls

The owl selector (*+*) is a great solution for bottom margins. It selects every element with a matching preceding element.

Also:

All the studies I’ve read, including Steve Souders’ and Ben Frain’s, have concluded that the comparative performance of different CSS selector types is negligible. In fact, Frain concludes that “sweating over the selectors used in modern browsers is futile.” I’ve yet to read any compelling evidence to counter these findings.

It’s all about file size.

http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

Michael Stipe’s favorite way to declare font sizes

I started using ems around 2002, and I never liked it. Using ems meant having a calculator handy just to define a font that was listed at 11px in the style guide. The main issue with ems is inheritance.
If you wrote a rule like this:

li {font-size: .75em}

An li within an li would have only 75% of the font size you really wanted.
Rems, on the other hand, are only relative to the html root (thus, root em).
So,

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

This article explains the basics:
http://snook.ca/archives/html_and_css/font-size-with-rem

And more advanced:
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/

Box with rounded corners and and straight bottom border

Button with pseud border

I got a request from a designer to build a button like this with rounded corners (8px radius) and a STRAIGHT gray bottom border. Simply adding a border via bottom-border: 1px solid gray would have yielded a border that curls half way up the corners.

I thought about placing an HR element inside the button, but that wouldn’t match the curvature of the box. I finally decided to exploit the :after pseudo selector to insert my own custom “element”.  I had to set the border size to 3px to get the straight line effect.

.button {
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    float: right;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 0;
    position: relative;
    right: 0;
    text-align: center;
    text-decoration: none;
    width: 178px;
    background: none repeat scroll 0 0 #F6F6F6;
    color: #5D536B;
}
.button:after {
    border-bottom: 3px solid #CECECE;
    border-radius: 8px;
    bottom: -1px;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    width: 100%;
}

If that’s too subtle, check it out with a lime border.
button with lime border

 

 

git stash drop

My buddy, Jeff, just told me about this handy git command.
git stash drop
It will delete your last stash. Or, if you want to drop a specific stash you can git stash drop <blah>
git stash clear will remove all your stashes.