Deck Fifty Design Blog: CSS
19
Mar
CSS border-box
written by Shane Graham
The typical CSS "box model" (also known as content-box) will produce something like this:
width + padding + border = total/visible width of box
height + padding + border = total/visible height of box
Lets look at the example div below, with the typical box-sizing: content-box.
div {
width: 240px;
height: 240px;
padding: 20px;
border: 10px solid #fff;
}
In this case the padding and border will apply to the outside producing at total visible width of 300px (240px + 40px + 20px). We'd usually need to reduce the width of the box until everything fits just right.
Or we...
22
Feb
To mobile or not to mobile; that is the question
written by Shane Vincent
Statistics tell us that about 80% of Canadians use a mobile phone, with roughly one quarter of them being smart phones (iPhone, Android, Blackberry etc). Every day, more and more people are accessing the web on their mobile device while on the go. When you consider that mobile plans run their course on 3 year cycles, with options to renew/upgrade sooner, my prediction is that within the next three years you will see a large increase in mobile browsing rates using smart phones such as the iPhone. The question isn't to mobile or not to mobile? The question becomes how can I get mobile right now...
03
Jan
Safari's Web Inspector
written by Shane Vincent
In my last post I outlined some of the benefits of Safari in your day to day browsing. Today I'm going to highlight a lesser-known feature of Safari that might just be the first step in considering Safari for web development as well.
In my opinion, the single biggest barrier to using Safari in the web development profession is its lack of the Firebug extension. If you haven't heard of it already, Firebug is a tool for browsing and manipulating the CSS, HTML, and JavaScript of any web page, on the fly. This, as you could imagine is an invaluable tool for us developers. I can honestly say that...