Designing with SASS

April 7, 2014 ::

This past week, I ported the stylesheet for a web design project I’m currently working on from the traditional stylesheet to one formatted with SASS. And holy crap, y’all, how have I not started doing this sooner?

I’d heard about CSS preprocessors a little while back, and shortly after that WordPress added support for both SASS and LESS. Since I wasn’t working on any design projects at the time, I didn’t devote any attention to learning more about them. But I did read a couple of brief overviews, and a couple of items piqued my interest. The first was the ability to use variables to set a value once, use it multiple locations in your stylesheet, and then be able to change all the values at once simply by adjusting the value of the variable. This is a particularly handy tool with colors, since many elements in a site design use the same color values. Where before you might have:

.example {
     color: #ffffff;
     }

With SASS, you can create a variable called $font-color: #ffffff; and use it in place of your color value, thusly:

.example {
     color: $font-color;
     }

Now you can use the $font-color variable on any element that will use the same color in your design, and if you decide later that a different color will work better, just swap the value in the variable and the preprocessor will apply it to every element. Huge timesaver, that.

Another thing I appreciate about preprocessors is the ability to nest styles. Child elements in the nest automatically receive the parent classes, selectors, or identifiers in the rendered output. This eliminates the need to type those identifiers repeatedly the way you would in traditional CSS and makes your stylesheet easier to read. Instead of:

.main-navigation {
     margin-top: 5px;
     }

     .main-naviation ul.nav-menu, .main-navigation div.nav-menu > ul {
          border: 0;
          }
	
     .main-nvaigation li {
          font-size: 1.5rem;
          }

You can nest your elements like so:

.main-navigation {
     margin-top: 5px;
	
     ul.nav-menu, div.nav-menu > ul {
          border: 0;
          }
	
     li {
          font-size: 1.5rem;
          }
     }

The preprocessor then renders the output like this:

.main-navigation {
    margin-top: 5px; }
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
      border: 0; }
    .main-navigation li {
      font-size: 1.5rem; }	

Again a huge timesaver.

One of my other favorite features is the ability to split the stylesheet out into individual files, which the preprocessor then builds during processing. There’s still only the one HTTP request, and so any overhead normally incurred from the @import call is eliminated. For my project, I broke my stylesheet in six smaller files — one each for my variables, site body, header, content area, sidebar, and footer. Breaking my stylesheet down this way accomplished two things: 1) it made my stylesheet more manageable by reducing the amount of scrolling I needed to do, and 2) it made it easier to organize the elements for each individual section. At the final result, my based stylesheet ended up looking like this:

/*
 Theme Name: New theme
 Theme URI: newtheme
 Description: Twenty Twelve child theme
 Author: Jim Stitzel
 Author URI: http://jimstitzel.com
 Template: twentytwelve
 Version: 1.0
*/

@import url("../twentytwelve/style.css");

@import 'variables';

@mixin search-border-radius($radius) {
	-webkit-border-radius: $radius;
	   -moz-border-radius: $radius;
	    -ms-border-radius: $radius;
	        border-radius: $radius;
	}


@import 'body';
@import 'header';
@import 'content';
@import 'sidebar';
@import 'footer';

Technically, I could have split off the mixin into its own file, as well, but since there’s only the one, I opted to leave it where it was.

As I said above, WordPress now includes preprocessor support for both SASS and LESS inside its Jetpack plugin. You can also use a desktop preprocessor, like Koala, to do all the heavy lifting and then just upload the final stylesheet to your site.

I’m very pleased and happy with the result of my first experience with SASS. It has already saved me a lot of time and effort, and I plan to use it for every design I do in the future. If you want to read more about either SASS or LESS, I highly recommend you check out their respective sites. It’ll change the way you design.

210 (Weight Loss and Health)

March 29, 2014 ::

I’m delighted. For the past couple of days, I’ve been able to stand on the scales and see a number I haven’t seen since last fall — 210.0. Ever since I started losing weight a couple of years ago when my daughter was born, I’ve had a goal to hit at least 200 pounds. At the time I weighed in at 260, and I was experiencing significant health complications. The extra weight was adversely affecting my already very troublesome back and made my depressive episodes more likely to occur frequently and to last longer with greater severity. And since I am a comfort eater, the thing I tend to do when depressed is the very thing I shouldn’t do.

