Jeff Bridgforth :: Webcraftsman

Fundamental Elements of Design (video)

December 13, 2011

Short intro­duc­tion to the dif­fer­ent ele­ments a designer con­sid­ers when putting together a design solution.

via Inspiredol­ogy

∼ Comment on this article ∼

High 5 : Sprite Cow

November 14, 2011

One of my favorite new tools is Sprite Cow. Sprite Cow helps you get the height, width, and back­ground posi­tion of dif­fer­ent sprite images within a larger sprite sheet. It is really easy to use and works much like a lot other graphic kinds of tools (i.e., Photoshop).

You just open your image in Sprite Cow, use the mar­quee tool to select your sprite, and Sprite Cow gen­er­ates the CSS you need for height, width, and back­ground position.

I had used sim­ple sprites in the past, but was chal­lenged by a col­league to make sprite sheets to cover the major­ity of back­ground images for a site to improve per­for­mance. Sprite Cow has made it very easy for me to do this. I just build the sprite sheet as I go and use Sprite Cow to do the hard work. No more man­ual labor in Pho­to­shop to deter­mine these 3 values.

Sprite Cow is a side project from the guys at The Team. They cre­ated it to solve their own prob­lem to cre­ate a quicker and eas­ier process for this tedious, repet­i­tive, and time con­sum­ing process. Then they turned around and shared it with the broader com­mu­nity. High five!

It is always great when you find great tools. And the tim­ing of it coin­cided with my deci­sion and desire to build more com­plex sprites back in June.

Shout out to Chris Coyier for men­tion­ing Sprite Cow on CSS Tricks.

UPDATE: Chris Coyier released a screen­cast today (Novem­ber 16) on Using Sprite Cow. Check it out.

∼ Comment on this article ∼

Power of the Plus :: Adjacent Sibling Combinators and other CSS selectors

November 11, 2011

For most of my Web prac­tice, I wrote my own HTML and could add classes and IDs to ele­ments as hooks to tar­get ele­ments in my CSS. So when I first heard about CSS com­bi­na­tors, I did not see much use for them. I won­dered why I would need them. Why would I need some­thing gen­eral when I could spec­ify an ele­ment by class or ID.

Fast for­ward to this year. After sev­eral career changes, I am now work­ing with CMS frame­works that do not give me the con­trol over the code that I had in the past. At times, it can be a chal­lenge to find hooks to tar­get spe­cific ele­ment with CSS.

Last Spring, I was rein­tro­duced to CSS com­bi­na­tors. These pow­er­ful lit­tle state­ments are now part of my daily workflow.

Side­note: I read this arti­cle around the time that I started using com­bi­na­tors. I found it to be a great resource because it had a handy ref­er­ence to browser support.

Con­di­tional CSS?

One of the pow­er­ful ways that I have started using com­bi­na­tors is to cre­ate “con­di­tional CSS.” I had a project where the busi­ness unit wanted to add head­ings to their body con­tent for recipes. They wanted to add “Ingre­di­ents” and “Instruc­tion” head­ings to make the con­tent more clear. At that time, all the ingre­di­ents in the ingre­di­ent list­ing were bold. Now that they were adding the head­ings, they wanted those list items to be nor­mal weight.

The chal­lenge. The head­ings were going to be added to new arti­cles and then slowly added to exist­ing arti­cles on the site. Could I come up with a solu­tion that would only be imple­mented on arti­cles with the new headings?

Thus the need for “con­di­tional CSS.” I found my solu­tions by using the adja­cent sib­ling com­bi­na­tor (E +F) and the child com­bi­na­tor (E > F) to tar­get the ele­ments the ingre­di­ents list­ings and change the font weight to normal.

.recipe-page .body h4 + p > b {
font-weight: normal;
}
.recipe-page .body h4 + div b {
font-weight: normal;
}
.recipe-page .body h4 ~ span {
font-weight: normal !important;
}

I had to come up with sev­eral dec­la­ra­tions because dif­fer­ent edi­tors had entered in the con­tent differently.

Another Exam­ple

On another project where I needed some con­di­tional CSS was show­ing the com­ment count for an article.

The chal­lenge was to write CSS to cover sev­eral dif­fer­ent con­di­tions. Some com­ments would just show a com­ment count. Other list­ing would include a rat­ing or there might be rat­ings with­out a com­ment count.

The busi­ness unit also wanted to have a link to the com­ment area for arti­cles that did not you have a com­ment or review. The devel­oper needed to have that link always be always present in the code so I had to come up with a solu­tion to hide the link when there was a com­ment count  and/or rat­ing was present. When there was not a com­ment, there would not be any code for the com­ment count. So show­ing the link when there was not a com­ment was easy.

Here is my solu­tion to hid­ing the com­ment link:

The Com­ment Block on the page

The HTML

The CSS

So I am want­ing to hide the div with a class of “rating-buttons” because users have already com­mented on this article.

.recipe-rating-comments-count .rating + .rating-buttons >
.write-comment, .recipe-rating-comments-count .comment-counts-text + .rating + .rating-buttons >.rate-review,
.recipe-rating-comments-count .comment-counts-text + .rating-buttons > .rate-review,
.recipe-rating-comments-count .comment-counts-text + .rating-buttons > .write-comment {
display: none;
}

Using a com­bi­na­tion of adja­cent selec­tor and child com­bi­na­tor, I can tar­get the dif­fer­ent con­di­tions in which I want to hide the “Write a Com­ment” link.

I also used a cou­ple of com­bi­na­tions of adja­cent sib­ling com­bi­na­tor and child com­bi­na­tor to add dif­fer­ent mar­gin depend­ing on what ele­ments were present. For exam­ple, I wanted the rat­ings to have more mar­gin at the top when a com­ment count was not present.

In Clos­ing

I spend the major­ity of my time work­ing in Dru­pal. Both of my exam­ples are not from a Dru­pal envi­ron­ment but I could share more. One of the ones I use most often is Panel Sep­a­ra­tors. I can use the adja­cent sib­ling com­bi­na­tor to use tar­get the class of the pane that pre­cedes the panel-separator to tar­get it for styling.

Just like a lot of things in life, once you are aware of some­thing, you begin to see it every­where. Or is this case, I keep see­ing prob­lems that these com­bi­na­tors pro­vide a great solu­tion for.

Spe­cial thanks to Chris Coyier, who encour­aged me to blog about this when I shared the idea with him at Front End Design Con­fer­ence.

∼ Comment on this article ∼