Learn enough CSS to mark up a PSD

22 Jun 2016

"How do I create CSS based on a PSD file?"

Being a jack of all trades, I constantly have to deal not only with implementing the back-end and front-end logic, but also with breathing life into existing design files.

The process almost Just Happens™ to me without any additional effort, but I've been asked a few times recently about how a CSS-averse developer can get started with that. This post is going to outline my approach to it.

Note that I won't be providing the actual CSS for every step or even the end result. The goal here is to understand the process on the higher level, which you can apply to many other cases. There will be some references to CSS and tips, though, of course!

If you want to have an overview of the post for your references, download the cheatsheet below. Keep on reading to see the actual steps.

The Case

Trying to come up with a case to tackle, I've picked Product Hunt as a solid example. Its structure is what you'll see on many other websites. Its aesthetics are clean and simple.

Take a look:

Imagine you are detail-blind

Like you've put on prescription glasses that don't match your vision. You see everything in the blur, and you can't tell any detail. Now look at the Product Hunt website.

You'll be seeing something like this:

This is the very bare bones of the app's layout. It's also a great starting point — you don't have to deal with text and images and links and stuff like that. Only pure, raw structure.

I find it useful to think in terms of "blocks" at this stage. And these blocks have other blocks, and so on. How many can you spot there?

In pink are the two top-level blocks: topbar and content area. These span full-width and usually contain other blocks.

Content area contains three column blocks, which in turn host several "cards".

This is where I fire up my trusty editor and start encoding this basic layout.

First, I write the HTML with divs that are structured like my higher-level view of the layout blocks. For example in this case:

<div class="TopBar"></div>

<div class="ContentArea">
  <div class="LeftMenu"></div>

  <div class="MainContent">
    <div class="DayCard"></div>

    <div class="DayCard"></div>

  <div class="RightMenu">
    <div class="MenuCard"></div>

    <div class="MenuCard"></div>

Then, I add the minimum set of CSS to make it look properly. And Flexbox will make our lives super-easy.

You probably know of Flexbox... but if you don't, here is everything you need to get started.

The gist is that we'll be setting display: flex on components whose children we'll need to layout horizontally. In this case, ContentArea.

.TopBar {
  height: 40px;
  background: #fff;

.ContentArea {
  display: flex;
  justify-content: center;
  background: #eee;
  padding: 40px 0;

.LeftMenu {
  background: #ddd;

.RightMenu {
  flex: 0 0 100px;

.MainContent {
  flex: 0 0 400px;
  margin: 0 20px;

.MenuCard {
  height: 130px;
  background: #fff;
  margin-bottom: 20px;

.MenuCard {
  height: 80px;

Which looks close enough:

Sharpening up

Now that you have the structure laid out, you can go ahead and start adding more nested blocks. The logo, the search bar, the left submenus, the pictures and text in the cards, etc...

Repeat this process until your detail level matches the full picture in front of you.

Now, apply some final touches — the borders, the precise colors and sizing. You get the idea.

It does sound very simple, but you know why? Because it is.

Tooling tips

HTML and CSS files with manual reloading can you get you so far.

Live reloading will make your experience swifter. By the time you save your changes into a file and switch to your browser, it's all there already.

A stylesheet processor like SASS can also help quite a bit when it comes to nesting rules, manipulating color, or reusing some values.

Finally, at least for me, something like React makes this process less tedious, as it allows to encapsulate each visual "block" within its own component.

Action challange: code something into CSS today

Come up with a small project idea. It could be literally anything. If you are not the idea person, well, I have a post about generating ideas just for you.

Start small and do it.

Think your friends would dig this article, too?

If you need a mobile app built for your business or your idea, there's a chance I could help you with that.
Leave your email here and I will get back to you shortly.