Welcome to CSS Wizardry—Web standards design and development

Fully fluid, responsive CSS carousel

31st October, 2011 in Web Development

If you follow me on Twitter you’ll know I’ve been pretty enthused about this fluid CSS carousel of mine. There are two aspects to it; the fluidity and the CSS functionality.

Demo

Continue reading this post →

By Harry Roberts in Web Development. Tags: , , , , , | 18 Comments »

The CSS Wizardry build-along is go!

27th October, 2011 in Web Development

Okay, so you decided it wouldn’t be boring and that I’m not big-headed in thinking that people might actually want to watch me coding, so I’m quite excited to announce that the build-along will be going ahead!

Entry is now closed. Thanks all who sent in a PSD, watch this space for a launch article.

Obviously there need to be some terms and conditions. Apologies if these seem a little harsh(ly worded) but they are as follows:

I’m keen to keep this as informal as possible, but the format will take:

  1. If you want me to build your PSD please email a full-size JPG of your design by Wednesday 2 November 2011 to harry at csswizardry dot com with the subject line Build-along. This subject line is vital as I’m going to set up a Gmail rule to group stuff. Any non-conforming emails might get overlooked.
  2. I’ll look at the JPGs and choose one to build. I’ll announce the person I choose in a blog post and also email them directly, at which point they reply with their actual PSD file. If your PSD didn’t get chosen then I will not email you I’m afraid; that’d take forever!
  3. The PSD must be properly constructed. I don’t want to be battling with any Layer 12 Copy 4 v2 stuff!
  4. Make sure you provide any font-files or Typekit etc information if your design uses them.
  5. I’m most likely going to be building the PSD on Friday 4 November 2011. The reason for this is that if it keeps me up into the early hours then I’d rather that was on a weekend rather than a work-night. This does mean that if you want to follow along then you’ll have to be in on a Friday evening, no pub!
  6. I’ll announce the URL in a blog post and Twitter, you can follow along live.
  7. The code will be getting committed to GitHub, too, so make sure you’re okay with that!

This all seems a bit formal, I realise, but it really won’t be. I just need to make sure I have all the stuff in the right place at the right time!

Pop any questions in the comments and I’ll update the post as necessary. Please hashtag any and all tweets about the event with #buildAlong.

So, in summary:

  1. Get a nice, neat, tidy PSD together.
  2. Send me a JPG of it as per the exact email rules.
  3. I’ll announce whose PSD I’ll be building in a blog post.
  4. Be around at about 7pm UTC (Dublin, Edinburgh, Lisbon, London) on Friday 4th November to watch along as I code.
  5. You will get a HTML/CSS single page template emailed back to you once it’s done.

Right, get emailing me!

Update

