Pseudonym for Jekyll

Earlier this summer I started messing around with Jekyll. In the end I didn’t migrate to it, but I at least gained a little knowledge.

One way that I tried to learn more about how Jekyll works, was by creating a test site and building a theme. That theme sat locked away in a private Github repository. Until now.

I’ve just opened up the source for Pseudonym, the name I gave to the project. It’s really very basic, but I hope at least somebody gets some use out of it.

You can find the demo site at (yes, I own a .XXX domain), and source can be found in the Github repository, here.

A few notes and attributions (some copied from the readme)

  • I was also experimenting with Grunt.js. There’s a rudimentary gruntfile included, but the setup is incomplete. It was designed to build, concat and minify LESS files into CSS, various JavaScript files, and generate multiple sizes of the header images.
  • The theme is slightly responsive, but more work needs to be done here. Only tested on/targeted at desktop, iPad Mini, and my Nexus 4.
  • Header images are from Unsplash
  • Icons are by Font Awesome
  • I was messing around about with some newer CSS properties – the theme uses CSS columns in many places. While I’ve made it as cross-browser as I could in the time I spent on it, IE doesn’t look as pretty.
  • I’ve used Zepto, with a fallback to jQuery for IE.
About these ads

Only Use RGBA If You Need To

A small anecdote on some CSS usage which tripped me up a few days ago; it’s easy to get carried away and set all your color/background-color properties using the fancy-pants new RGBA. But only do so if you really need to specify the opacity value.

i.e. if you’re setting something like this: color: rgba(213, 265,17, 1);, set it as plain old RGB: color: rgb(213, 265,17);. The latter will render fine in IE, as far back as I was able to test (IE 7, I think), whereas the former only works in newer browsers (IE9+, Firefox, Webkit, Opera).

The “doh!” moment for me came when testing a stylesheet a few days ago. The layout worked fine, but for a moment I couldn’t think why none of the colours were displaying in IE8, until then I remembered I was using RGBA for everything. So off I went to create override classes for IE8, using Modernizr‘s .oldies class. I was about 3/4′s the way through the stylesheet when I realised 99% of the colours I was overriding had no opacity set (i.e. opacity value of 1), and so I could just specify them as RGB. Cue much slapping of the forehead! Lesson learned, and needless bytes saved.

Scalable and Modular Architecture for CSS

Scalable and Modular Architecture for CSS:

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There’s no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!

Creating a Stacked Paper Effect in CSS3

Replicating a stack of paper is a common design found on the web; it’s an easy way to make a design a little less harsh and digital by giving it an “analog” look. For a quick example, take a look at the “Chapters” WooThemes WordPress theme.

screenshot of the chapters theme, showing the stack of paper effect done using images

In the past I would have used a couple of wrapper divs in HTML, and some background-image CSS to get a vertically expandable (but probably fixed-width without a lot more work) content box. However, with the improvements in CSS3, along with rapidly improving browser support, I wondered if it would be possible to make a similar – and more flexible – effect without images. Continue reading