Introducing Blogger Boilerplate

Last update, 6 June 2014
3 days ago when i interested to take look at Tympanus.net collective #117. Whoa i saw "Tumblr Boilerplate" #BlingBling by Andy Leverenz. Later, i visit the website at tumblrboilerplate.com. Aim to avoid slow setup times by developing a custom theme fast.

After that, i make my own Blogger Boilerplate. Mine is bit different with Andy Leverenz's. My boilerplate is armed with powerful meta tags for SEO importance. So, you can develop other blogger custom theme without worry about SEO.

Cons

1. Terribly heavyweight

Yeah, only that the problem. It's due to blogger's commenting system. Rarr.. i want to eat that code.

Available in github right now. Hope you like it 

Pure CSS icons

Howdy..

This is just my experiment a month ago. But i created this as private pen. So i publish it few weeks ago, but you as reader don't know yet. This set contains 52 icons 1 animated icon included #HiYey. Now i stopped work with it. I heavily bored with icon. Later if i want, i'll add more soon. Yeah, only small possibilities i want. +/- 24px sized

Browser Support

Work well in chromium (tested in COMODO dragon and chrome) and firefox. I hope in all modern browser. Only both chromium and firefox gecko i've tested.

Feel free to use or share it. If you like you can create a backlink to this blog and i'll appreciate it. Only available in codepen

CSS pseudo Drop Caps

Drop caps has been used for a long time for printing media. Now, drop caps arrive to the web.

using :first-letter pseudo made easy. No need extra markup, it mean you no need to attach a class name to first letter manually. Sadly not supported on IE < 9, and work in most modern browser including IE9 or above. IE is dead, i dislike IE for a long time.

Our target is to style paragraph first letter without extra markup or class name and use CSS only. Try this

p:first-letter {
  font-size: 400%;
  color: #903;
  float: left;
  font-family: 'Times';
  line-height: 1;
  padding: 0 10px;
}

Code above simply tell you how to make a drop caps. Note: Keep in mind, :first-line pseudo selector is not supported on IE8 or lower. Probably, you need a fallback with extra markup. and the cross browser way..

<p>
  <span class='dropcap'>L</span>orem ipsum...
</p>

Now style the element with dropcap class name. Now, you can use dropcap on all modern browser including IE8 or lower.

.dropcap {
  font-size: 400%;
  color: #903;
  float: left;
  font-family: 'Times';
  line-height: 1;
  padding: 0 10px;
}

Do you have a better suggestion? Tell me