smacss

[Heidel]

CSS handling the transition

@keyframes fade {
0% { opacity:0; display:block; }
100% { opacity:1; display:block; }
}
.is-visible {
display: block;
animation: fade 2s;
}
.is-hidden {
display: none;
animation: fade 2s reverse;
}

Модуль иконок

<li><i class="ico ico-16 ico-inbox"></i> Inbox</li>

.ico {
    display: inline-block;
    background: url(/img/sprite.png) no-repeat;
    line-height: 0;
    vertical-align: bottom;
}
.ico-16 {
    height: 16px;
    width: 16px;
}
.ico-inbox {
    background-position: 20px 20px;
}
.ico-drafts {
    background-position: 20px 40px;
}

@темы: HTML, Верстка, smacss, CSS3