Azzcat Blast

Design stories & tips, peppered with life's little tidbits

Crazy Good Web Tools, Part III

April 25th, 2011

max-width

The WordPress Edition

Time again to share my fav new web dev tools. First off, my love of HTML5 Boilerplate continues. Though I still don’t understand how to use it all (I’m still confused about the Build Script!). Boilerplate is now standard in all my site builds. And seriously, is there any simpler way to fix IE CSS problems than with the class .ie7 or .ie8?

Early on, I tried putting together my own mashup framework for WordPress theming. It was my personal Frankentheme combining H5 (for WordPress theme templates) with Bluetrip CSS (a combo CSS framework itself) and Baseline (a typographic baseline grid framework). Adding Boilerplate to all this was quite a bit of work! What I really wanted was a solid nearly naked WordPress theme with Boilerplate already incorporated.

Late last fall, I wrote about a selection of themes that did just that–combined WP + Boilerplate. While all good, none were exactly what I wanted. Early in January, a Twitter chat with other designer/developer friends introduced me to Bones: A WordPress Development Theme and… Bingo!

Bones: A WordPress Development Theme

Bones isn’t overstyled or overkill (as so many premium themes seem to be). Styling is basic, bare, and easily overridden in the style.css. Best part, the bareness makes it a perfect candidate for using the Less.app. Below is a code snippet that illustrates my use of some mix-ins and style rules with Less. Further down in stylesheet, I can easily change fonts, add round corners, etc. without re-writing long passages of code (especially the browser prefixes!).


/*************Mix Ins*************/
@ff_nuvo_web_pro: "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2",sans-serif;
@bad_dog: "bad-dog-1","bad-dog-2",sans-serif;
@folk_rough: "ff-folk-rough-web-1","ff-folk-rough-web-2",sans-serif;
@hor: 5px;
@vert: 5px;
@blur: 15px;
.round_corners (@radius: 12px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius; }
.text_inset {
-webkit-text-shadow: -1px -1px 1px @shadow, 1px 1px 1px @highlight;
-moz-text-shadow: -1px -1px 1px @shadow, 1px 1px 1px @highlight;
-o-text-shadow: -1px -1px 1px @shadow, 1px 1px 1px @highlight;
text-shadow: -1px -1px 1px @shadow, 1px 1px 1px @highlight; }
.box_shadow {
-webkit-box-shadow: @hor @vert @blur @shadow;
-moz-box-shadow: @hor @vert @blur @shadow;
-o-box-shadow: @hor @vert @blur @shadow;
box-shadow: @hor @vert @blur @shadow; }

And, yes–there’s more!

Fixed width designs are so…web 2.0! Feast your eyes on this responsive design column-layout code. S.W.E.E.T.


/*** all have margins right and left of 1% ***/
.col60 { width: 6.333%; }
.col140 { width: 14.667%; }
.col220 { width: 23.0%; }
.col300 { width: 31.333%; }
.col380 { width: 39.667%; }
.col480 { width: 48.0%; }
.col540 { width: 56.333%; }
.col620 { width: 64.667%; }
.col700 { width: 73.0%; }
.col780 { width: 81.333%; }
.col860 { width: 89.667%; }
.col940 { width: 98.0%; }

Percent-based layout allows this: (hint…click on either image and resize your browser window)

max-widthmin-width

 

Manage All Your WP Sites From a Single Login!

I’ve only just started with Manage WP but am already very impressed. Don’t all developers rely on a core set of trusted plugins? If so, doesn’t it make a whole lot of sense to update those plugins/all the sites you manage from a single login? Yeah–thought so. How do you spell t.i.m.e.s.a.v.e.rmanage multiple wordpress sites

 

Train Your Clients

(the simple, time-efficient way)

We all need to train our clients on how to manage their WordPress sites. Trouble is, how we train, how much we train, how well we train, and how we charge for training varies greatly. In addition, there are often ‘post-delivery/post-billing/post-training’ queries from clients preceded by “I know you showed me last (insert far-gone date), but I just can’t remember how to (insert basic WP editor-level task). Would you please run that by me again? I’m in a hurry and this is really hanging me up.”

Meanwhile, you are knee-deep in another project deadline. sigh…

Video User Manuals

Which is exactly why I’ve subscribed to Video User Manuals. This premium plugin lives right in the WordPress admin bar. It includes short task-specific videos for performing most every basic editor task. In addition, it’s very simple to add your own videos to the set–maybe for a specific plugin, for example. The plugin also includes WordPress user manuals–written simply for the non-Codex crowd. Here’s a peek at a recent admin install. My custom videos are on top:
view of admin panel video options

I was a little intimidated at first about making a tutorial video. (Plus my voice was wracked with a bad cold.) But Jing made it easy peasy. I highly recommend spending the big bucks ($14) for a pro version because it allows for much smaller file size/types. A really smart web designer would also plan some custom videos ahead…keeping common ones generic enough for re-use on other sites! ;-)

Let me know if you have any special web dev tools you rely upon…and if you are an ‘early adopter’, too!

6 Responses to “Crazy Good Web Tools, Part III”

Ankit
January 9, 2012

Your Welcome!!

Did you get a chance to try out the plugin.

We are looking for feedback to improve the appointment calendar :-)

Catherine
January 9, 2012

@Akit: No, not yet. Am currently working on mobile app CSS and other non WP projects. But I’ve bookmarked it for future reference.