blog

New static website theme

demo website template

I have a need for speed, well speedy websites anyway. My goal is to build a bunch of super fast website themes that I can base my future work on, so here’s my first attempt. It’s a lightweight, responsive static website theme.

The entire website CSS is only 1.67 KB and the JavaScript is only 485 bytes gZipped! I’ve set up a demo version on my staging website and it runs like a scalded dog. 🙂
You can download the files on Github.

Browser Support

I’m finally getting settled (or kinda settled) into having a new baby in the house and I hope to get back into a routine of writing. I am really enjoying experimenting with some of the new features of HTML5 and CSS3, however, sometimes it doesn’t work well with older browsers and I wonder about the new feature support.

If it were just me I wouldn’t be concerned about browser compatibility, but I have to buy diapers by the truckload. And working for me doesn’t buy diapers or even wipes, so when I’m working for others I try supporting the latest browsers and I like to stay compatible with 2 previous browser versions. I just came across this website, and it seems to be a pretty good resource when checking for browser compatibly issues http://caniuse.com/.

HTML5 Responsive Images and CSS3 Image Flipping

It’s hard to have a responsive website without responsive images, I usually use the HTML5 figure “figure” or the aside “aside” tag for responsive images. In your CSS just assign your width, max-width and/or min-width to the tag.

In the code below, the image below will not exceed 800 pixels wide or get smaller than 300 pixels wide.

figure{min-width:300px;max-width:800px}
figure img{width:100%;}

Using CSS3, we can also flip images horizontally without the use of an image editor or JavaScript.

aside img{
-moz-transform:scaleX(-1);
-o-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
}

Check out the demo here, be sure to resize the browser window.