While there are loads of you interested in watching this event, no one has sent in a PSD. Not one! Mention this to friends, your boss, your designer, anyone. Without a PSD the build-along can’t run :(

By Harry Roberts in Web Development. Tags: , , | 9 Comments »

Build-along (testing the water)

25th October, 2011 in Web Development

N.B. The build along went ahead.

I’ve been toying around with this idea the last few weeks. I’ve decided to do a quick testing-the-water blog post to gauge interest and see whether anyone else would be into the idea. The story goes thus…

A few weeks ago I was building a page for my good friend and awesome chap Nick Payne—the page had been designed by another swell fella, Ian Thomas. We’re all pretty good friends and all excel in different areas, Ian designed Nick’s site and, as designers don’t need to code, I built it. Nick sorted all the back-end and is building it onto JAOSS.

N.B. Ian can and does actually code, but for this project we all wanted a slice of the action so, in this case, he didn’t…

Anyway, I always build static HTML files in my Dropbox public directory as people can have a quick look at it if I need to share it, plus I can test it on a variety of browsers on different devices. I gave Nick the URL early on and told him I was about to get to work…

An hour or so later I got a text from Nick saying that he was loving seeing the progress with every refresh, which I also thought was pretty cool.

Enter my idea… a live build-along!

The idea I’m toying with is that people (it could be pretty much anyone) get in touch (somehow) with PSDs they need building; a PSD that they were going to get their staff in their agency to do, or that they were going to give out to a freelancer, anything, and I will pick one and build it for free on the provision I can build it in my public directory and that people can watch along as I code away.

There are obviously some massive requirements:

The outcomes would be:

So basically:

  1. People submit PSDs.
  2. I choose one.
  3. I pick an evening to build it.
  4. I share the URL on Twitter and in a blog post.
  5. People can keep the tab open and keep dipping in-and-out as I build, watching the progress.
  6. For people not in the right time-zone I could potentially record the screen.
  7. I finish and hand back a fully coded single-page.

Naturally there would be some informal terms and conditions that I’d iron out nearer the time but for now, anyone interested?

Lemme know!
Harry

By Harry Roberts in Web Development. Tags: , , | 26 Comments »

Reset restarted

18th October, 2011 in Web Development

Everyone knows the trusty CSS reset; that oh-so-useful tool that saves us many a headache. We love it so much in fact that we tend to use it on every project—but therein lies the problem…

When I discovered the CSS reset I almost cried with joy; the sheer amount of headaches, bug fixes—and thus time—it saved me was astounding. I vowed from that day on that I’d always use it, wherever I go. I’ve now realised that was a little silly…

I’ve realised that each time I blindly copy paste my reset, I do so without thinking, I’ve never really stopped to think about what’s in it, or what it all does.

Some time ago I removed the frankly ridiculous lists rest:

ul,ol{ list-style:none; }

I have no idea how this ever got into a reset. I mean sure, it resets it—and Meyer does tell you to use the reset with care—but to remove the bullets from lists is more than a little daft if you ask me. Lists without bullets are the exception rather than the rule, so remove them only when you don’t want them, otherwise you end up with code like this:

ul,ol{ list-style:none; }

.nav li{
    display:inline
}

.plain-old-regular-list{
    list-style:disc outside;
}

Whereas this is actually way more sensible:

.nav{
    list-style:none;
}
.nav li{
    display:inline
}

Anyway, that aside, I’ve recently realised that my reset was getting stupid, and it’s embarrassing to admit that I had stylesheets like this:

/* RESET */
h1,h2,h3,h4,h5,h6{
  font-weight:normal;
}
em,strong{
  font-style:normal;
  font-weight:normal;
}

...

/* TYPE */
h1,h2,h3,h4,h5,h6{
  font-weight:bold;
}
em{
  font-style:italic;
}
strong{
  font-weight:bold;
}

I know, face palm, right?

So I started to slowly slim my reset down to some sensible defaults and I removed things that I found myself constantly overwriting or deleting and finally, tonight, I skimmed over the HTML spec’s text level elements and I restarted my reset using sensible default styles based on the elements’ semantics.

The reset is below, but do not treat this one as the final version!

/*------------------------------------*\
    RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart...
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display:block;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
strong,b,mark{
	font-weight:bold;
	font-style:inherit;
}
em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}
abbr[title],dfn[title]{
	cursor:help;
	border-bottom:1px dotted;
}
ins{
	border-bottom:1px solid;
}
a,u,ins{
	text-decoration:none;
}
del,s{
	text-decoration:line-through;
}
pre,code,samp,kbd{
	font-family:monospace;
}
small{
	font-size:0.75em;
}
img{
	border:none;
	font-style:italic;
}
input,
select,
textarea{
	font:inherit;
}

Find the always-up-to-date reset in vanilla on GitHub.

Things I’ve removed:

Things I’ve added:

Even if you don’t chose to use my reset (though it’d be great if you did) the one thing I urge you to take from this article is think about your reset. If you find yourself constantly overwriting rules from it then you ought to remove them. And remember; your reset can change per-build! You don’t always have to use the same one, just alter it where necessary for each design.

For example, let’s say that most of the time you opt to not have bordered fieldsets; if this is the case then it is safe to keep that section in your reset. But if, for whatever reason, a design does include them then simply remove that part. This makes far more sense than styling a fieldset twice; once in your reset to remove a border and once in your CSS to reapply it.

Reconsider your reset; the one I’ve authored is a pretty comprehensive one that will remove all quirky bits and pieces and leave you with nice—rather than stark—defaults. If you opt not to adopt mine then give your own some loving. Restart your reset!

By Harry Roberts in Web Development. Tags: , | 25 Comments »

The ‘island’ object

16th October, 2011 in Web Development

One thing I’ve been doing a lot of lately, since starting at Sky, is writing abstractions. OOCSS is nothing new, but its basic premise is that you can build really simple objects using a base class and then extend that object with more classes to add more styling to make a simple construct progressively more complex and specific.

One abstraction I love is by Nicole Sullivan (one of the best front-end devs in the world ever); the media object. Another I wrote is the more simple nav abstraction.

Today I’m going to share one that’s simpler still; the island object…

This super simple object is basically a single class used to box off content, leaving it closed on all sides like, well, an island.

Often you’d find yourself with markup and CSS a little like this:

<div class=content>

  <div class=promo>
      ...
  </div>

</div>

<div class=sub-content>

  <div class=twitter>
    ...
  </div>

</div>

.content{
  width:460px;
  float:left;
  padding:20px;
  margin-bottom:20px;
  background-color:#fff;
}
.sub-content{
  width:160px;
  float:left;
  padding:20px;
  margin-bottom:20px;
  background-color:#333;
  color:#fff;
}
.promo{
  padding:20px;
  margin-bottom:20px;
  border:1px solid #ff8;
  background-color:#ffc;
  color:#333;
}
.twitter{
  padding:20px;
  margin-bottom:20px;
  color:#fff;
  background-color:#00a0d1;
}

Here we see that these are all standalone blocks of boxed off content, but they all share certain things in common. These are essentially all islands of content that are individually adapted to look different.

Instead of repeating these declarations over and over we can make an abstraction to create padded, boxed off areas.

Now, we could use .box as a class but this implies square; we could have a redesign where we use rounded corners or even wacky, wavy background images which, although are boxed off, aren’t presentationally boxes. We don’t like presentational classes if we can help it.

Enter the .island class. Now our markup and CSS would be:

<div class="island content">

  <div class="island promo">
      ...
  </div>

</div>

<div class="island sub-content">

  <div class="island twitter">
    ...
  </div>

</div>

.island{
  padding:20px;
  margin-bottom:20px;
}
  .island > :last-child{
    margin-bottom:0; /* Remove the margin from the last child of a boxed off area so that we don't end up with compounded margin/padding spacings. */
  }

.content{
  width:460px;
  float:left;
  background-color:#fff;
}
.sub-content{
  width:160px;
  float:left;
  background-color:#333;
  color:#fff;
}
.promo{
  border:1px solid #ff8;
  background-color:#ffc;
  color:#333;
}
.twitter{
  color:#fff;
  background-color:#00a0d1;
}

This does make the HTML a tad larger, but the .island class is a powerful one that can quickly and rapidly create new areas of content without having to redeclare styles over and over.

Extending the island object with more specific styles means that you can have components that look vastly different but that are built upon the same basic construct. This also means that if you decide you design needs a little more white-space you can up the .island padding to, say, 24px in one go and all content blocks will inherit this new style.

By Harry Roberts in Web Development. Tags: , , , | 6 Comments »

Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs