Sam Croft

Full-stack developer

Quick CSS tip: creating percentage width borders without using superfluous markup


Filed in: css, Uncategorized

Note: This article is about the physical width of a border based on its element’s size. This article is not about the border-width css property.

Lately I’ve been working on a lot of designs that require a percentage, or fixed, border width that is different to the width of the box model for the element it is being applied to. More often than not this is a centre aligned small border-bottom to visually separate one section from another.


Moving into a new studio—why it is the right time for Running in the Halls to expand in sq ft


Filed in: rith, Uncategorized

March 2012 was an incredible month for Running in the Halls (RITH). We launched Librarygame and were simply overwhelmed with the response from libraries all over the world.

I didn’t think it was possible to top the feelings we shared during launch week, but the momentum we experienced as a team in March has well and truly continued into April as we made the move into a much larger studio.


Running in the Halls launches Librarygame—gamification for public and academic libraries

  • 1 comment

Filed in: launch, librarygame, rith, Uncategorized

Badges and achievements you can unlock while playing Librarygame
Librarygame—a beautiful game to play in public and academic libraries

In October 2009 Running in the Halls (RITH) sat down and penned the idea of gamifying the library experience. The concept? To award points, badges and achievements for borrowing and returning items, accessing resources and physically visiting the library.


Posting data from a PhoneGap app to a server using jQuery


Filed in: android, forms, iOS, jQuery, MySQL, PhoneGap, php, Uncategorized

Recently I’ve had several requests to create an article about posting data to a server from a PhoneGap app so I thought I’d cover the steps I go through when dealing with this kind of requirement.

The method is extremely simple providing a few important steps are followed.


Using the CSS content property responsibly without compromising your design and markup


Filed in: css, html, Uncategorized, usability

CSS has a wonderful property; content. This property allows extra content to be added to a design directly from your stylesheet. Unlike JavaScript, however, it does not add the extra content to your markup after the DOM has loaded. The content will not appear anywhere in your markup, it only appears in the actual rendering of a page.

The content property can be used to great effect providing it is used responsibly in ways that do not break your page if the content, you are adding via this property, did not exist.


Minimal form markup; simple, slender and semantic


Filed in: forms, html, semantics, Uncategorized

Recently I have been creating a lot of forms for RITH‘s own product, Lemontree. When I create forms I’m always out to write lean markup, as semantically correct as possible while also maintaining enough CSS hooks to achieve the desired layout.

I hate forms that rely on bloated markup and for every form I create I am always left wondering whether or not I could have created something more efficient and correct.


Updated: loading external data into an iOS PhoneGap app using jQuery 1.5


Filed in: iOS, jQuery, JSON, MySQL, PhoneGap, php, Uncategorized

Update: Following the release of PhoneGap 1.0 and XCode 4 I have updated the Git repository to include a version built with PhoneGap 0.9x (the original version) and a separate version for PhoneGap 1.xx+.

Update: Due to some issues with the recent versions of Cordova I have updated the Git repository to also include a version built with Cordova 1.7.0.

My 2010 post about loading data into a PhoneGap application is by far the most viewed page of my blog so I thought I’d revisit it and write an article about a more efficient method I have been using, following the release of jQuery 1.5.

Previously I had been using the wonderful JSONp jQuery plugin because jQuery 1.4 and lower did not support out of the box error handlers for JSON requests. jQuery 1.5 does, however, and it’s made things simpler and more streamlined.


Creating a lightweight and semantic jQuery tabs plugin


Filed in: css, jQuery, plugin, Uncategorized

Earlier this year I wrote a tiny jQuery accordion plugin, for mobile projects, because I was sick of using non-semantic code snippets to create a very simple ui component. While writing it I realised that it would be reasonably straightforward to create a tabs version using the same principles.


Using a smattering of CSS3 and two background images to create a colour-burst effect


Filed in: css, jQuery, Uncategorized

CSS3 colour bursts

Recently I’ve been helping my brothers fiancée with her website. The site uses a lot of close-up photography layered using CSS backgrounds. In an effort to make things a little more interesting I wanted to create a simple effect of fading black and white images into colour versions.


Using a teeny-weeny bit of jQuery to add CSS inline backgrounds for blocks of text


Filed in: css, jQuery, plugin, Uncategorized

For as long as I can remember I’ve always used a particular style of typography design when working with print based material. It’s nothing groundbreaking, and I’m sure you have used it as well.

It goes something like this:

Mos Eisley spaceport: You will never find a more wretched hive of scum and villainy. We must be cautious.
A print-based approach to text backgrounds. Simples.