The Lodge

Table of Contents For The Series

The Big v10 Redesign Project

#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 […]

#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. […]

#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 […]

#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 […]

#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 […]

#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 […]

#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. […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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 […]

#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, […]

#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 […]

#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 […]

#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 […]

#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 […]

#041: Building the Top Treehouse Ad, Part 2

We have the markup in place for the Treehouse ad on the top of the page, but we have some styling work to do. We start with the tree graphic itself. We’re thinking that using vector and outputting as SVG might be cool because it will look sharp and be of small file size. Watch […]

#042: Responsive-izing the Top Treehouse Ad

The ad we have in place is great for large/desktop size screens, but it starts to fail pretty quickly on smaller screens. We have some breakpoints already in use in this design, but where this design starts to break doesn’t match up with those existing breakpoints. No problem, we can easily make one-off breakpoints just […]

#043: Responsive-izing Search

The search design works fine until we get down to our “baby bear” (small mobile) size break. We have to do something different there. We make some room for it below the navigation area and then move it down into that space with absolute positioning. We have a bunch of tweaks to do to make […]

#044: Responsive Tweaks on Real Emulator

Squeezing down a desktop browser very narrow can give you a vague sense of how a responsive design works, but it’s not an accurate representation of an actual small screen device. And actual small screen devices are what we’re designing for here, not other curious designers squeezing their browsers down =). In this screencast we […]

#045: Hot Link Modules

For I think the first time in this series, we’re going to add some new things to the design directly by working in the browser (not starting in Photoshop first). Our goal is to design up the “Hot Links” modules that show themselves on the homepage. We label each section on the homepage with header […]

#046: Flexible Sidebar Ads

The top module in the main sidebar of the site belongs to Treehouse, as the main sponsor of CSS-Tricks. Based on a conversation I had with Ryan Carson, some of the best converting ads they have are the ones with people in them, so we pick out one of those to use for the graphic […]

#047: Building the Poll Module, Part 1

There is a long tradition of polls on CSS-Tricks. They are fun, gather good important data, and increase people’s connection to the site. Engagement FTW! We go grab the markup from the live v9 site for some stuff to work with. We fiddle with some spacing stuff to make the module look better for the […]

#048: Building the Poll Module, Part 2

We left off with a totally decent poll widget. The typography is clean and everything perfectly usable. However, it wasn’t exactly compelling or fun. We quickly look at the multicolor area of the Gallery as a bit of inspiration for what might make a fun background for the Polls module. Each poll answer has a […]

#049: Stubbing Out Headers & Sections

