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 http://dev.pseudonym.xxx/ (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)
- 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.
Coda 2 Coming May 24th
Coda 2 coming May 24th – it’s about time! Coda is one of the reasons I keep coming back to the Mac platform. It’s one of those apps that is a joy to use. Espresso overtook it for a while, but this new version looks like a very worthy upgrade – check out the Coda Tour video.
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:
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?!
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.
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