AmberWeinberg.com » CSS http://www.amberweinberg.com Design, Development and Freelance Articles and Tutorials Fri, 03 Feb 2012 15:14:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS3 Animated Buttonshttp://www.amberweinberg.com/css3-animated-buttons/ http://www.amberweinberg.com/css3-animated-buttons/#comments Fri, 03 Feb 2012 15:08:20 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5320 Today I was tasked with creating some wacky CSS3 animated buttons. I started out by looking at one or two tutorials before I was able to come up with something of my own.

The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers. I split the animated parts separately and placed them into spans:

<a class="btnSellers" title="Sellers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>
 
<a class="btnBuyers" title="Buyers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>

These are styled and formatting quite normally:

#btnVideos .btnSellers, #btnVideos .btnBuyers { background: url('images/btnSellers.jpg') no-repeat; float: left; height: 92px; margin-top: 80px; position: relative; width: 229px; }
#btnVideos span { display: block; position: absolute; }
#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px;  top: -26px; width: 102px; }
#btnVideos a:hover .monitor { top: -36px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; top: -12px; width: 51px; }
#btnVideos .play:active { background-position: bottom; }
 
#btnVideos .btnSellers:hover { background-position: left -91px; }
#btnVideos .btnSellers:active { background-position: left -183px; }
 
#btnVideos .btnBuyers { background-image: url('images/btnBuyers.jpg'); margin-top: 54px; }
#btnVideos .btnBuyers:hover { background-position: left -92px; }
#btnVideos .btnBuyers:active { background-position: 1px -184px; }
#btnVideos .btnBuyers .monitor { background: url('images/iconBuyers.jpg') no-repeat; }

Adding the animation in was really very easy. First, we needed to tell the buttons that we wanted to animate them eventually. You’ll put these in your normal states:

#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; top: -26px; width: 102px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; top: -12px; width: 51px; }

As you can see, I’m using different transition easing – a linear and an ease-in-out. There’s no hard rule for which to use, just experiment until you get an effect you like.

To animate the play button, all we had to do was give it a 360 degree rotate:

#btnVideos a:hover .play { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

To pull the monitor graphic up was even easier, I just adjusted the top value:

#btnVideos a:hover .monitor { top: -36px; }

Definitely much quicker and cleaner than jQuery!

You can see a demo of this here.

]]> http://www.amberweinberg.com/css3-animated-buttons/feed/ 8 January’s 12412: Researching LESS & SASShttp://www.amberweinberg.com/januarys-12412-researching-less-sass/ http://www.amberweinberg.com/januarys-12412-researching-less-sass/#comments Tue, 31 Jan 2012 10:55:03 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5292 My first 12412 project was to research and learn about SASS. After the recommendation from several people, I also decided to check into LESS. I’d been hearing a lot about the two techniques and was quite skeptical – in fact it seems I’m often skeptical of new things out on the web. Most frameworks, shims and other “add-on”s are only a passing faze and tend to do more harm than good – and so with some trepidations I jumped in.

What is SASS & LESS?

Both SASS & LESS are CSS preprocessors, basically they’re created to help you code CSS quicker by allowing the use of basic programming principles. Both allow you to use variables, mixins, nested elements, functions and operators.

You basically put your CSS into a special file, and then when finished, your CSS is run through the preprocessor and it kicks out “normal” CSS. Huh.

I found LESS to be a lot easier to understand and install, although both of them worked pretty much the same way. You’re able to create variables within your CSS so you can reuse certain elements (for example, a hex code), and if it needs changing, you only have to do it in one place. Here’s where my inner-awesome-developer-sense kicks in. You can pretty much already do this with a basic class.

Another major feature in both SASS and LESS is the use of nesting, where you can “save” on repeating code by indenting elements instead of having to retype them, for example, if you indented p {} underneath an id of #header, then the CSS that’s printed out is actually #header p {}

While this seems pretty cool at first, I can easily see this as becoming cumbersome and crazy really quickly. When you’re not paying attention to what’s being outputted, your’re more likely to be lax in your coding.

Important Questions

I had several important questions before and after I read up on the technologies, and most of them really weren’t answered by any of the articles I read:

  1. What happens if another developer needs to edit the CSS and doesn’t know or realize a preprocessor is being used? How do you sync the two?
  2. When no longer writing CSS yourself, how do you control the structure and organization of the code? How do you ensure you’re optimizing it correctly?
  3. What happens if JS is down?
  4. Does it work with one line CSS?

All in all, I don’t think I’ll be using either SASS or LESS. Installation time, upkeep and the fact that it ruins the simplicity of CSS will keep me away. If you’re a developer who’s spent a lot of time optimizing your code and really learning the in’s of CSS (not just top level stuff), then you’ll find this pretty useless, as you already can quickly do the type of code it spits out.

I’m also worried on our recent reliance on Javascript and the trend of forcing languages and browsers to do something they’re not meant to do. It wasn’t even a year ago that everyone was worried about best practices and making sure we didn’t rely on Javascript for anything but the beauty layer. Now this is one more thing that can break.

Some of the features, like mixins and operators actually made the code a lot more convoluted an jumbled, and seemed to take a lot more code than if you were just to type it out correctly in the first place. I also don’t see the point of operators – CSS isn’t a programming language and you can’t dynamically update styles so why not just type in the correct number in the first place?

Final Thoughts

