Code Archive

Responsive Adsense ad boxes with Bootstrap

Google Adsense have finally added the flexibility of responsive ad units to allow advertising to better fit in with responsive sites. At its most basic it’s as simple as inserting a piece of code into your HTML

Instagram filters recreated using CSS3 filter effects

Ever wanted to recreate Instagram filters on the fly using CSS3 (without needing to open a graphics program)? Now you can!

Parse Photoshop PSD files using Ruby

LayerVault has just open-sourced a library they have created to read Photoshop PSD files in Ruby. It allows you to parse the whole Photoshop document, inspect individual layers, even output a flattened image. Check out their post

Front End Web Developer Glossary (2013)

  Hey troops, just starting out as a web designer / developer? Have we got the thing for you! What is it you may ask? Well, we here at Design Pieces decided to scour the 2013 interwebs,

5 JavaScript/jQuery plugins for better typography

Beautiful typography doesn’t have to be reserved for print design.

How to Make Twitter Bootstrap Not Look Like Twitter Bootstrap

Bootstrap is probably the most popular responsive front end framework on the web today. But if we are being honest, you can easily spot a Boostrap styled website – or can you? I’ll take you through five

CSS3 in All Browsers – Rounded Corners, Drop Shadows, Glows and Gradients

CSS3 supports a bunch of nice new CSS features, including rounded corners, drop shadows, glows, and gradients. However, different CSS vendors will use different prefixes to standard CSS3 features while still in an ‘experimental’ stage. This means

IE Only Stylesheets and CSS

Targeting IE with specific CSS, is always a awful task, however I thought I’d cover the two basic ways to do it: in HTML using conditional CSS and in stylesheets using hacks. Conditional CSS Conditional CSS lets

How to Style HTML5 Input Placeholder With CSS

With HTML5 came the placeholder text for input and textarea elements, a welcome replacement for the javascripted alternative. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample

Best Clearfix for All Browsers (IE6+)

Gone are the days of putting your clearfix as a separate div, this is the simplest CSS clearfix that works in all browsers (including IE6). .group:before, .group:after { content: ""; display: table; } .group:after { clear: both;