Jeff Bridgforth :: Webcraftsman

Crafting Web sites since 1999

I am a Web designer passionate about creating elegant, inspiring, and usable Web experiences that connect with an audience and fulfull business objectives.

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

Lifestream

A snapshot of my life online.

Today

twitter (feed #1)
The New Normal of Flux, change, and adaptation. http://t.co/yuZsOJUh (via @Merge) [webcraftsman]
7:15pm via Twitter
generic (feed #8)
7:14pm via New Delicious
generic (feed #8)
3:46pm via New Delicious
generic (feed #8)
2:28pm via New Delicious
twitter (feed #1)
Great post by @emilylewis on building a better Web by understanding the fundamentals. http://t.co/Ky4CjRnJ [webcraftsman]
1:47pm via Twitter
twitter (feed #1)
I have enjoyed listening to @ShopTalkShow on my commutes last night and this morning. cc/ @chriscoyier @davatron5000 [webcraftsman]
1:08pm via Twitter

Yesterday

generic (feed #8)
8:31pm via New Delicious
twitter (feed #1)
RT @imagineryan: The fact that God actively searched for Adam after he messed up is one of the best promises we're given. God will seek ... [webcraftsman]
4:11pm via Twitter
twitter (feed #1)
This is just crazy. Mac OS X Lion CSS3: d.pr/MDSn Wonder how much time it took to program this. (via @cameronmoll via @vpieters ) [webcraftsman]
2:08pm via Twitter

January 25th

twitter (feed #1)
8:49pm via Twitter
twitter (feed #1)
Are you using <section> correctly? http://t.co/uuQ5XhZc [webcraftsman]
6:00pm via Twitter
generic (feed #8)
5:53pm via New Delicious
twitter (feed #1)
RT @jasonvanlue: Design—at its core—solves problems, making life's experiences better and more enjoyable. [webcraftsman]
1:23pm via Twitter

January 24th

twitter (feed #1)
The separation of structure, presentation and behavior is dead http://t.co/6wuUk0Cp via @thinkvitamin Interesting ideas. [webcraftsman]
3:44pm via Twitter
generic (feed #8)
3:23pm via New Delicious
twitter (feed #1)
RT @jonacuff: I know not what this day holds, but I know the one who holds it & that gives more peace than pretending I can control the day [webcraftsman]
1:50pm via Twitter

January 23rd

generic (feed #8)
Posted HTML5 Please.
2:26pm via New Delicious

January 20th

twitter (feed #1)
RT @jonmorosi: Carlos Pena agrees to one-year deal with #Rays worth $7.25M, source confirms. @JonHeymanCBS first to report. [webcraftsman]
6:14pm via Twitter
generic (feed #8)
1:36pm via New Delicious
generic (feed #8)
1:17pm via New Delicious

January 19th

twitter (feed #1)
RT @andyrutledge: Speaking of Star Wars, this is friggin hilarious: The Bark Side http://t.co/6ShFy0Nt (watch to the end!) [webcraftsman]
2:05pm via Twitter

January 18th

twitter (feed #1)
Hoping my Internet at work is faster than it was yesterday afternoon. [webcraftsman]
1:27pm via Twitter

January 17th

twitter (feed #1)
Spending time with my son at Orlando Magic game. First time he has seen NBA game. #magic #NBA http://t.co/94KlRGNS [webcraftsman]
11:46pm via Twitter

January 16th

twitter (feed #1)
Orlando Twitterverse. Going to Magic game tomorrow night. Need suggestions on where to park. Looking for something $10 or cheaper. Thanks. [webcraftsman]
5:34pm via Twitter

January 13th

twitter (feed #1)
RT @_DavidSmith: I wrote a complete walk-through for using @instapaper on the Kindle. http://t.co/wSVJFpXA [webcraftsman]
8:43pm via Twitter

Powered by Lifestream.

Read more of the stream