Within a year of my daughter’s birth, I’d trimmed 35 pounds off that initial 260, thanks in part to five months of what I call “New Daddy Freak-out.” As it turns out, one kind of stress causing me to pack on pounds, and another causes me to nearly stop eating altogether. Fortunately, I was able to use that to my advantage to get the weight loss process started and to change the way I eat.

I felt healthier than I had in years. It’s amazing to me how much of a difference shaving a few pounds off can make. Over the next year and a half, I managed my diet better and was able to be more active around the farm. I burned off more the fat stores I was carrying around and converted some of it into muscle, which itself helped with the fat-burning process. This last fall, I was consistently down to between 205 and 210 pounds on a regular basis.

Health professionals often tell you that you shouldn’t weigh in every day when you’re trying to lose weight because the numbers tend to change slowly over time, which many people find discouraging. For me, I’ve found it serves very well as a general measure of what I’ve eaten over the past 48 hours. If the numbers tick upward a pound or two, I know I need to manage what I eat a little better over the next couple of days to make up for it. Where before I had a very difficult time managing my weight, I found that after a year I could do so almost without even thinking about it — a far cry from where I started.

There was an unusually large amount of food over the holidays this past year (Thanksgiving through New Years). Our family was exposed to a number of delicious delicacies we don’t normally get to see, and by the time the calendar flipped over to the new year, I was weighing in consistently around 220. And of course, this has been the longest, hardest winter we’ve seen in decades, and my depression always becomes worse in the winter. More so this year due to the severity of the weather. Getting those ten extra pounds off was simply not going to happen. The best I could hope for was to keep from gaining anymore, so for the past couple of months I’ve been trying to actively rein in my eating habits a bit more so that they more closely resembled the habits I’d established over the past couple of years. And it worked! I didn’t lose any weight, but I didn’t gain any more, either.

My son arrived in the world nearly three weeks ago, and along with it some significant family changes. I was more prepared this time, though, so the stress I experienced for five months with the arrival of my daughter lasted a matter of mere days with my son. But it was enough to push me in the right direction. I backed off on my eating again — partly because I was too tired most of the time to be interested in food — and started shedding the weight. Now I’m hovering around 210 again, and I’m delighted. With any luck Spring will actually arrive soon (though Winter is certainly making a bid for sticking around as long as possible this year), and I can get more active around the farm once more. Being able to move and work will burn those extra calories, rebuild and retone some of the muscle I’ve lost over the last few months, and put me back on the path to fitness.

My goal is to hit 200 or lower before the end of the year. I’m anxious to see that number at my feet.

My Day So Far

March 1, 2014 ::

4AM – Rise and shine.
4:30 – Take the girls to the airport for their trip to Cali.
5:30 – Bags checked, see the girls to Concourse A, give hugs, tell them I’m jealous.
5:35 – Leave the airport, no parking fee (wasn’t there long enough to incur one).
6:15 – Attempt to stop for gas. Twice. Neither station currently had working card readers. Lose my gas cap.
6:30 – Arrive back home and tumble back into bed for an hour.
7:45 – Roll out of bed for the second time.
7:50 – Feed animals and load car for market.
8:10 – Make breakfast for my wife.
8:15 – Leave for market.
8:30 – Stop for gas, again, successfully this time.
8:55 – Set up booth for market. Take off fleece because, hey, it’s actually warm in here this morning.
9:05 – Sit behind my table and bask in the fact that I’m nit freezing my backside off.

How’s your morning been?

Author: Jim Stitzel :: Category: General :: Tags:

The Casual Gamer: Grinding, Energy Caps, and Other Arbitrary Limiters

February 17, 2014 ::
tcg-Grinder

If you happen to be one of those individuals lucky enough to make video games for a living, then do me a favor. Have a seat, grab a drink, and listen up. Because as a gamer, I’m about to have a chat with you about a couple of elements of certain types of games that infuriate me. This isn’t because I want to hear myself gripe, but because I want you as a developer to start making better games.

So, comfortable? Good. Now pay attention. I want to chat about game mechanics that block forward progress. Let’s grind away at this issue.

3 Feb

Liars’ Eyes

2

Dear writers, authors, and other creative types,

You know that thing you’ve heard about liars’ eyes? How when you tell a lie, you look up and to the right because that’s what you do when you access the creative part of your brain? And how you look to the left when you’re being honest? Yeah, that’s a myth. I’ve seen it pop up a lot in various stories and TV shows, and it bugs the heck out of me every single time. How’s about we do a little research next time, hm? Stop perpetuating this and other body language myths, ‘cuz they’re flat-out wrong and carry with them potential real-world consequences.