Perhaps I’m wrong and you disagree – maybe you think SASS or LESS is the greatest thing since sliced bread. It’s just not for me. I would love your thoughts on it though!

]]> http://www.amberweinberg.com/januarys-12412-researching-less-sass/feed/ 15 Review of CSS For Print Designers by JD Graffamhttp://www.amberweinberg.com/review-of-css-for-print-designers-by-jd-graffam/ http://www.amberweinberg.com/review-of-css-for-print-designers-by-jd-graffam/#comments Mon, 12 Dec 2011 16:11:01 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5168 I met JD Graffam a few years back at Barcamp Memphis, though I doubt he remembers me. So I was fairly surprised to see his name when I picked up a copy of CSS for Print Designers. His book, targeted obviously to code newbies with a background of print design, was something I wouldn’t normally read, but since I never pass up a book to read, I thought I’d give it a chance.

CSS for Print Designers was a quick read, at only 167 pages long in full color and large type. It sticks to the fairly basics, assuming you’ve absolutely never seen CSS and HTML before. I like the fact that it touches on the basics of HTML and semantics before jumping over to CSS. I think a lot of non-coders, especially print-turned-web designers, are lacking in proper HTML skills, and this gives you a good foundation to start on.

While the book certainly won’t make you an expert by far, it gets you started and is a good primer to learning how to read the code. I think it’s a great read before you pick up a more comprehensive coding book, as it will help to assage the anxiety one gets while staring at a bunch of gooble-de-gook (which I think aptly describes our code, don’t you?).

While the book does have many pluses, it also came up short for me in a lot of ways. The fact that it is so short and broad is also a negative. JD mentions a lot of ideas and pieces of code in the book, but then tells you to just “google it” instead of explaining. I think he should’ve either briefly explained the item or skipped mentioning it at all.

I also disagreed with some of the coding techniques he used, but that was more personal and since we all eventually develop our own way of coding, I was able to overlook those.

I recommend the book only if you’re an absolute beginner in terms of coding to the web. If you know basic HTML and CSS already, skip this one. You can get it on Amazon for $19.49 if interested.

]]> http://www.amberweinberg.com/review-of-css-for-print-designers-by-jd-graffam/feed/ 0 Step-By-Step: Turning A Design Responsive in WordPress, Part 5http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-5/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-5/#comments Wed, 26 Oct 2011 15:01:33 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4855 Phew, can you believe how far we’ve come? Cross your fingers for the finale, we only have four mockups left to code: blog single, extras, about and contact. Let’s see if we can make it in one post!

Other Posts In This Series

Blog Single

Last week we coded the blogroll page, and the blog single page is almost exactly the same thing – with the addition of some meta, comments and sharing. So go ahead and copy/paste the HTML from the archives.php to single.php, and add in the additional pieces:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>The Blog</h1>
		</section>
 
		<article id="blog">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<section>
					<h2><?php the_title();?></h2>
					<p class="meta">Posted on <?php the_time('F d, Y');?> in <?php the_tags('', ', ');?></p>
					<?php the_content(); ?>
 
					<section>
						<div class="author">
							<?php echo get_avatar( get_the_author_email(), '75' ); ?>
							<h3>About the author</h3>
							<p><?php the_author_meta('description'); ?></p>
						</div>
 
						<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="amberweinberg">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
 
						<div id="fb-root"></div>
						<script>(function(d, s, id) {
						  var js, fjs = d.getElementsByTagName(s)[0];
						  if (d.getElementById(id)) {return;}
						  js = d.createElement(s); js.id = id;
						  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
						  fjs.parentNode.insertBefore(js, fjs);
						}(document, 'script', 'facebook-jssdk'));</script>
 
						<div class="fb-like" data-href="<?php the_permalink();?>" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false"></div>
					</section>
				</section>
			<?php endwhile; wp_reset_query(); ?>
 
			<?php comments_template(); ?>
		</article>
 
		<?php get_sidebar(); ?>
 
	</div>
<?php get_footer(); ?>

Again, we just have some basic CSS. The meta is a basic paragraph element given a display block, so we can add padding without the math.

#blog p.meta { background: rgba(165,205,205,.5); border: 1px solid rgba(89,153,151,.5); display: block; font-size: .9375; font-weight: bold; margin-bottom: 20px; padding: 3px 1%; }

The bottom meta is surrounded with a section tag so we can float the author box and sharing options together. This section requires a bit more math, but nothing we haven’t done before.

#blog section section { float: left; width: 100%; }
#blog section section > * { float: left; margin-right: 1%; }
#blog section .author { padding: 1.8121911%; width: 78.167116%; }
#blog section .author img { float: left; margin-right: 10px; }
#blog section .author p { line-height: 1.2em; padding: 0; }
#blog section .author a { color: #222; }
#blog section .author a:hover { color: #68a1a0; }
#blog section > iframe, #blog section .fb-like { margin-top: 20px; }

The comments section is pretty easy. Thanks to the HTML5 Boilerplate, the structure is already there, especially for reply comments. Just some more simple styling:

