Jesse Pearson's personal design blog.
These weren’t TOO hard to find, however, they weren’t as easy as a Google search.
I had two clients this week that wanted me to change the colors for info and message, so I had to make sure I got all of the existing ones. The output actually comes from the three files in woocommerce/templates/notices if you’re wanting to modify the output, as well.
I wish I could say I figured it out myself, however, I didn’t. I needed a solution that allowed me to take an iframe posted in a page (to load external content) and make it responsive, keeping with the mobile-first mindset.
Initially, I started with multiple breakpoints, however, due to the external content is video, there were always black bars either at the top and bottom or sides of the video. Not really the best solution, I wasn’t happy with it, and Google search turned up Chris Coyier’s post on css-tricks. He runs through a bunch of ways to make several different types of media responsive.
Even though the solution for the iframe/video adds an extra div, I’d much rather have that then some heavy JS trying to keep track of what size screen the user is on.
When working on a WordPress project, I have always done a one off theme for all of my clients. I either create the graphical layout, or it is sent to me and I do the slicing and begin coding from scratch. In a recent cooperative project where the client was the lead and also a developer, he wanted to go with a parent theme and just create a child them.
Even though it wasn’t new to me, it was. Stay with me for a moment… I have worked with child themes previously, but I have never created one. It wasn’t difficult, however, with this one, it took a little more effort than normal. With child themes, I believe, most developers just toss in their own custom CSS to change the layout, colors, etc and call it a day. It wasn’t that easy with this one due to some custom post types needing to be displayed, which calls for custom templates.
It was definitely a learning experience, and I see the added value of having a parent/child theme development process. Parent themes allow for upgrading of the parent theme (bug fixes, new tech, etc) without losing the customization of the child theme. A parent theme also gives you a foundation to start with, your own personal framework.
With all of that being said, I believe I am going to develop my own personal parent theme to use with projects. This will allow me to bring in things I find myself repeating over and over again, and will also speed up the development process. It’s a win win.
Hooray for me, got a new design up. Dove into this one head first using SASS, along with an additional framework/mixin called Bourbon.
For those not in the know, SASS is a parallel to CSS. It’s actually a language that allows you to use variables, nesting and function like elements called mixins. Typically the SASS will need to be run through a pre-processor to compile it into plain old CSS. If that doesn’t put a twinkle in your eye, then you need to be shown what happens when the SASS is processed to get it, just like I did.
I wrote in SASS, with a hint of Burbon:
@include font-face(libelsuit, '../fonts/libelsuit');
SASS was then translated to CSS:
@font-face {
font-family: libelsuit;
font-weight: normal;
font-style: normal;
src: url("../fonts/libelsuit.eot");
src: url("../fonts/libelsuit.eot?#iefix") format("embedded-opentype"), url("../fonts/libelsuit.woff") format("woff"), url("../fonts/libelsuit.ttf") format("truetype"), url("../fonts/libelsuit.svg#libelsuit") format("svg");
}
Get it now? That’s just the tip of the iceberg. If you code CSS by hand, I strongly suggest checking out SASS, as it can not only speed up development, but can also make it much easier to use reusable code.
Do you stick with what you know? Do you try to mimic or use the new trends out there? Do you try to make the next “hot” item? Honestly, I have no clue. I am trying to figure this all out for my own personal project.
One thing is certain, I am going to use the Twitter Bootstrap for my basic structure. One major reason is the cross browser compatibility that it offers, with its responsive attributes following a close second.
A basic design already exists, it’s simple, clean and gosh darn it, I like it. Now just to finish it up between other items.