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 🙂
One thing that probably will change soon is the width of the main content area. It’s to narrow right now.
And it has changed 🙂
Jasper
First time visiting your website, so I didn’t get to see your old design. This new design is class, great design, everything stands out so clearly!
Best of luck
Ruairi 🙂
Thank you for the kind words! 🙂
Test
🙂
Hi Jesper,
Thanks for all your hard work it’s certainly appreciated by me and your helping me learn lots in an easy to understand way.
Thank you, Paul 🙂
Hi
Great new design but what you use Flexbox over Bootstrap.
I used your bootstrap theme to learn how the template worked as I do this just for fun I am not a pro, do you think Flexbox is easier for a novice.
Cheers
Ian
Hello Ian,
Thank you.
I don’t really know if it’s easier to learn but I do believe that Flexbox is (a part of) the future of CSS layout. What sucks about Flexbox currently is the browser support and many different versions of the implementation.
Eric Meyer’s talk “The Era of Intentional Layout” from W3Conf 2013 is worth a watch:
He talks talks about some other new CSS layout stuff.
Hope that helps you a bit. Feel free to write again 🙂
– Jesper