Archive for the ‘Web Development’ Category

LESS CSS Font-Size (Parametric Mixin) Function for Pixel to REM

Monday, July 16th, 2012
Posted in Web Development · Tags:

I made a Parametric Mixin in LESS that will convert your pixel sizes to REM.


/*define this mixin first - make sure @target_size is greater than 0*/
.calc_font_size (@target_size:16px, @base_size:16px) {
font-size:@target_size;
@rem:(( round((@target_size / @base_size) * 10000) ) / 10000);/*so it can be rounded a bit more*/
font-size:~`"@{rem}".match(/\d+\.?\d+/) + 'rem'`;
}
/*set the body font size*/
body {font-size:100%;}
/*example to use*/
#footer {.calc_font_size(12px);}/*pass in the font-size you want in pixels*/

That will generate the following CSS

body {font-size:100%;}
#footer {font-size:12px; font-size:0.75rem;}

This mixin will output the size in pixels first then output them in REM.

Responsive Images Scaling or Squishing Issues

Friday, July 6th, 2012
Posted in Web Development · Tags:

I was setting up responsive images and ran into an issue that the images were being squished and squashed. And it was because the image tag had a height attribute set in HTML. It’s easy to overcome this with CSS though.


<style>
@media only screen and (max-width:959px) {
img {max-width:100%; height:auto !important;}
}
</style>
<img src="image.jpg" width="150" height="150" alt="my image">
</style>

How to test for any TextLinkAds first

Sunday, April 15th, 2012
Posted in Web Development · Tags: , ,

If you run Text Link Ads with the WordPress plugin, you might run into a situation where you want to check to see if there are any ads before you output them on your site. The reason, maybe that you have some heading or decoration near them that depends on them showing up. Well, I made a little hack to do just that.


<?php
/*homepage only*/
if(is_front_page() && function_exists("tla_ads"))
{
//hack to see if we have any ads available
global $textlinkads_object;
if (count($textlinkads_object->ads) > 0)
{
//output whatever heading or decoration you want here
tla_ads();//show ads
}
}
?>

Stop using 960 pixel width web designs for no reason

Friday, March 4th, 2011
Posted in Web Development

Something that’s been a pet peeve with me, is that too many sites use 960 pixels, no matter how much content a site has. I understand it works great for at 1024 width resolution and there is nothing wrong with white space. But I’ve seen too many sites use it with no thought. Often times you see a site and there is only a paragraph or 2 in the left and 1 in the right and the design doesn’t utilize the whitespace and lack of information on the page. Does this mean use 760px (good for 800 width resolution)? Personally I think if you want your site to stand out a bit, you should use a smaller size width or a different width size than those 2 standards, but again it depends on how much content you have and how your design handles varying amounts of content.

Now about centering pages, I know resolution widths these days can be huge on wide screen monitors; However if you want to set your site apart a little, place it slightly off center. Depending how off center you place it, you may want to balance it off with a subtle background graphic or something on the other side or slightly on the opposite side. I’ve done this on a few sites and it really seems to make the site seem fresh, compared to the 960px landscape. But perhaps you know of the 960 grid system CSS framework and think its the only way to design.

Calculating the Moon Phase Part 2

Monday, January 4th, 2010
Posted in Web Development · Tags: ,

In an older post about Calculating the Moon Phase, I converted the some code I found to PHP. However the Lunar Phase Calculator has some more information (ecliptic latitude and longitude in degrees, the moon’s distance in Earth radii, etc.), the other one doesn’t, so I went ahead and converted it from JavaScript to PHP.
(more…)