Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

A snippet that removes the default GitHub stylesheets and allows you to restyle a Gist.

Previously I wrote a post about Media Queries which utilised GitHub Gists for the code samples.

I love using Gists for code samples, they look great and it’s good to get your little snippets online and sharable with others - they are automatically versioned so you can directly clone or fork them, dead easy.

However I found that on a mobile device, they aren’t really scalable and on my blog, they look pretty dreadful! Something like this:

Now you can’t really control the styles very well without hacking and overriding their CSS - it’s very specific - so I wrote a little bit of script that will remove the embedded stylesheet ready for you to restyle Gist elements however you desire.

The JavaScript

Adding styles back on

Here’s a list of CSS selectors for basic styles that you can now adapt and change - probably not an exhaustive list obviously but a start!

For now I’ve kept the basic colours and layout, but added some media queries around the Gist to display it a little nicer for mobile devices. Go on, resize the screen - I know you want to...

I think it'd be cool to style them quite extensively at some point, I imagine styling them like one of the iTerm themes I use could be pretty nice in the right context.


TL;DR

GitHub Gists are great, and here is a way to remove the default styling injected and restyle them to your heart's content!