The Casual Gamer: Elemental Kingdoms

February 3, 2014 ::
tcg-ElementalKingdoms

I’ve been a fan of trading card games (TCG) for several years now, but the fact that you have to keep investing in new expansions as they become available in order to remain competitive prevents me from enjoying them as much as I’d like. So, whenever a free TCG for iOS launches, I get curious. Finding one that’s actually enjoyable over the long haul, though, is a bit more of a problem. (You get what you pay for.) →

1 Feb

Minimalistic Design Requests

0

Ok, folks, if you’re going request a WordPress design, your posting needs to be longer than, “Design and some coding and app application.” Seriously, could you be any less specific? Add to that a budget that’s $100 at maximum, and you’re pretty much guaranteed to have your request ignored by any designer with any kind of sense. This is one of those times where going minimalistic works to your disadvantage.

Back To Native WP Comments

January 31, 2014 ::

disqus-logo I think I’m done with third-party commenting systems. They haven’t served me particularly well over the last couple of years. First it was IntenseDebate, acquired a few years by Automattic. I had high hopes for IntenseDebate, since they’d been acquired by the developers of WordPress itself — and for a while it was a really great system that integrated almost seamlessly with WordPress. Then it fell out of development and seems now to have been all but forgotten.

So I switched to Disqus and have used their system for the last year or so. It never has integrated quite as seamlessly into WordPress, and I’ve had issues in the past with comments not syncing back to WordPress properly. Where IntenseDebate synced almost instantly, there is usually something of a delay before Disqus syncs with your database. Sometimes, it doesn’t do it at all, and you run the risk of losing comments.

disqus-thread

Both systems have a number of social features I really appreciate, like being able to rate comments and see similar topics in the community. I’ve decided none of those things are enticing enough to keep using them. WordPress’ commenting system has improved quite a bit over the last several iterations, and with the inclusion of Jetpack adds the ability to comment using your WordPress.com, Facebook, Twitter, and Google credentials. Akismet is still the single best spam filter available anywhere.

At some point I may investigate some additional plugins and roll up my own custom commenting system, but in the meantime, it’s back to native WordPress comments for me.

WordPress, Facebook, Open Graph, and SEO Plugins

January 27, 2014 ::

One of the plugins I use on all my WordPress-powered sites is Jetpack. It’s chock full of features that provide a richer experience on both the front and back ends. One of my favorite features is Publicize, which allows you to automatically notify the various social networks when you put up new content. I’ve used it religiously since it launched and had almost no problems.

Until recently. Over the last week or two, I’ve noticed that any new posts I put up here haven’t been showing up on Facebook. I initially thought it might be because I’d added Google+ to my profile, since it was a relatively new feature to Publicize. Except that when I removed the G+ authorization, new content still wouldn’t post to Facebook.

A handful of Google searches later indicated that the problem might have something to do with the presence (or lack thereof) of Open Graph tags in my site header information. Another Google search, and I learn that Open Graph is apparently the new(-ish) protocol that social media sites use to convert your content into objects that can be placed in your social media streams. Facebook in particular seems to favor this, and apparently the problem I was running into is that they have started to more strictly enforce the use of Open Graph. If the tags are missing, your content gets blocked and never appears in your feed.

I thought it odd that Jetpack wouldn’t include ‘og:’ tags, considering their importance to the function of Publicize. Another search, and sure enough, Jetpack does include those tags. Only they weren’t showing up for my sites. One thread over on the WordPress support forums suggested that another plugin could be causing problems, so I reviewed my lists and came across one plugin type that could very well be causing the issues.

SEO plugins. On one site, I use Yoast’s WordPress SEO plugin. On another I use the All-In-One SEO plugin. Both have options for social media, but neither one had been enabled. I suspect what happened is that these were new options added in recent plugin updates that had to manually enabled. I hadn’t been aware of them and so hadn’t turned them on. A simple oversight on my part that caused issues with the communication between my site and Facebook, in particular.

I’ve got the social media options enabled in both places now, and so far the problem seems to be fixed. I actually like the way WordPress SEO handles it a little better than All-In-One. It’s more intuitive and seems to be more flexible, particularly in identifying the image associated with the content.

If you’re having similar problems, I recommend checking your SEO plugins first. Jetpack won’t insert ‘og:’ tags if you have SEO enabled, and that seems to be the problem.