We’ve already spent a little time stubbing out pages so that our navigation works (Video #030) and you can click around the site, but what is on those sub pages isn’t enough to feel like a real page. We spend just a few minutes fleshing out those pages so that they feel more like real […]

#050: Building the Gallery Grid

We start to dig into the layout of the Gallery area, which is something that has been on my mind since the beginning of this redesign process. Mostly because… the gallery in v9 kinda sucked. We’re going to do better this time. We’re going to make the gallery layout nothing but a big grid of […]

#051: Smooth Loading Gallery, Part 1

We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take a moment to load and don’t have a width/height to use yet. So when they […]

#052: Smooth Loading Gallery, Part 2

In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads (which holds aspect ratio all by itself). Then apply a CSS class to make the […]

#053: Responsive Columns for the Gallery

We add in some responsiveness to the grid we have set up for the Gallery. At the widest screens, we have it set at four columns. Then we start adding in breakpoints via our super easy @mixins we have set up and have been re-using all over. At our mama-bear breakpoint we go down to […]

#054: Tap-to-Show Mobile Navigation

We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2×4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful lot of space. We open it up on the iOS simulator and see that in […]

#055: Getting Static Mockup into Version Control

Up until now, we’ve been making code changes locally without using any sort of version control. With the complexity of this site rising, that’s becoming more and more irresponsible. What changed and when? Why did it change? How can we see what it was before in case it causes problems we only find out about […]

#056: Updating Versions of jQuery Mid-Stream

As I was working on this design, jQuery 1.8 was released. This is just a quick video to rely the fact that this kind of thing happens as you develop sites and during pre-release development is the perfect time to upgrade stuff like this. We test it on a page that has the most jQuery […]

#057: Custom Header for The Gallery, Part 1

There are seven different main areas of the site beyond the homepage. So, I hired seven different illustrators to do designs. This is the first one we are going to dig into and get implemented into the site. It’s the the gallery section of the site and it’s done by Erica Sirotich. We jigger around […]

#058: Custom Header for The Gallery, Part 2 (with Reverso Media Queries)

We have the basic gallery header in place, but it’s missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen was resized, the people would stay put as the gallery wall moved behind them, so […]

#059: Custom Header for The Forums, Part 1

We just got the custom header for the Gallery in place, so while we’re at at, let’s keep going on adding another custom header. this one was done by Erica’s brother, Nick Sirotich. Because this is a different illustration, we do a few things differently. For one thing the row of heads really makes sense […]

#060: Custom Header for The Forums, Part 2 (Rapid Media Queries)

Nick’s illustration had three different layers for the heads. They are just slightly different variations. We could swap out the images with an animation or with JavaScript or something but having an always-running animation (or even one that runs every page load) would probably be mega-annoying for heavy forums users. Instead we’ll make it an […]

#061: Custom Header for The Forums, Part 3

The only thing missing now from our customs Forums header is the part that actually says “Forums”! Nick illustrated a hand holding a sign that was meant for that area. We remove the text that was there (not a huge fan of Impact) and replace it with something more hand-written which I feel like works […]

#062: A Look at the Current BuySellAds Setup

As you know, some of the ads on CSS-Tricks are kind of “self managed”, like the main Treehouse sponsor. I took that on because it’s just a single advertiser and we have a very specific relationship and the ads are integrated into the site in a way that wouldn’t be practical through an automated service. […]

#063: Mocking up BuySellAds Zones

Now that we know exactly what zones we’re working with, we go back to Photoshop and mock in how we want these ad zones to look. We have a precedent for the sidebar ad. It will be essentially just like the Treehouse sidebar ad, a module with an image inside it with the padding removed. […]

#064: Implementing BuySellAds Zones

We have a mockup of how we want our BuySellAds zones to look like, so let’s get on building it for real. The BuySellAds website provides the code we need to put on our site for the ads to show up. We copy and paste that over. We attempt to shut off the CSS that […]

#065: Adding BuySellAds Sidebar Ad

We have another BSA zone to get integrated into the site. This one should be a bit easier because we already have the JavaScript in place and it’s just one ads in one module. We’ve actually have that top treehouse sidebar ad already in place so we can take queues from that. We run into […]

#066: Photoshopping the Footer, Part 1

We embark upon the great journey that is the footer! CSS-Tricks has always had a big fancy footer and this design will be no exception. It’s not purely gratuitous though. We have lots of things that really deserve at least a link on the site (e.g. social media links, contact links, other projects I work […]

#067: Photoshopping the Footer, Part 2

We’re working on creating a design for the footer in Photoshop. Quick reminder: I work in Photoshop because I feel more creative there before I jump over to the browser. I don’t linger in Photoshop but that’s where I like to do visual exploration. We go back through the inventory of content we took in […]

#068: Photoshopping the Footer, Part 3

We get down to some more Photoshoppin’ business in this screencast, laying out the bottom-most footer with links to my two biggest other projects, CodePen and ShopTalk. We write some copy live in the screencast, which of course is an important aspect of design. The copy is accompanied by big logos of the projects themselves […]

#069: Photoshopping the Footer, Part 4

This is the last of the Photoshop work we’ll do specifically about the footer before we jump over into actually building it. In this screencast we essentially put in the list of links that surround the “Photostar”. Nothing too fancy right? We decide that you know what people understand and are easy to use? Lists […]

#070: HTMLing the Footer

With our design for the footer all ready to go in Photoshop, we can start building it out into our static HTML and CSS mockup. The first step is giving ourself some HTML to work with. We already have a “part” that we include on all pages called “footer.php”. This is the perfect place to […]

#071: CSSing the Footer, Part 1

With the HTML structure for the footer in place, we have what we need to start styling and getting this footer looking like what we designed in Photoshop. We create a new SCSS file just for the footer, because that just makes sense to keep modularized and that’s what we’ve been doing for everything else. […]

#072: CSSing the Footer, Part 2

In this screencast we largely deal with the orange “Photostar” the dominates the footer. We make the star in a separate file in Photoshop, so we can make it the correct size the web needs, not what makes the most sense in the main Photoshop file. We make it bigger than it is on the […]

#073: CSSing the Footer, Part 3

In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn’t so we can get these lines the size and position they need to be. We colorize the line with a gradient […]

#074: CSSing the Footer, Part 4

In this final screencast of building out the footer, we work on the bottom footer where the CodePen and ShopTalk areas are. We have to change the HTML a bit as come come to the realization that the four chunks along the bottom (logo, text, logo, text) would make sense to be a series of […]

#075: Custom Header for the Almanac

The header for the Alamanc has come in, this time from Giovanni Difeterici. We use a lot of techniques that we have already established to get started with this. We create a new .scss file just for the Alamanc section of the site. We resize the original artwork to the size we need it. We […]

#076: Custom Header for Video Section

The custom header illustration for the videos section has come in, this time from Alyssa Nassner. We spend a little time organizing the Photoshop file and naming layers and stuff just so we can stay organized and understand what’s what. We save a copy of the file so as not to mess with the original. […]

#077: Custom Header for Snippets

The snippets head has come in, this time by Reagan Ray. We spend a little time in Photoshop this time shuffling things around a little bit to make sure we have a background that is the exact height we need and also quite wide. The implementation of this one is simple. Nothing really needs to […]

#078: Moving to WordPress, Creating a Theme

We’ve already been working locally at a local domain (v10.whatup). Now it’s time to get started moving into WordPress. We’re going to keep working locally at a local domain, but we’re going to start using the already working local install of CSS-Tricks I have (css-tricks.whatup). We start by just duplicating the existing WordPress theme in […]

#079: Moving the Live Database Local

As we get started working in WordPress it will be best if we snag an exact copy of the live database to work with locally. Some websites have things like phpMyAdmin installed which provide a GUI for things like exporting a database, but the CSS-Tricks database is just too big for that. So instead we […]

#80: Updating Local Content by Running the SQL

We have an .sql file now thanks to exporting it and downloading it as we did in the last video. Now we just need to run it and overwrite our currently existing local database. This local database already exists because we’ve long been running CSS-Tricks locally through MAMP (one of those M’s being MySQL). We […]

#81: Moving the Header to WordPress

It’s time to actually get into moving our design into WordPress. Might as well start top-down and start with the header. Other than just being a logical place to start, it means we’ll be looking at things like the <head> and getting the right resources loading. We split our screen into two halves, the static […]

#82: Building the WordPress Homepage, Part 1

The great move into WordPress is underway! We finish up the header.php file and move into index.php. index.php is in charge of our homepage. The first line of that file is a PHP function get_header() which essentially just gets the header.php file in plops it in there, which is why we started there. We stay […]

#83: Building the WordPress Homepage, Part 2

We continue porting code over from our static mockup to our WordPress index.php page. We tweak “the loop” a bit to output just what we want. We get down far enough on the page where WordPress functions like get_sidebar() show up. Predictably, it behaves a lot like get_header() works. It goes and gets the sidebar.php […]

#84: Moving Footer into WordPress

We start out by fixing up some image file paths. I always make a distinction when using images inside a WordPress theme. Is this image part of this specific theme? Or would it make sense to use in any theme for this site? If it’s for the specific theme, the image belongs in the theme […]

#85: Blog Post View (single.php) in WordPress

If we had to pick, the view for a single blog post is probably the most important template on the site. We have a static mockup of a blog post page, so we work on moving it over into WordPress. The grid is slightly different. It uses our super easy grid structure and classes, only […]

#86: Photoshopping the Gallery

I was excited to get started on the Gallery area on the site. It’s one of the areas that was particularly bad in v9. It doesn’t get a ton of traffic, but maybe we can turn that around. I enjoy it very much and have a slew of content to get posted to it over […]

#87: Gallery Grid-izing

We have the gallery area set up in WordPress it’s spitting out what we need it to spit out, but there is almost no styling at all on the page yet. We start by going over the code in the functions.php file that sets up the custom post type that “Screenshots” are built from on […]

#88: Building the Gallery Bar

We set about building the bar below the gallery header. This bar has quite a job. It tells people where they are and what they are viewing (breadcrumbs, in a simple way). It also will contain pagination, a button, and all the while needs to be responsive. This is start of what we refer to […]

#89: Tweaking the Gallery Bar

In this video we make a bunch of tweaks to the bar we have set up with most of the functionality of the Gallery. Design is all about tweaking, isn’t it? We adjust some padding to make things line up better. We style the dropdown so the menu that is revealed looks a bit nicer. […]

#90: Setting Up Individual Pages in the Gallery

Every screenshot (or video) in the gallery has it’s own individual page. You get to them easily, just by clicking the image itself. We want to make this page as compelling to visit as possible. We’ll work on that in some upcoming videos, but for now let’s make sure the individual pages at working in […]

#91: Photoshopping Individual Gallery Pages

In this screencast we spend a bit of time thinking about what an individual Gallery screenshot page will look like. There is a bit of data that we already know we have. We have a title. We have a description. We have a set of tags that have been applied to it (it’s custom taxonomy). […]

#92: Building the Individual Gallery Pages

We have a bit of a Photoshop mockup to work from here as we continue building the template for the individual gallery page. First up, we styled the Next and Previous links. They are in absolutely positioned box in the gallery bar, so that we could center them on the page despite the other buttons […]

#93: An Attempt at Smooth Loading Gallery Pages

We spent all this time in our static mockup making some clever JavaScript that would “smooth load” the images in the Gallery. Now that we have the real Gallery going with real images, that is gone. Essentially, we need to get our image wrappers having a padding-top of the aspect ratio of the image. That […]

#94: Google Custom Search Setup

The search area in the header “works” in that it’s designed and you can click it open and closed and all that. But it doesn’t actually do any searching yet. That’s pretty important eh? On this site we use Google Custom Search Engines to search the content. WordPress has built in search, but it’s not […]

#95: JavaScript for Multiple Google Custom Search Engines

All of our Google Custom Search Engines are set up (we set up a different one for each section of the site). Our UI for search is ready to go. We have templates for each search results subpage ready to go. We just have one final step to get everything tied together: make the little […]

#96: Templates for Search Results

Search works! It’s just the template that you land on isn’t quite right. We need to tweak up the template so it looks right and matches the style of the site. The template that search uses at the start pretty generic. It’s a template that I use on lots of WordPress sites. It’s just like […]

#97: Photoshopping the Almanac

The Almanac was a thing launched in v9 and never quite got done. It’s getting closer though and closer every day. So in v10 we’ll design around the assumption that it is “done.” We look at the existing v9 design, which is kinda-sorta OK but doesn’t serve the content super well. As a quick aside, […]

#98: Building the Almanac, Part 1

This is an extra special EMPIRE STRIKES BACK themed episode of the v10 redesign series! Everything starts out just fine. We start moving some things over to our WordPress template from our static mockup. We have the header working in our static mockup, so we start with that. That’s always a great place to start […]

#99: Building the Almanac, Part 2

This is an extra special RETURN OF THE JEDI themed episode of the v10 redesign series! We left the last screencast utterly defeated. We were trying to use wp_list_pages() to output some navigation for the homepage of our Almanac section. One of our calls to it worked, the other didn’t. We tried all kinds of […]

#100: Almanac Styling, Part 1

Now that we’ve battled through getting the proper content on the homepage of the Almanac, we can dig into some actual styling with CSS. We decided to go with a handwriting font for some bits of this design. We browse through some fonts on Dafont, and end up downloading Shadows Into Light. The download comes […]

#101: Almanac Styling, Part 2

We jump forward just a teensy bit here. This is a pretty comprehensive screencast series, but it’s only 40 hours or so and of course this actual project is actually more like a few hundred. In this case the jump forward was to style up the two-page spread a little bit. We walk through those […]

#102: Almanac Styling, Part 3

In this screencast we wrap up the Almanac section. There is a pretty clear hierarchy in the Almanac. It goes: Home > Almanac Home > Property or Selector > Letter > Page Every one of those steps have a view to themselves. So far we’ve looked at the top most levels and bottom most levels […]

#103: Photoshopping Snippets Area

Time to dive into the Snippets area! That is, the actual content area of it. We already have the header in place. The snippets area is pretty popular. Without diving deep into analytics, I know from watching social media and hearing from people in real life that they find a lot of useful stuff in […]

#104: Building Snippets Area, Part 1 (HTML & CSS)

We now have a Photoshop design to work from for the homepage of the Snippets area. It’s a lot more browse-able than it was before, but keeps the rainbow spirit that it had before. Now we can jump into actually building it in our WordPress templates. Writing all the HTML and PHP and CSS and […]

#105: Building Snippets Area, Part 2 (HTML & CSS)

We have all the content we need on this page output and we have the header in place. Now we can start CSSin’ the content into the design we have going in Photoshop. One thing we did was make the list of seven categories static. It’s just one less wp_list_pages() call and thus a bit […]

#106: Building Snippets Area, Part 3 (HTML & CSS)

We’re pretty close to being done building the homepage of the Snippets area of the site. Right away, we start tweaking things and getting more stuff into shape. We have a weird experience where the absolutely positioned pseudo element didn’t respond to a negative left margin but was fine with a positive right margin. Who […]

#107: Building Snippets Area, Part 4 (JavaScript)

With the design for the snippets area “done” – we can now move into some interactivity (read: JavaScript). We add a super lame rollover for the links on the left just so we have something, but we know we’ll change that later. Then we set about actually writing some JavaScript. Upon visiting the page for […]

#108: Building Individual Snippets Page

We start about by looking at some of the grunt work I did behind the scenes fleshing out some things that needed to be done. Like adding in the rest of the wp_list_pages() calls to output the rest of the list of snippets for each category. And also adding in the CSS to change the […]

#109: Preparing for Working on Comments

I’m very excited to work on the comments section for this site. CSS-Tricks is home to some excellent discussions, thanks to all you fine folks. Designing the comments section is important because it needs to showcase those great discussions, keep those great discussions happening, and facilitate all the functionality of a WordPress-based discussion thread. The […]

#110: Photoshopping Comment Thread

We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form). We snag an avatar to work with. We’ll be using the Gravatar service for sure, as that’s tailor made for this and integrated perfectly into WordPress. Beyond that, […]

#111: Building Comment Thread

The design for comments might look very simple. And it is! But I think simple is effective in this case. Comments are such an important part of CSS-Tricks I want them to be very readable and comfortable. Now we’re going to jump into WordPress and make this comment thread a reality. The first thing we […]

#112: Building Comments Thread Wrapup

Right at the end of the last screencast we figured out that our Photoshop design, as simple as it is, has a problem that is going to be too hard to overcome with code. Reply comments live within the same list item element as the original comments. That makes it hard to accomplish the design […]

#113: Photoshopping Comment Form

In this screencast we jump back into Photoshop and design the comment form itself. As in, the inputs and textarea users need to fill out to leave a comment. This is placed by default at the end of the comment thread, way at the bottom of the page. Although, it can jump up higher in […]

#114: Building Comment Form

In this screencast we’re going to get into building the comment form in HTML/CSS. The markup for the comment form lives in the comments.php file in our theme. We look for the <form> element to find it. We lay out each of the three inputs (name, email, url) using the grid system we have in […]

#115: Setting up Google AdSense

We’re going to be adding in a new advertising zone on the site powered by Google AdSense. We did remove a BuySellAds zone a bit ago, so it’s not like we’re just trying to dump on new ads until the users can’t take it anymore, we try and balance being tasteful and the need for […]

#116: Custom Header for Demos

The last remaining headers have come in! We can now finish those up and have all our custom headers done. In this screencast we’ll work on the custom headers for the Demo section done by John Neiner. Interestingly, John was the only illustrator who provided the artwork in Illustrator. That’s nice for us in this […]

#117: Custom Header for Deals

After the weird confusion in the last video about which header we were actually doing, this time we really are going to be implementing the custom header for the Deals page! This one was done by Meg Hunt. Like all the headers, we spent some time looking at the original files and figuring out how […]

#118: Viewing Live Site with Theme Switcher Plugin

In this screencast we add a new plugin to the site that gives us the ability to switch the themes on the live site, but only so that we (as admins) can see it, not regular visitors. Before we add it, we look at the status of our project in Tower. We have a number […]

#119: Custom Header for Videos

I think I said in a previous video that we had finished up all the headers. Just kidding! There is one left! This one is for the Videos area and was done by Alyssa Nassner. We’ve gotten it going in the static template we just need to move it over to WordPress land. I also […]

#120: Choosing a Membership Plugin for WordPress

In this screencast we start talking about how we are going to build the membership area of CSS-Tricks. Part of the Kickstarter that made this whole thing possible was the promise that Kickstarter backers would get access to a private members-only area where they would watch videos like the one on this very page. It’s […]

#121: A Template for Generic Pages

We look at the contact page and decide that it’s the kind of page on CSS-Tricks that is very generic and doesn’t need any particular special styling at all. Really the only difference between a generic page and a blog post is that there are no comments and no date (both rather irrelevant for this […]

#122: Building the Videos Archive, Part 1

The videos archive page is the part of the site where people can browse all the free videos available to watch. It’s for browsing, must like the homepage for the snippets or the homepage for the demos. These pages are their own template, which we can very quickly and easily whip up into shape like […]

#123: Building the Videos Archive, Part 2 (Navigation)

We just finished an exciting part of this redesign where we got to throw away a bunch of gross markup in the video archives page and replace it with new, smart, clean, auto generated markup. But we have more work to do on these archives pages. Because the archives are going to be auto-generated into […]

#124: Building the Demos Archive

In this screencast we’re going to work on the “Demos” area of CSS-Tricks. It’s a rather popular area of the site, despite the fact that I don’t put as much time into it as I should. The point of it is a place on the site with a load of downloadable and viewable demos all […]

#125: Photoshopping the Single Video Page

In this screencast we dig into designing another very important page. This is one of those pages I’ve been excited about designing since the beginning, because it’s a page that was particularly under-served by the last design. In this new design, we’ll approach it from scratch and design something that suites the content better. The […]

#126: Building the Single Video Page, Part 1

In the screencast we dig into the HTML and CSS and WordPress template that is the single video page. We’ve already designed how we want this to look in our Photoshop document, so we just need to bring it to life in code. First we bring the custom videos header into the template, that we […]

#127: Building the Single Video Page, Part 2

In this screencast we’ll finish up code-wranglin’ the template for single videos. We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and some is specific to single video pages. For now, it will get loaded on all […]

#128: Styling the Deals Page

In this screencast we’ll dig into the Deals section. The Deals section is essentially a “wall of ads”. It’s an area of the site that people would have to navigate to themselves, so I’m not worried about jamming ads down peoples thoughts. Also, each ad has a discount on it and is product that I […]

#129: Photoshopping More Homepage Modules

In this screencast we dig into adding some more modules to the homepage of the site. Fairly important stuff! At the moment, we only have a handful of them over there. We have a few hot links, a couple of ads, and a poll. Below that, a bunch of gray space. Not that space is […]

#130: Styling the Article Archives Page

The article archives page on CSS-Tricks is rather important. Rather than having paginated blog posts like most blogs have, I simply link to the archives. I figure it’ll save people the trouble of click-and-scrollbrowse, click-and-scrollbrowse, click-and-scrollbrowse… Instead, they go right to a page where they can scrollbrowse a large number of articles in a more […]

#131: Building More Homepage Modules

In this screencast we set about building out a few more of the modules we plan to have on the homepage. Just a little tweak and we’re showing three hot links instead of two. Copy and paste a bit of module code and tweak a query and now we have a module showing the latest […]

#132: Intro to The Forums

In this screencast we dive into an all new section of the site: The Forums! This is a huge area of the site. Perhaps not so much in traffic (I’ve always wished it could grow, traffic wise), but certainly in user activity and UI complexity. The forums use Vanilla Forums to power them. They are […]

#133: Forums Wrangling, Part 1

In this screencast we’ll actually dig into the code of the Forums area. The “main” file of the forums, if there is such a thing, is default.master.php. It’s a bit like index.php in a WordPress theme, except literally every view in Vanilla uses it whereas some views in WordPress don’t use index.php. To make things […]

#134: Forums Wrangling, Part 2

In this screencast we continue to dig into the code of Vanilla Forums and get our theme going. We make the decision right away to do the wild-n-crazy move of nuking the entire set of CSS that comes from Vanilla and has been tinkered with by me over the years to make it work with […]

#135: Forums Wrangling, Part 3, Login

We keep digging into theming the Forums area of the site. We’ve done good so far, but the deeper we dig the more difficult things are going to get. Partially just because I don’t have a ton of experience with Vanilla Forums and partially because it’s just kinda weird! We’re trying to create and customize […]

#136: Understanding Vanilla Forums Theme Overrides

We left off trying to decide if we can win the battle for a static login form or not. We probably could, but in more playing around with the forums, we see that it’s not just login that by default comes up in a modal. The modal design pattern is used all over the place […]

#137: Forums Wrangling, Part 4, Getting Control

We jump right into styling the main content area of the homepage of The Forums. Arguably the most important part of the forums, since it’s the first thing people see when arriving to The Forums. This gives us the opportunity to override the core file that controls this as we learned about in the last […]

#138: Forums Homepage Styling

It’s been a bit of a long road wrestling control over all the parts we need, with a couple of struggles and surprises along the way. We can finally get started designing those modules on the homepage according to the wireframes we have. A little margin, a little padding, a little font-size adjusting, you know […]

#139: Individual Forums Thread Styling

You might argue that the homepage of the Forums is the most important page, but there are equally good arguments for individual thread views being the most important. Data suggests people land on these “deep links” in higher numbers than the homepage itself, even though the homepage is the most visited individual page. Right away […]

#140: Forums Signup Styling

We’re still neck deep in the Forums area. In this screencast we look at the signup page. Another rather important page as we want the experience of joining the forums to be and easy and welcoming as possible. We’re a little nervous at the beginning, thinking it’s going to be a crazy struggle to figure […]

#141: Restrict Content Pro Setup and Settings

In this screencast we take a little break from battling Vanilla Forums styling to work on setting up Restrict Content Pro (RCP), our WordPress plugin for managing subscribers to The Lodge, the private access area (that you are literally inside of right now!). The first step is creating the membership “levels”. We decide on an […]

#142: Forums Modules Styling

Along the right side of the forums there are a series of modules. “Modules” visually, “Modules” literally in code, and “Modules” in that the content they contain is a related group, separate/different from the content in other modules. The first one we look at is the Categories module. Vanilla Forums literally puts these in a […]

#143: Forums New Thread Styling and Functionality Discussion

Don’t be mad, but I had to jump ahead a little bit because there was some grueling long boring work of overriding different views by putting the right files in the right places in our Vanilla forums themes. We’ve gone over this a few times so it was nothing new. This time, we start the […]

#144: Forums Pagination Styling and Wrapup

We’re trying to wrap up the styling of the forums here. One of the major navigation mechanisms on the forums is the pagination. At the bottom of the page, you can move on to the next page or jump to a more distant page. It also serves to show the user how active and deep […]

#145: Intro to The Lodge (Private Access Area)

We’ve done a little prep for this new “Private Access Area” on CSS-Tricks. We’ve looked at WordPress plugins to help us, we’ve even decided on one and set it up. But now we need to get into actually building the front end. We’re going to call it “The Lodge”. Funnily enough, as a viewer you […]

#146: Custom Header for The Lodge

In the last screencast we snagged that photo from iStockPhoto of the snowy cabin and forest. We dropped it in the background, behind the main content area and sidebar of our Photoshop document and it fit nicely up there, in kind of the style of the headers of the other areas of the site. Between […]

#147: Restricting Logic with Restrict Content Pro


#148: Styling the Signup Button for The Lodge

In the last video we figured out how to serve different content within our templates based on the users’s login and subscription status. We use that ability in this screencast to work on the “Sales Page” – that is, the page we’ve put at /lodge/ with a custom template. When a user is logged in, […]

#149: Building a Login Form for The Lodge

One of the reasons WordPress is awesome is that it comes with its own fully functioning user authentication system. Writing that from scratch these days would be pretty dumb if you don’t plan to bring a heaping pile of innovation to the process. Restrict Content Pro, our membership plugin, of course doesn’t re-invent the wheel. […]

#150: Protecting Video Content with Expiring S3 Links

In this screencast we look into how we can host files on Amazon S3 (Simple Storage Service) in such a way that we can link to an use those assets, but not make them entirely public. Only make them accessible for logged in, subscription having users in The Lodge. At the time I recorded this […]

#151: Building the Lodge Module (and a Quick Speed Report)

We make a module for the general sidebar of the site that is just for the The Lodge. If you’re logged in, it will welcome you and provide relevant links regarding getting to the content and about your subscription. If you are logged out, it’s a bit of a “Sales” bit as well as log […]

#152: Styling the WordPress (Lodge) Login Page

Our “widget” for The Lodge in the sidebar of the site (shows on most pages, including homepage) has two states. One for when a user is logged out and one when a user is logged in. The logged out state has a login form right on it so current members have an easy way to […]

#153: Styling the Lodge Signup Form

The signup page for The Lodge is very important for obvious reasons: this is the page that collects the money and grants the access to the membership area. It needs to look good and work better. Text is a part of that. We use the word “member” consistently. Become a member! The Lodge is members-only… […]

#154: Styling the Lodge Archives and Single Lodge Video Page

The homepage for The Lodge when you are logged in (i.e. /lodge/) will be kind of a “portal” page. This series, which we’ll call “The Big v10 Redsign Project”, will eventually be just one of the projects shown on this page. Unfortunately at the time, that means there is this seemingly weird intermediary page, but […]

#155: Going Through the Pre-Launch Checklist

We are JUST ABOUT to launch this thing! It’s time to look over the last few little issues that need shoring up before we can launch. Bear in mind, the site is no where near perfect. But it’s close enough to launch. We can continue to fix little things and make things better after launch. […]

#156: Launching the Site, Part 1

This is the big moment! We have a list of things we know that we need to do and we’re just going to start doing them and get this site live. Perhaps the most noticeable change (last second thing before going live) was finally losing the little colored squares in the upper left of modules […]

#157: Immediate Post Launch Followup

I shot the video just maybe 10 minutes after launching the site. Comments are starting to roll in and this is me kind of reacting to some of that. Like anything of this nature, there are reactions both positive and negative. “I hate it!!” and “I like it!!” are common. Of course “I like it!!” […]

#158: A Month Later: Final Wrapup

About a month after the launch we talk about how the v10 launch has gone. We look through the document we set up at the very beginning of this process where we wrote down all the goals for the redesign. Addressing the content better – Yep! Areas like the gallery and the individual video pages […]

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed