A grid system in SASS/Compass

Update! Check out this post for more refined ideas + some practical considerations when working with ‘certain’ CMSs.

Driving home this evening I was inspired to write my own CSS grid system. I HATE the idea of bloated CSS frameworks. I’ve never been able to bring myself to use one, despite the obvious advantages. I do, however love SASS and particularly Compass (wait, isn’t that a framework already..?!).

The solution is simple: write my own. I haven’t really started yet, but the basic setup took around 10 seconds using SASS and I just had to share it!

.row-container {
  width: 100%;
  > div {
    float: left;
  }
}

$columns: 12;

@while $columns > 0 {
  .span-#{$columns} {
    width: percentage((1 / 12) * $columns);
  }
  $columns: $columns - 1;
}

which magically becomes:

.row-container {
  width: 100%;
}

.row-container > div {
  float: left
}

.span-12 {
  width: 100%;
}

.span-11 {
  width: 91.667%;
}

.span-10 {
  width: 83.333%;
}

.span-9 {
  width: 75%;
}

.span-8 {
  width: 66.667%;
}

.span-7 {
  width: 58.333%;
}

.span-6 {
  width: 50%;
}

.span-5 {
  width: 41.667%;
}

.span-4 {
  width: 33.333%;
}

.span-3 {
  width: 25%;
}

.span-2 {
  width: 16.667%;
}

.span-1 {
  width: 8.333%;
}

With an HTML structure like:

<div class="row-container">
  <div class="span-4">
    <p>Stuff</p>
  </div>
  ...
</div>

Not bad for 10 seconds work! Let’s see how long it takes to build something (responsive) that can actually be used for production stuff. Fun, fun, fun :)

5 course baroque guitar by Ivo Magherini for sale

Update: The guitar has now been sold!

I’m selling my guitar built by Ivo in 2006. Ivo is probably most well known for his guitars and this is a great instrument that has served me well in the opera pit and concert hall for many years!

Due to it’s life as a working instrument the guitar has a bit of wear-and-tear on the soundboard but is otherwise in good condition. Comes with a Kingham case (in good condition).

I’m looking for 22.500 SEK / £2200 for the instrument. Don’t hesitate to get in touch with any questions you might have.

ConcertPress released to WordPress plugin repository!

Well, it finally happened: I’ve released ConcertPress to the WP plugin repository. It’s been a long time coming and was just a matter of finding the time to fix those last few bugs and dare to release it into the wild!

ConcertPress is an events management plugin specifically designed for classical musicians. It’s largely inspired by the excellent GigPress which I used for a few years. GigPress is fab for most musos and the main difference between it and ConcertPress is the ability to add programmes and programme details.

ConcertPress can be downloaded via the WordPress plugin repository or via github.

Welcome to richardsweeney.com v4.0!

A warm welcome to the fourth incarnation of my website and blog. The site is (finally) now fully responsive (the previous incarnation was my very first attempt at responsive design) and the theme design is (obviously) my own. For those of you don’t know what ‘responsive’ means: the website adjusts to different screen sizes, reflowing content layout as required for better readability.

My goal this time round was (as well as creating a responsive site) to not use any WordPress or JavaScript plugins. This time I wanted to build everything myself. I’m delighted to say that I managed it all except for the plugin I use for server-side caching, which is not my area of expertise. WP Super Cache is such an excellent solution and so very easy to implement, so I used that.

So, what did I do then?!

Well, I build the contact form on the contact page. The form uses JavaScript validation (my own) and is submitted via AJAX. I used Akismet for spam protection on the server-side and a honey-pot* as an extra anti-spam measure. Works great.

I also wrote my own comment form script (see below this post!), which again uses Akismet for spam checking and simple JavaScript validation. Comments are submitted via AJAX.

Speaking of AJAX… I also wrote a custom pagination solution for my blog in AJAX. I used the HTML5 history API to push changes in page to the URL so all pages will have proper, linkable URLs. I freely admit here that I used Benjamin Lupton’s History.js to sort out all the rough edges of different browser implementations of the API!

Also on the blog page I use a custom excerpt function that’s a bit more versatile than WordPress’ built in the_excerpt().

I also wrote my own script in jQuery to fetch my Instagram feed (check out the right-sidebar/below this post). Fetched results from the Instagram API are cached in localStorage (where available) for speedy subsequent page visits. For good measure I also wrote the lightbox script used to enlarge the images. The twitter feed is also written in jQuery and all scripts are loaded asynchronously so that page load is not blocked.

That’s about it! It’s a great feeling to have such control over the entire contents & markup of a website. I ♥ WordPress.

*An input field in the form that is hidden from visitors via CSS. As it’s hidden, user’s won’t fill it out, but if form fields are filled out automatically (ie by a spam bot), it will help to show up spam.