February 2011 – 2 and a half years ago.

That’s the time since this site last got a complete makeover. A lot have changed in the last 2½ years, both in terms of the web, and my self.

So now’s the time for a new Jayj.dk.

I’ve taking the opportunity to go over some of the new things of the redesign – both the design and functionality.

The front page is no longer a list of blog posts but rather a useful frontpage, featuring my most popular themes, latest posts, and plugins.

Most people come to this site to download my themes which now is the first thing you see.

Notes about the redesign

Layout

For the layout, I use Flexbox. The amazing new layout mode is called “the future of CSS” and makes much it easier to do layouts in CSS.

If you want to learn more about Flexbox, here’s some links to get you started:

• MDN: Using CSS flexible boxes
• CSS-Tricks: A Complete Guide to Flexbox
• Smashing Magazine: Designing CSS Layouts With Flexbox Is As Easy As Pie

I use Modernizr to fall back to floats if the browser doesn’t support the latest Flexbox syntax. Firefox doesn’t support flex-wrap yet. To deal with that I use:

@supports not (flex-wrap: wrap) {
	[...]
}

If you use LESS, I have a gist with my collection of Flexbox mixins.

The site is also now responsive so it should look amazing on all devices. If not, please contact me!

Icons

I use the icon font Genericons around the site. It’s free and perfect for WordPress sites.

It’s used for post format icons, button icons, social icons and more.

Font

I use the gorgeous, and hugely popular, Open Sans typeface. It’s with no doubt my favourite font.

SVG

I use SVG for the logo and header background.
Some of the advantages of using SVG is they look amazing no matter what resolution, screen size, or zoom level, or the users device has.

The header background is a 708 byte SVG, generated by SVGeneration.

---

Powered by

It’s not just on the frontend there have been changes. A lot have changed in the backend. The site, of course, runs on WordPress.

Hybrid Core

The site is powered by the amazing Hybrid Core theme framework. I first used the framework for my Cakifo WordPress theme and it’s a pleasure to work with. It has features such as Get the Image, Breadcrumb Trail, per-post layouts, and super useful widgets. And the community around it is amazing 🙂

Plugins section

The plugin section is a custom post type, combined with the I Make Plugins plugin. The plugins automagically grabs the plugin information from the WordPress.org plugins repository so the information is always up-to-date.

Contact form

The contact form is powered by Gravity Forms instead of Contact Forms 7.

---

Pictures

Old Design

New Design

If you have any comments or spot an error, please let me know 🙂