#blog #comments { background: url('images/divider.png') no-repeat center bottom; clear: both; margin: 0; padding: 0 0 10px; text-transform: uppercase; }
.commentlist { margin: 0; padding: 0; }
.commentlist li { list-style: none; }
.comment-body { border-top: 1px solid #f3d2c4; float: left; margin-top: 15px; padding-top: 15px; position: relative; width: 100%; }
.commentlist > li:nth-of-type(1) > .comment-body { border: none; }
.comment-body .avatar { margin: 0 15px 0 0; width: auto; }
.comment-body .comment-author { font-size: .8125em; font-weight: bold; padding-bottom: 10px; text-transform: uppercase; }
.comment-body .fn { font-style: normal; padding-right: 2px; }
.comment-meta { font-size: .8125em; right: 0; position: absolute; text-transform: uppercase; top: 0; }
.comment-reply-link { color: #222; margin-top: 10px; padding: 2px 15px; }
 
#respond { clear: both; width: 100%; }
#respond h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; padding: 12px 0; text-transform: uppercase; }
#respond input[type=submit] { font-size: 1em; font-weight: bold; margin-bottom: 10px; }

Checking it in devices shows the author and comments area getting a bit squished, so let’s fix that.

@media only screen and (max-width: 960px) {
	#blog section .author { width: 98.1878089%; }
}
 
@media only screen and (max-width: 480px) {
	.comment-meta { display: none; }
}

Then don’t forget the regular RGBa fallbacks for IE!

Contact Page

A super simple layout with just a large image, some info and a form. This page is all done using the WYSIWYG and a contact plugin and a bit of CSS.

The only edits we need to make for mobile devices is to remove the map from the iPhone and stretch the form 100%.

@media only screen and (max-width: 480px) {
.page-id-1066 #page .alignleft { display: none; }
.page-id-1066 #page .content { width: 100%; }
}

The About Page

Another super simple page and very similar to the contact page. I’ll go ahead and skip this one…I think you can handle it on your own ;)

Extras Page

My Extras page is a bit more complicated than the others, and is close to the portfolio main page. We’re going to list all of the apps at the top of the page, then a small list of links to the little extras I make at the bottom. The PHP just requires two loops and very simple markup:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Extra Dev</h1>
			<p>A place for all the extra goodies I make.</p>
		</section>
 
		<p>Please excuse the mess! I'm swapping over the design, and won't be ready until the end of this week!</p>
 
		<?php query_posts('post_type=apps&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<section>
				<a title="<?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Link', true);?>"><?php the_post_thumbnail('apps');?></a>
				<a title="<?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Link', true);?>"><img src="<?php echo get_post_meta($post->ID, 'Logo', true);?>" alt="<?php the_title();?>"/></a>
				<?php the_content();?>
				<a class="btn" href="<?php echo get_post_meta($post->ID, 'Link', true);?>">Visit Website</a>
			</section>
		<?php endwhile; wp_reset_query(); ?>
 
		<div class="heading">
			<h2>Templates, Plugins and More</h2>
			<p>Stuff for you to download</p>
		</div>
		<?php query_posts('category_name=extras&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a>
		<?php endwhile; wp_reset_query(); ?>
	</div>
 
<?php get_footer(); ?>

Each app has it’s own screenshot, a logo, a description and a button. Let’s first give it some standard styles and IE fallbacks

.tax-ex .wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-ex .wp-post-image:hover { opacity: .5; }
 
.no-rgba .tax-ex .wp-post-image { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }

And force WordPress to make our featured image resizable based on browser. Remember, we come at these numbers by dividing the number of the item (the image) by the container (which is 960px)

.tax-ex .wp-post-image { height: auto !important; margin-right: 1.5625%; width: 35.416667% !important; }

We’ll also need to make sure the image looks nice in the iPhone, so we’ll make it extend the whole width:

.tax-ex .wp-post-image { margin: 0 0 10px; width: 97% !important; }

The bottom extras are is easy, we’re just doing some simple math and styles

.extras { color: #222; float: left; font-size: .775em; margin: 0 1% 1% 0; padding: 1.2%; width: 30%; }
.extras:nth-of-type(3n+3) { margin-right: 0; }
.extras:hover { color: #222; }

For devices under 600px though, we’ll need to clear the extras and make them extend 100%.

@media only screen and (max-width: 600px) {
	.extras { clear: both; margin: 0 0 10px 0; width: 97.6% }
}

Oh Boy!

Fantastic work we’ve done, eh? Feel free to ask questions about ANYTHING you don’t understand and I’ll do my best to help.

Look for the eBook version next week, and happy coding!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-5/feed/ 2 Step-By-Step: Turning A Design Responsive in WordPress, Part 4http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-4/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-4/#comments Fri, 21 Oct 2011 13:56:18 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4851 We’ve come a long way in the past few weeks already, but we’ve still got seven more mockups to go. This week we’ll be focusing on the portfolio detail, testimonial and blog archive pages.

Other Posts In This Series

Portfolio Detail

The portfolio detail page is pretty simple. We’ve got a large image to the left, and some details on the right. This should be super easy to turn responsive, right? On the single-portfolio.php, I’ve coded up the basic layout:

<?php get_header(); ?>
 
	<div class="container">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<section id="heading">
				<h1><?php the_title();?></h1>
				<?php if($myImageFileName = get_post_meta($post->ID, 'Website', true)){ ?><p>Website: <a title="View <?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Website', true);?>" target="_blank"><?php echo get_post_meta($post->ID, 'Website', true);?></a></p><?php } ?>
			</section>
 
			<?php the_post_thumbnail('portfoliodetail');?>
 
			<section id="details">
				<?php the_content();?>
			</section>
 
		<?php endwhile; wp_reset_query(); ?>
	</div>
 
<?php get_footer(); ?>

First we’ll need to apply some simple styles. The section#heading has already been made responsive from last week, but we’ll need to float the link to the right.

.single-portfolio #heading h1 { float: left; }
.single-portfolio #heading p { float: right; font-weight: bold; }

For the featured image, we need to pull the URL out without WordPress sticking height and width attributes on it, so we can resize at will. Replace the standard the_post_thumbnail with:

<?php 
	$image_id = get_post_thumbnail_id();  
	$image_url = wp_get_attachment_image_src($image_id,'full');  
	$image_url = $image_url[0];  
?>
<img src="<?php echo $image_url;?>" alt="View <?php the_title();?>" class="wp-post-image">
.single-portfolio .wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; padding: 1.5%; max-width: 60.416667%; }

The details section to the left is then sized with the leftover percentages and prettied up:

.single-portfolio #details { float: right; width: 34.490605%; }
.single-portfolio #details h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; clear: both; margin-top: 0; padding: 20px 0 15px; }
.single-portfolio #details ul { margin: 0 0 20px; padding: 0; }
.single-portfolio #details li { background: url('images/li1.jpg') no-repeat; font-size: .75em; list-style: none; margin-bottom: 3px; padding-left: 15px; }
.single-portfolio #details li:nth-of-type(3n+2) { background: url('images/li2.jpg') no-repeat; }
.single-portfolio #details li:nth-of-type(3n+3) { background: url('images/li3.jpg') no-repeat; }
.single-portfolio #details .highslide img { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: auto !important; margin: 0 3% 15px 0; padding: 1.8%; width: auto !important; max-width: 26.470588%; }

Checking in mobile devices, it actually looks pretty good already. We just need to clear and center the info in the heading on the iPhone, make the main image full width of the screen, as well as the details so they’re stacked.

@media only screen and (max-width: 480px) {
	.single-portfolio #heading * { clear: both; text-align: center; width: 100%; }
	.single-portfolio .wp-post-image { max-width: 97%; width: 97%; }
	.single-portfolio #details { margin-top: 30px; width: 100%; }
}

For IE, we’ll just need to provide the regular fallbacks for the multiple backgrounds and RGBa borders. We’ll go ahead and add them to the list of fallbacks we’ve already made:

.no-multiplebgs #heading { background: url('images/divider.png') no-repeat center bottom; }
.no-rgba .items img, .no-rgba .single-portfolio #details .highslide img, .no-rgba .single-portfolio .wp-post-image { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }

Testimonials

The testimonials template is the easiest of all. All we need is some very simple HTML

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Client Testimonials</h1>
			<p>What my clients think of me and my work…<a title="Contact Freelance Web Developer" href="<?php bloginfo('siteurl');?>/contact">Ready to work together?</a></p>
		</section>
 
		<article>
			<?php query_posts('post_type=clients&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<p><?php the_content();?></p>
				<p><strong><?php the_title();?></strong></p>
			<?php endwhile; wp_reset_query(); ?>
		</article>	
	</div>
 
<?php get_footer(); ?>

The rest of the CSS is all presentational, just set the article to 100% for the width.

.tax-clients article { background: rgba(238,142,104,.5); border: 1px solid rgba(103,51,24,.5); float: left; margin-bottom: 10px; padding: 1.25%; width: 97.5%; }
.tax-clients article p:nth-of-type(2) { font-weight: bold; padding: 0; }

Then all we need to do is provide a simple IE fallback for the backgrounds and borders.

.no-rgba .tax-clients article { background: rgb(238,142,104); border: 1px solid rgba(103,51,24); }

Blog

The blog section is a bit more complicated, as we have a main content area and a sidebar to deal with.

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>The Blog</h1>
		</section>
 
		<article id="blog">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<section>
					<h2><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a></h2>
					<?php wpe_excerpt('wpe_excerptlength_index', 'wpe_excerptmore'); ?>
					<a class="btn" title="Read <?php the_title();?>" href="<?php the_permalink();?>">Read more…</a>
				</section>
			<?php endwhile; wp_reset_query(); ?>
 
			<?php wp_pagenavi(); ?>
		</article>
 
		<?php get_sidebar(); ?>
 
	</div>
<?php get_footer(); ?>

The main content area is 77.604167% wide and the aside is 21.041667% wide. If you float the aside to the right, you don’t have to worry about calculating the margins between those. The widgets themselves need a padding of 15px, so divided from 201, we get 7.4257426% padding and a width of 85.074627%.

The rest is simple CSS!

.category #heading h1 { margin-bottom: 10px; }
.category #blog { float: left; width: 77.604167%; }
.category #blog section { background: url('images/divider.png') no-repeat center bottom; float: left; width: 100%; }
.category #blog h2 a { background: url('images/blogTitle.jpg') no-repeat left center; color: #222; text-transform: none; padding: 2px 0 0 65px; }
.category #blog h2 a:hover { color: #68a1a0; }
.category #blog .btn { background: #ee8e68; border: 1px solid #e5763d; color: #fff; float: left; font-size: .8125em; margin-bottom: 25px; padding: 6px 30px; }
.category #blog .btn:hover { background: #a5cecd; border-color: #68a1a0; }
 
aside { float: right; width: 21.041667%; }
aside h2 { font-size: 1em; }
aside > ul > li { list-style: none; margin-bottom: 15px; padding: 7.4257426%; width: 85.074627% }
aside ul ul { margin: 0; padding: 0; }
aside input[type=text] { border: 1px solid rgba(183,91,43,.2); font-size: .8125em; font-style: italic; padding: 2%; width: 96%; }
 
.wp-pagenavi { float: left; font-size: .8125em; margin-top: 20px; width: 100%; }
.wp-pagenavi .pages { float: left; font-weight: bold; padding: 5px 15px 0 0; }
.wp-pagenavi a, .wp-pagenavi .current { background: #ee8e68; border-radius: 12px; color: #fff; float: left; font-weight: normal; height: 20px; margin-right: 5px; padding-top: 3px; text-align: center; width: 23px; }
.wp-pagenavi a:hover { color: #222; }
.wp-pagenavi .current { color: #222; font-weight: bold; }
.wp-pagenavi a:nth-of-type(3n+2) { background: #e5763d; }
.wp-pagenavi a:nth-of-type(3n+3) { background: #a5cecd; }

Now it’s time for device check, you know the drill! Again the iPhone is a little squished, so I’m just going to hide the sidebar, since I don’t think anyone will be interested in the sidebar when coming on an iPhone.

@media only screen and (max-width: 480px) {
	#blog { width: 100%; }
	aside { display: none; }
}

Check in IE7 shows we have a few browser bugs. Mainly, the triple circles in the title are being cut off and the read more button is on top of the divider line. The button issue is easily fixed, simply remove the margin from the button and add it as padding to the div with the divider. The h2 a simply needed a display: block and it’s good to go. All the other IEs look great now as well.

Now we’ve come to the end of Part 4, here’s what our total CSS looks like:

/*
Theme Name: Amber Circles
Description: This theme is a combination of Hijinks (www.amberweinberg.com) and HTML5 Boilerplate (http://html5boilerplate.com/)
Author: Amber Weinberg
Author URI: http://www.www.amberweinberg.com.com/
 
*/
 
/*****HTML5 BOILERPLATE MINIFIED*******/
 
article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:13px;line-height:1.231;font-family:sans-serif;color:#222;margin:0}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;cursor:pointer;-webkit-appearance:button;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}::-moz-selection{background:#f8e8c0;color:#222;text-shadow:none}::selection{background:#f8e8c0;color:#222;text-shadow:none}a:focus{outline:thin dotted}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0}table button{overflow:auto}table input{overflow:auto}input[type="button"]{cursor:pointer;-webkit-appearance:button}input[type="reset"]{cursor:pointer;-webkit-appearance:button}input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"]{box-sizing:border-box}input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}
 
/****BODY STYLES********/
 
body { background: url('images/bkg.jpg') #FFF; color: #222; font: 100% Droid Sans, Arial, sans-serif; }
 
p { font-size: .8125em; line-height: 1.55em; margin: 0; padding-bottom: 15px; }
 
h1, h2 { font-size: 1.125em; text-transform: uppercase; }
h3 {}
 
a { color: #e5763d; font-weight: 700; text-decoration: none; }
a:hover { color: #68a1a0; }
 
.container { clear: both; margin: 0 auto; max-width: 960px; padding: 0 3%; }
 
/****HEADER STYLES*******/
 
header { border-top: 5px solid #222; float: left; margin-bottom: 15px; padding-top: 15px; width: 100%; }
header .container > a, header li { float: left; }
 
/*****NAV STYLES*******/
 
header .container > a:hover { opacity: .8; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul { float: right; padding: 5px 0 0; }
header li { list-style: none; padding: 0 10px; }
header li a { color: #222; font-size: .9375em; }
header li.current-menu-item a { font-weight: 700; text-decoration: line-through; }
 
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { padding: 0; position: relative; top: -5px; }
header li.menu-item-4780 a, header li.menu-item-4782 a, header li.menu-item-4781 a, header li.menu-item-4783 a { background: url('images/iconTW.jpg') no-repeat; float: left; height: 27px; margin-left: 5px; text-indent: -1000000px; width: 28px; }
header li.menu-item-4780 a { margin-left: 20px; }
header li.menu-item-4782 a { background: url('images/iconFB.jpg') no-repeat; }
header li.menu-item-4781 a { background: url('images/iconDR.jpg') no-repeat; }
header li.menu-item-4783 a { background: url('images/iconVC.jpg') no-repeat; }
 
header ul:hover li a { opacity: .3; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul:hover li a:hover { color: #222; font-weight: 700; opacity: 1; }
 
.no-rgba header ul:hover li a { color: #dee1be; }
.no-rgba header ul:hover li a:hover { color: #222; font-weight: 700; }
.ie7 header li.menu-item-4780 a { margin-left: 0; }
 
 
/*****FOOTER STYLES*******/
 
footer { background: #222; color: #fff; float: left; margin-top: 50px; padding: 15px 0; width: 100%; }
footer li { float: left; list-style: none; margin-right: 5.9375%;  }
footer #text-14 { width: 26.5625%; }
footer #text-14 a { background: url('images/arrowBlue.jpg') no-repeat right; display: inline-block; padding-right: 20px; }
footer #text-15 { width: 20%; }
footer #text-15 p { color: #ee8e68; font-weight: bold; line-height: 2em; }
footer .widget_twitter_vjck { font-weight: bold !important; width: 22.083333%; }
footer .widget_twitter_vjck ul { font-size: .75em; line-height: 1.55em; margin: 0; padding: 0; }
footer #text-17 { margin-right: 0; width: 13.541667%; }
footer p { font-size: .75em; }
footer a { color: #a5cecd; }
 
#bsap_1255814 .bsa_it_ad { background: none; border: none; padding: 0; }
#bsap_1255814 .bsa_it_ad * { color: #fff; font-size: .4em; font-weight: normal; line-height: 1.3em; text-align: center; }
#bsap_1255814 .bsa_it_ad .bsa_it_t { color: #fbfed6; font-size: 1.5em; font-weight: bold; }
#bsap_1255814 .bsa_it_p{ display: none; }
 
/*****HOME CONTENT STYLES*******/
 
#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto; height: 328px; max-width: 1099px; width: 100%; }
#slider { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; padding: 1%; width: 87.591241%; }
#slider a { float: left; height: 100%; max-height: 199px; overflow: hidden; width: 100%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
.no-backgroundsize #sliderBkg { background: url('images/sliderBkgIE.png') no-repeat; }
.no-backgroundsize #slider { padding: 0; }
 
.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; text-transform: none; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }
.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; margin-bottom: 20px; }
 
.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }
.column ul { color: #a5cecd; font-size: .8125em; line-height: 1.7em; list-style: none; margin: 0; padding: 0; }
.column p { padding: 0; }
.column p + a { background: url('images/arrowLink.png') no-repeat right; clear: both; float: left; font-size: .8125em; padding-right: 20px; }
 
/*****SUB CONTENT STYLES*******/
 
/*Portfolio Landing*/
 
#heading { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; margin-bottom: 20px; padding: 22px 0 10px; width: 100%; }
.no-multiplebgs #heading { background: url('images/divider.png') no-repeat center bottom; }
#heading h1 { margin: 0 0 15px; }
 
.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .portfolio:nth-of-type(3) h2 { background: rgba(229,118,61,.6); }
.tax-work .portfolio:nth-of-type(4) h2 { background: rgba(238,142,104,.6); }
.tax-work .portfolio h2 span.desc { color: #222; font-size: .7125em; font-weight: normal; line-height: 1.55em; position: relative; top: -10px; text-transform: none; }
.tax-work .portfolio h2 span.desc, .tax-work .portfolio:hover h2 span.title { display: none; }
.tax-work .portfolio:hover h2 span.desc { display: block; }
.no-rgba .portfolio h2 { background: rgb(165,206,205); }
 
.tax-work .items { float: right; width: 80%; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }
.tax-work .items img, .single-portfolio #details .highslide img, .single-portfolio .wp-post-image, aside > ul > li { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items img:hover { opacity: .5; }
.no-rgba .items img, .no-rgba .single-portfolio #details .highslide img, .no-rgba .single-portfolio .wp-post-image, .no-rgba aside > ul > li { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }
 
/*Portfolio Detail*/
 
.single-portfolio #heading h1 { float: left; }
.single-portfolio #heading p { float: right; font-weight: bold; }
.single-portfolio .wp-post-image { float: left; padding: 1.5%; max-width: 60.416667%; }
 
.single-portfolio #details { float: right; width: 34.490605%; }
.single-portfolio #details h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; clear: both; margin-top: 0; padding: 20px 0 15px; }
.single-portfolio #details ul, aside > ul { margin: 0 0 20px; padding: 0; }
.single-portfolio #details li { background: url('images/li1.jpg') no-repeat left center; font-size: .75em; list-style: none; margin-bottom: 3px; padding-left: 15px; }
.single-portfolio #details li:nth-of-type(3n+2) { background: url('images/li2.jpg') no-repeat left center; }
.single-portfolio #details li:nth-of-type(3n+3) { background: url('images/li3.jpg') no-repeat left center; }
.single-portfolio #details .highslide img { height: auto !important; margin: 0 3% 15px 0; padding: 1.8%; width: auto !important; max-width: 26.470588%; }
 
/*Testimonials*/
 
.tax-clients article { background: rgba(238,142,104,.5); border: 1px solid rgba(103,51,24,.5); float: left; margin-bottom: 10px; padding: 1.25%; width: 97.5%; }
.tax-clients article p:nth-of-type(2) { font-weight: bold; padding: 0; }
.no-rgba .tax-clients article { background: rgb(238,142,104); border: 1px solid rgba(103,51,24); }
 
/*Blog*/
 
.category #heading h1 { margin-bottom: 10px; }
#blog { float: left; width: 77.604167%; }
#blog section { background: url('images/divider.png') no-repeat center bottom; float: left; padding-bottom: 25px; width: 100%; }
#blog h2 a { background: url('images/blogTitle.jpg') no-repeat left center; display: block; color: #222; margin-top: 3px; padding: 3px 0 0 65px; text-transform: none; }
#blog h2 a:hover { color: #68a1a0; }
#blog .btn { background: #ee8e68; border: 1px solid #e5763d; color: #fff; float: left; font-size: .8125em; padding: 6px 30px; }
#blog .btn:hover { background: #a5cecd; border-color: #68a1a0; }
 
aside { float: right; width: 21.041667%; }
aside h2 { font-size: 1em; }
aside > ul > li { list-style: none; margin-bottom: 15px; padding: 7.4257426%; width: 85.074627% }
aside ul ul { margin: 0; padding: 0; }
aside input[type=text] { border: 1px solid rgba(183,91,43,.2); font-size: .8125em; font-style: italic; padding: 2%; width: 96%; }
 
.wp-pagenavi { float: left; font-size: .8125em; margin-top: 20px; width: 100%; }
.wp-pagenavi .pages { float: left; font-weight: bold; padding: 5px 15px 0 0; }
.wp-pagenavi a, .wp-pagenavi .current { background: #ee8e68; border-radius: 12px; color: #fff; float: left; font-weight: normal; height: 20px; margin-right: 5px; padding-top: 3px; text-align: center; width: 23px; }
.wp-pagenavi a:hover { color: #222; }
.wp-pagenavi .current { color: #222; font-weight: bold; }
.wp-pagenavi a:nth-of-type(3n+2) { background: #e5763d; }
.wp-pagenavi a:nth-of-type(3n+3) { background: #a5cecd; }
 
/*****MEDIA QUERIES FOR MOBILE STYLES *******/
 
@media only screen and (max-width: 1024px) {
	#slider { height: 52.999999%; }
}
 
@media only screen and (max-width: 960px) {
	header .container > a { display: block; float: none; text-align: center; }
	header ul { clear: both; float: left; text-align: center; width: 100%; }
	header ul li { display: inline-block; float: none; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { top: 9px; }
	#slider { height: 34.70732%; }
	.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
	.tax-work .portfolio .items { text-align: center; width: 100%; }
	.tax-work .portfolio .items img { float: none; }
}
 
@media only screen and (max-width: 480px) {
	#slider { height: 41.5%; }
	.column, footer li { float: none; padding: 0 0 15px; width: 100% !important; }
	.single-portfolio #heading * { clear: both; text-align: center; width: 100%; }
	.single-portfolio .wp-post-image { max-width: 97%; width: 97%; }
	.single-portfolio #details { margin-top: 30px; width: 100%; }
	#blog { width: 100%; }
	aside { display: none; }
}
 
@media only screen and (max-width: 400px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
}
 
/******PRINT STYLES*********/
 
@media print{
	*{background:transparent!important;color:#000!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a{text-decoration:underline}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after{content:""}a[href^="javascript:"]:after{content:""}a[href^="#"]:after{content:""}pre{border:1px solid #999;page-break-inside:avoid}blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr{page-break-inside:avoid}img{page-break-inside:avoid;max-width:100%!important}@page{margin:.5cm}p{orphans:3;widows:3}h2{orphans:3;widows:3;page-break-after:avoid}h3{orphans:3;widows:3;page-break-after:avoid}
}

Responsive design is no easy task! This site has taken me a whole lot longer to code than anything else I’ve ever worked on!

Next week

Cross your fingers, we’ll be finishing up the site, and I’ll offer an eBook of everything!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-4/feed/ 6 Step-By-Step: Turning A Design Responsive in WordPress, Part 3http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/#comments Wed, 12 Oct 2011 16:37:12 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4844 Back for another week? In the first week, we got our design ready and coded the header. Last week, we coded the homepage content. This week we’ll be finishing up the homepage and the footer, and doing some testing. Maybe we’ll even get into one of the sub page designs, maybe not.

Other Posts In This Series

The Footer

The footer is probably the easiest part of the whole design. We simply need to float the footer 100% and add the background and the centering container.

	<footer>
			<div class="container"></div>
		</footer>
footer { background: #222; color: #fff; float: left; margin-top: 50px; padding-top: 15px; width: 100%; }

I went ahead and added a widget bar to the footer, so I wouldn’t need to go into the code to update the content.

<footer>
			<ul class="container">
				<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?>
				<?php endif; ?>
			</ul>
		</footer>

This time, while we have four different columns, they’re all different widths and style, so it’s time to break out the maths again. The first widget’s target width is 255px, and with the parent being, of course, 960px that makes it 26.5625% wide. The second column is 192px so 20% width, third column is 212px, 22.083333%, and the fourth is 130px, 13.541667%. This leaves us with 5.9375% of right margins for the first three columns. Broken down, the equation comes to:

26.5625 + 20 + 22.083333 + 13.541667 (the width of the columns) = 82.1875 (total width of columns) – 100 (percent) = 17.8125 (space left over before we hit 100%) / 3 (number of columns needing margins) = 5.9375 (amount each column can have as a margin).

It seems more complicated than it is, I promise.

footer { background: #222; color: #fff; float: left; margin-top: 50px; padding-top: 15px; width: 100%; }
footer li { float: left; list-style: none; margin-right: 5.9375%;  }
footer #text-14 { width: 26.5625%; }
footer #text-15 { width: 20%; }
footer .widget_twitter_vjck { width: 22.083333%; }
footer #text-17 { margin-right: 0; width: 13.541667%; }

Let’s check it in IE7-9 now. A few styling bugs in IE7, but nothing that wasn’t easily fixed. Now for the devices. iPad landscape and portrait look great. Not so much with the iPhone in both portrait and landscape. We’ll need to make the columns on their own line, like we did with the content above.

@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column, footer li { float: none; padding: 0 0 15px; width: 100% !important; }
}

I wasn’t happy with the way the hero area was displaying across resolutions. The circle background and border just wouldn’t match up correctly. Finally realized that by removing the border from the background and making it an actual border, I could make it match in sizes. For IE, I just specified it’s old image with the PNG border, because I didn’t want to compromise on the style. The new slider area now looks like:

#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto 0; max-height: 328px; max-width: 1099px; width: 100%; }
#slider { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; padding: 1%; width: 87.591241%; }
#slider a { float: left; height: 100%; max-height: 199px; overflow: hidden; width: 100%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
.no-backgroundsize #sliderBkg { background: url('images/sliderBkgIE.png') no-repeat; }
.no-backgroundsize #slider { padding: 0; }

Now that we’ve finished the homepage, it’s time to do some extra testing. First, we need to validate the doc. It may not seem important anymore, but I believe that it’s essential to help find bugs and issues, as well as promoting standards.

And ouch..there’s a lot…31 errors which is more errors than I’ve ever had in my entire life…on closer inspection it looks like they’re mostly due to the HTML5 boilerplate being implemented correctly. Simply by moving the IE if statements below the doctype (I coulda sworn that’s how they where in the example!), our errors get cut down to 8. These were easily fixed, except for one created by a plugin and a standard WP validation error (hoping they fix that soon!).

What about Android? It’s time we fired up the simulator for that as well.

And woot! Perfect as well. Let’s move on.

The Portfolio Landing Page

The portfolio landing page displays all of the portfolio pieces, separated by category. I’m also going to include some neat rollover effects here.

This section is pretty basic. We’ll be looping through each category, and displaying the thumbnails to the right, with the title to the left:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Client Portfolio</h1>
			<p><?php category_description();?></p>
		</section>
 
		<section>
			<h2>WordPress</h2>
 
			<div class="items">
				<?php query_posts('work=wordpress-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
 
		<section>
			<h2>Mobile</h2>
 
			<div class="items">
				<?php query_posts('work=mobile-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
 
		<section>
			<h2>CoreCommerce</h2>
 
			<div class="items">
				<?php query_posts('work=corecommerce&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
 
		<section>
			<h2>Static</h2>
 
			<div class="items">
				<?php query_posts('work=static-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>	
		</section>
	</div>
 
<?php get_footer(); ?>

We’ll need to start out styling the heading section first. This is simple to get working responsively, by just giving it 100% width and allowing the browser to resize at will.

The circle headings and thumbnails will remain a fixed size however, to preserve the integrity of the layout.

#heading { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; margin-bottom: 20px; padding: 22px 0 10px; width: 100%; }
#heading h1 { margin: 0 0 15px; }
 
.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .items { float: right; width: 80%; }
.tax-work .items img.wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }

When the window is reduced, the thumbnails fall below the circle nicely, but the circle itself is left in the top left corner, so we’ll add a rule to a media query to position in the middle and give it a bit of space at the bottom.

.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
.tax-work .portfolio .items { width: 100%; }
.tax-work .portfolio .items img { display: block; float: none; margin: 0 auto 10px; }

Now for the hovers. I wanted the the titles in the circle to disappear and a short description to appear when the user hovered over any item in that section. I also wanted to do this in CSS only. Here’s my solution:

<h2><span class="title">Mobile</span><span class="desc">mobile web sites built in CSS3, HTML &amp; JS</span></h2>

I put the description and title into seperate spans in HTML, which I hide with display none in CSS. Then when the user hovered over the items div, it would display the span.desc and hide the span.title

.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .portfolio:nth-of-type(3) h2 { background: rgba(229,118,61,.6); }
.tax-work .portfolio:nth-of-type(4) h2 { background: rgba(238,142,104,.6); }
.tax-work .portfolio h2 span.desc { color: #222; font-size: .7125em; font-weight: normal; line-height: 1.55em; position: relative; top: -10px; text-transform: none; }
.tax-work .portfolio h2 span.desc, .tax-work .portfolio:hover h2 span.title { display: none; }
.tax-work .portfolio:hover h2 span.desc { display: block; }
 
.tax-work .items { float: right; width: 80%; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }
.tax-work .items img { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items img:hover { opacity: .5; }

Nothing to it! Doing a quick check in the iPhone and iPad, the iPhone looks great but we have a few issues on the iPad. We basically just need to move our statements around.

@media only screen and (max-width: 960px) {
	header .container > a { display: block; float: none; text-align: center; }
	header ul { clear: both; float: left; text-align: center; width: 100%; }
	header ul li { display: inline-block; float: none; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { top: 9px; }
	#slider { height: 14.70732%; }
	.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
	.tax-work .portfolio .items { text-align: center; width: 100%; }
	.tax-work .portfolio .items img { float: none; }
}

This results in the circle on top and rows of two thumbnails on portrait mode of the iPad, full regular display on landscape mode of the iPad, and then the circles on top and rows of one thumbnail on both views of the iPod (and Android of course!).

Now it’s time to take a quick peek at IE…which needs fall backs for the circles and the borders since IE8 and below doesn’t support RGBA.

.no-rgba .portfolio h2 { background: rgb(165,206,205); }
.no-rgba .items img { background: rgb(229,118,61); border: 1px solid rgb(183,91,43);

While not the prettiest, having rounded corners and opacity just isn’t a big enough issue for me to make image fallbacks…plus the amount of IE8 and below users I have is less than 2% of my total traffic.

Another End!

We’ll be back next time for some more responsive goodness!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/feed/ 2