#001: Taking Content Inventory

Welcome! This is going to be quite the journey, and like all journeys, this one starts with a single step. Our first step is to take inventory of bit of content on CSS-Tricks. Starting with this means that we won't be forgetting or neglecting any particular area of the site as we start thinking about the new design, because we've …


#002: Establishing Redesign Goals

This redesign isn't a redesign just for the sake of redesigning. I want to improve the site in every conceivable way you can improve a site. One of the big things is that the design should serve the different types of content in a way appropriate to that content. For example, the individual video pages. Why do those look exactly …


#003: Content Strategy Session

This is an audio recording of a Skype call between Erin Kissane and myself. Erin wrote the book on content strategy so I was lucky to get her help and analysis.

By starting out with content strategy, the things that we learn here can help inform visual design choices later to come. We got a lot more from this than …


#004: Starting in Photoshop, Background Texture, and Main Branding

Designing in the browser is cool and all, but starting in Photoshop keeps me at my most creative when I need it the most: when facing the blank canvas. One way to fight against the painful glare of a white canvas is to toss down some texture. We do that here by picking a nice one off Subtle Patterns (they …


#005: Adding Slight Dimensionality

We add some extra layers beneath the main header/branding box to give the "stack of papers" look. No big metaphor or anything, it just adds some visual interest and gives us something to work with as we move to other areas.

I go off a bit of a tangent on how things don't really need to look "real" on the …


#006: Photoshopping the Main Navigation

We start designing the top level (main) navigation of the site. We're starting with the desktop size screen (at an admittedly arbitrary width) but we're not worried that the navigation will have any problem adapting to a small screen.

We decide that icons are a pretty cool thing to use to visually distinguish nav links from each other. The last …


#007: Photoshopping Icons and Text Into Navigation

We start dropping the text into the main navigation, just to see how it will fit, work on sizing, colors, etc. Some of the text is fitting pretty tight but that's OK, we'll make room, especially once it turns into HTML/CSS and adjustments are even easier.

We use the same Gotham Rounded for the text. Might as well continue the …


#008: Photoshopping the Module Pattern

The entire site is going to based on "modules." Each little thing is going to be literally be in a box (both visually and in the code, ultimately). We start with a module for the most recent blog post on the homepage, but the module pattern will be used everywhere. Individual comments, sidebar areas like "The Poll", advertisements... everything.

Once …


#009: Setting Up our Local Dev Environment

We certainly aren't "done" in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we're building not a picture of a website (as they say).

We create a folder that will be home for this project and then manually create all the …


#010: Starting to Write HTML

While looking at our Photoshop mockup, we write start writing HTML to describe what we are looking at. We are of course using HTML5 whenever it makes sense to staying as absolutely semantic as possible. For example we use the <time> element for the publication date of the <article>, because, you know, that's smart and semantic.

We touch on …


#011: Normalizing our CSS Foundation

Removing the user agent (default) CSS from most elements is usually a good idea. This has long been done by "universal" resets or things like the Eric Meyer Reset. I think the best option today is Normalize.css.

One way to explain it is that Normalize does both more and less than a reset. It does more in that …


#012: CSSing the Header / Logo

So far the actual web site doesn't look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a bit of a "real" start on building the site visually.

We use Frank DeLoupe as a color picker, which is …


#013: CSSing the Navigation Structure

We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.

The navigation blocks, at the widest width, are 1/8 the width of nav parent. We set them to inline-block so they will accept that width. We end up having …


#014: Custom Fonts with Typekit

We set up a new Kit in Typekit for v10. For branding, we'll use Proxima Nova Soft for now and some other fonts that look as close to the HF&J fonts in our mockup as possible.

We're a little worried about the weight of the Kit (literally the file size of all the fonts) but think we can do a …


#015: Adding Icons to the Navigation with an Icon Font

We start by tweaking the logo type a bit, but then jump into adding icons into the main nav. When we were designing the navigation in Photoshop (Video #007) we used the icon font Entypo. Now we'll use it on the web as well.

We run the font through Font Squirrel @font-face generator which ensures we'll get …


#016: Using Media Queries in Sass

We introduce the concept of @media queries in CSS.

A lot of what using Sass on this project allows us to do is stay DRY (don't repeat yourself). We did that setting color and size variables. We did that with our font stacks. Now we're doing it again with media queries. Anytime we need a media query, we now have …


#017: Setting up a Local URL with MAMP

In this super quick screencast, we use MAMP to set up a URL we can use for local development. This is useful for a bunch of reasons:

  • We can link to resources via relative links from the root, e.g. background: url(/images/something.jpg);
  • TypeKit fonts can work because we can "allow" this specific URL to work
  • We'll need this later anyway when


#018: Making our Project use Compass

We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a leap of faith to reliquish control of stuff like this (I guess no more than using a preprocessor to begin …


#019: Building a Simple Grid

The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren't grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They're easy. We'll set a simple one up in just a few minutes. The concepts at work here insprired the article "Don't


#020: Finishing the Grid and Setting Up Modules

Continuing the concept of "Don't Overthink It Grids", we get gutters going on in the grid by just using some simple padding. We keep the padding number consistant by reusing our global $padding variable. You'll find that we use that number a ton as we do our styling.

We style up the "module" class with a simple background and …


#021: Breaking Into Include-able Parts

Now that we're running a custom local domain, we can use PHP. The "P" in MAMP is for "PHP" =). Using PHP means that we can use includes. For instance:

<?php include("header.php"); ?>

Our goal is to make a static "blog post" page to start messing around with. We could do that by duplicating our index.html page (now index.php), but …


#022: Flexy Images (Figures and Figcaptions)

Before we do some typography work, I thought we would fix the annoying thing where the images are busting outside of the article area and the grid. Using some simple CSS rules to override inline image attributes and style, we can squish images to fit into our post at the correct size.

Squishing images like this used to be rather …


#023: Moving Typography out of Normalize

I think it's very nice to have an individual file (.scss) that is for the vast majority of typography on the site. Normalize has quite a bit of typography related stuff in it already, so let's remove that and move it to our own typography file. The idea is to stay true to the way Normalize works best, in that …


#024: Playing with Typography in Typecast

Typecast (in beta at the time of this filming) is a really neat web app for playing with web typography. It gives you a great interface for playing around with the basics of typography, like what your headers and body copy look like. The real fundamentals: sizing, line-height, coloring, all that stuff.

What makes Typecast really cool is that you …


#025: Post Typography, Part 1

Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it's the place a reader will be spending the most time looking at.

We start out by thinking about header tags and their sizing. Then we style the <time> element, which will …


#026: Post Typography, Part 2

We've done a little bit of work on headers, but we'll dig in more on those in this screencast. Headers are a darn important aspect of any site. Done well, our friends h1 through h6 should serve just about every header need on even a complex site. Although, sometimes the correct semantic choice and the one we want stylisticly differs …


#027: Code Syntax Highlighting, Part 1

As far back as I can remember, I used Google Code Prettify to apply the syntax highlighting on code block on CSS-Tricks. You know, where in a line like <div>test</div>, the <div> part is a different color than the test part. This is very helpful for code readability. It also helps readers instantly understand what they are looking at …


#028: Code Syntax Highlighting, Part 2

We've just installed Prism.js and got it working.

In this screencast we find a theme called the Tomorrow Theme and ingrate it's colors into the syntax highlighting. We make a little color key at the top of the file for quick reference. We also make some guesses as to what is what, at least to start. What we end up …


#029: Integrating FitVids.js

Images aren't the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of <video>, but honestly most video on the web these …


#030: Stubbing Out Pages for Navigation

We have this eight top-level navigation tabs, but Home is the only one that "works." Just so we have some pages to work with, we stub out some pages for the rest of all the tabs.

Because we were smart with includes (Video #021) this is very easy.

We can now click around the different pages. Yay! A …


#031: Current Navigation Highlighting

In this super quick video we add in all the CSS necessary to make sure the current page item in the main navigation gets highlighted when that page is active. Turns out we kinda already did this, since we're so smart and thought ahead.

This is exactly why we didn't include the body tag in the includes, so that we …


#032: Making The Grid Responsive

We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is.

The next change we make is to lessen some of the outside gaps at narrower screen sizes. On wide screens, the …


#033: Photoshopping Search

There is a lot of content on CSS-Tricks. That's one of the things that makes it's design a bit challenging. While we can stay clean with the design, we probably can't get away with "minimal" with the amount of stuff that deserves attention on the site and makes the site what it is.

All that to say, search is very


#034: Building Search, Part 1

Now that we've Photoshopped what we hope to accomplish with the search area, we set about building it with HTML and CSS. We already have our icon font loaded up, so we place that on the page. Font Explorer X helps us out showing the proper HTML character to use for the magnifying glass.

We add the markup to our …


#035: Preventing Typekit FOUT

We take a little break from working on search to solve a little niggling issue.

"FOUT" being "Flash of Unstyled Text". This is phenomenon where @font-face fonts take a little bit to load and thus you see the fallback font before the custom font. This is normally not a problem in Typekit. Nor is it really a problem in …


#036: Building Search, Part 2

We pick up where we left off in Video #034 and continue building out the search area.

This time we're focusing on the "open" state of the search, building the actual form elements themselves. The search field itself uses the HTML5 form element type "search" - which usually has some custom styling associated with it, but because we're using Normalize …


#037: Building Search, Part 3

We have a little more work to do to finish up the search area.

We get sidetracked for just a second as I notice we didn't add the three-dimensional stacking affect to the page wrap yet, so we do that and change the coloring.

Then we work on the "Search in:" area, which are the little links where you can …


#038: Adding Button States

We've created the look of a button in it's regular state, but a 3D button like that is begging for a "pushed" state. What we do is add a darker color to the button on :hover and :focus. Then for :active (pushed), we remove some of the box-shadows and nudge it down and to the right with relative …


#039: Photoshopping the Top Treehouse Ad

We've left a big amount of open space in the header. From the very start, I knew this would be be for CSS-Tricks primary sponsor, Treehouse. In this screencast we start designing what the advertisement for them will be like. We're actually really lucky here in that I have a relationship with Treehouse such that I can design the …


#040: Building the Top Treehouse Ad, Part 1

We start out with the intention of jumping into HTML & CSSing the Top Treehouse Ad that we just designed, but of course get derailed as soon as we start with fiddling around with the logo and how it behaves in the responsive environment. It's appropriate timing though, as we'll need to really define the space we have available for …