Archive for CSS

Introducing TeamHome

I built a micro-SaaS as my pandemic side project:

TeamHome.app – An internal company directory designed for remote teams. Try it out and let me know what you think.

Read on for details & some background…

Read the rest of this entry »

Uploading static assets (CSS/JS) to S3 for CloudFront CDN

For a new Backbone.js + Flask project I’m using grunt + grunt-contrib, RequireJS’s r.js, Flask-Assets / webassets for static file (LESS/CSS, JS) compilation. But I needed a good way to get my nicely optimized static files onto a CDN and serving proper HTTP headers.

Using the excellent s3cmd tool, here’s what I came up with.

This example will break for browsers/proxies that don’t support gzip, but this is fine for my needs. Any other solution would either require a custom origin web server or writing different filenames in HTML depending on the request coming in. But since I want to use S3 as my origin this is the easiest/simplest solution.

Since all assets are “built” with a md5 version number hash in the file name, I want far futures headers to cache permanently.

Largest website width to support 1024×768 resolution

Currently, web designers are advised to support browser resolutions of widths 1024px and greater based on current browser usage data. The idea is that you want your site’s design to look good, and not require a horizontal scroll bar for those users. But screen resolution and browser width are not the same thing, because of browser chrome, scroll bars, and because many users browse without their window being maximized.
Read the rest of this entry »

Fixing Safari’s 1px background-image centering bug

I’m working on slicing and CSS for a new theming project for Magento Commerce and was plagued with a CSS bug that affects WebKit (Safari and Google Chrome).  After some searching I found that several other people have had the problem, but I didn’t see a comprehensive writeup of the solution.  Here’s what I found…

Read the rest of this entry »

CSS Tabs, BrowserCam, and Temporary Email Addresses

After spending time today with frustrating IE6 CSS issues with borders on ul and li tags, I finished my CSS navigation tabs. The CSS is based on the XHTML produced by the WordPress K2 theme, but can be easily matched for any site.

css for k2 theme tabs in wordpress Read the rest of this entry »