In the previous tutorial we covered how to prepare a design in Photoshop, ready for conversion to pure CSS3 and Base64 code. In this tutorial we'll be handling the actual code generation, with the help of Photoshop plugins CSSHat and PNGHat made by Source, as well as FontAwesome and the CSS preprocessor LESS.
Let's dive straight in!
Create Your File and Folder Structure
To begin with you'll need to create a new folder on your computer to house your static website. In this case I'm naming my folder codedup.
Inside that folder create a new file named index.html and add to it the following code:
Here, we're setting up the basic HTML shell for the site and linking in Roboto, the Google Font we used in our PSD, as well as what will be our CSS stylesheet.
Next, create two subfolders within your codedup folder, one named css and the other named LESS. Inside the LESS folder create a file named style.less. All the styles for your site will be written into this file, and subsequently compiled into css > style.css.
Note: Structure of your LESS file
As we go along your style.less file should have its code organized in this order:
Imports
Variables
Mixins
Styles
I recommend adding a comment at the top of each section in your style.less file to help you keep track of where different types of code should be placed.
If you prefer, you can create separate files (partials) to house each of these types of code, importing each of them into your main LESS file. However to keep things simple here we'll be using just the one file.
Setup Auto Compiling With Prepros
Prepros is an application which handles all kinds of front end tasks for web designers and developers. It will compile our LESS, auto-refresh the browser whenever changes are made to our files, even synchronise multiple devices if we want. Download and install Prepros, which you can get free from: http://alphapixels.com/prepros/
Run the application, then drag the codedup folder onto the main interface to add it as a new project.
Prepros will automatically detect the style.less file in your project folder and by default will have "Auto Compile" activated. Any time you save a change to style.less Prepros will detect it then compile into css > style.css.
You can also click style.less in the interface to see extra available settings, such as the option of compressing the CSS during compilation.
Incorporate LESSHat and Normalize.less
Now go ahead and grab the files for LESSHat, a mixin library that ties in beautifully with CSSHat, as well as Normalize.less, a version of "Normalize.css" written in LESS friendly syntax.
After downloading the two files and placing them in your project, go back to Prepros and you'll see it has automatically detected both of them. We'll be importing both of these into our main style.less and we don't want them compiling into individual CSS files, so click on each and uncheck "Auto Compile".
Now open up your style.less file in your preferred code editor and add these two lines to the top:
Save your file and Prepros will automatically compile it for you, after which you should see the following popup in the bottom right corner of your screen:
You should now also see the file style.css inside your project's css folder.
Incorporate FontAwesome
We're now going to incorporate FontAwesome into the project by adding the font files themselves as well as "FontAwesome.less", a prebuilt LESS library which makes it incredibly easy to place FontAwesome icons in your designs. All we have to do is import the file and then the FontAwesome classes become instantly accessible.
You'll see how this works in practice later in the tutorial when we add our "big down arrow" element.
Start by creating a subfolder named font-awesome inside your LESS folder. There are quite a few files in FontAwesome's library so we'll keep them in here to keep oursleves organized
Download FontAwesome as a zip from: https://github.com/FortAwesome/Font-Awesome
Extract the folder and copy all the files from within its less folder, then paste them into the font-awesome folder you just created in your project. Then copy the entire fonts folder from your unzipped FontAwesome download, and paste it as a subfolder into your project.
Your full project file and folder structure should now look like this:
Prepros will again detect new LESS files, so uncheck "Auto Compile" on any files that now appear in the interface.
Add the following line to your style.less file, below the lines you added previously:
Your project now has all the LESS imports and font files you need in place, and automatic compilation activated, so we're ready to start translating your PSD into code.
Incorporate Background Image as Base64
In the previous tutorial we chose the pattern named "Satin Weave" to tile across our background due to its small size and low number of colors. We're now going to use the PNGHat plugin to convert it into a string of Base64 code.
Open up the PSD in Photoshop. We know the dimensions of the pattern are 24px wide by 12px high, so go ahead and use your marquee to create a selection of that size anywhere on your design.
Now, ensuring the background layer that has the pattern applied to it is selected, open up your PNGHat window. All you have to do is click the "Base 64" option in the top row of the window, then click "Export Selected Layers".
You will see a dialogue appear asking for confirmation you want to "Crop image by selection?". Click Yes and you will see your Base64 string output in the bottom space of the PNGHat window. Click the Copy button.
Head back over to your style.less file and paste the code you just copied from PNGHat into your "Variables" section. Delete everything from the pasted in code except for url(data.......); and then add @satinweave: at the start of the line. You should end up with:
We're now ready to place our new, easy to use @satinweave variable into a style so it will appear in our design. While we're at it we'll also add a couple of basic rules for site wide box-sizing and link settings.
Add the following code to the "Styles" section of your styles.less file:
Save your file so that Prepros will compile your changes into your style.css file.
Go to Prepros, click the More Options button and choose Copy live preview URL, (which will most likely be http://localhost:8000), then paste it into your browser.
This will give you a preview of your static site which automatically reloads each time Prepros compiles your code.
You should now see your pure Base64 pattern tiling across the background of the page.
Adding CSS Elements
Generating CSS3 With CSSHat
It couldn't be simpler to have CSSHat output the CSS3 for each design element. Just select the layer in question with the CSSHat window open and it will automatically generate the code you need.
There are a few options you can choose from in the settings of the CSSHat window. In our case we want our code to be output as LESS, and we want all the little buttons at the bottom of the CSSHat window (comments, dimensions, prefixes, rule) to be deactivated. Your CSSHat window should look like this:
Note that you can have CSSHat generate height and width code for you in px values by clicking the fourth button (which looks like a little square with smaller squares on its corners). However I prefer to write my own, so I can more easily use rem / em / % values where I need them.
When the code for your selected layer has been generated just click the Copy button at the bottom of the window, ready for pasting into your style.less file.
The Element Addition Process
We'll now proceed to add the rest of your design elements via CSS.
Because CSSHat makes thing so easy we can use a pretty much stock standard process which is just repeated until your design is fully coded up.
For each element we'll begin by add the corresponding HTML to the index.html file.
After that, each new element will involve adding one or more LESS mixins, which we'll use to hold the CSS3 generated by CSSHat. It's helpful to keep your CSSHat generated code separate from the rest of your style code so you can easily update it if you change your design. You should add new mixins to the "Mixins" section of your style.less file, as described above.
Finally, you'll add the actual CSS styles that will be output to your stylesheet. These styles will incorporate your mixins as well as some extra code I'll provide to control layout, dimensions, and aspects Photoshop can't handle such as numerical font-weight and 'one side at a time' borders. Your styles should be added to the "Styles" section of your style.less file.
We'll be creating each design element in the same order as we did in the previous part of this tutorial to make it easy to refer back should you need to.
Add the Top Trim
Add HTML:
Add the following in between your opening and closing body tags.
CSSHat:
Select your PSD's "top trim" layer, and copy the CSSHat generated code:
New Mixin:
In your style.less file create a new mixin named TopTrim and paste in your CSSHat code like so:
New Style:
We'll now incorporate your new mixin in the "Styles" section of your style.less file. Add the following new style code:
In the above code we're pulling out our CSSHat generated styles via the TopTrim mixin, as well as setting the layout dimensions we need.
Result:
You should now see your "top trim" running across the top of your site.
Create the Menu Wrapper
Add HTML:
Add the following below the last HTML you added:
CSSHat to New Mixin:
Select your PSD's "menuwrap" layer, copy the CSSHat generated code, and paste it into a new mixin named MenuWrapBG:
New Style:
Add the following new style code:
Result:
You should now see:
The Menu Background
Add HTML:
Update your existing menu code to the following:
CSSHat to New Mixin:
Select your PSD's menubg layer and copy the CSSHat generated code into a new mixin named MainMenuBG:
New Style:
Add the following new style code:
Result:
You should now see:
Adding the Menu Items
Add HTML:
Update your existing menu code to the following:
CSSHat to New Menu Item Background Mixin:
In your PSD, select one of your menu item rectangles and copy the CSSHat generated code into a new mixin named MenuItemBG:
CSSHat to New Menu Item Text Mixin:
In your PSD, select the text of one of your menu items and copy the CSSHat generated code into a new mixin named MenuItemText:
Update Your Menu Style:
Update the existing ul.mainmenu style as follows.
We're using LESS rule nesting so all li children of ul.mainmenu will be affected.
You'll also recall in the previous tutorial we had to manually use the line tool to facilitate a color selection for our menu item borders, given Photoshop's inability to set each border side individually. In the above you'll see we incorporate these border styles using the color code #dddddd we selected during that stage.
We also added some transparent borders on the top and left sides of the menu items. The reason for this is our current item / hover effect will use borders on all four sides, so we need to ensure there is a matching width on menu items in their default and hover states.
And finally we've manually added the correct font-weight of 400 to the menu item text because Photoshop is only able to work with values like "normal" or "bold".
Result:
You should now see:
Create "Current" and Hover States
In this case we don't need any extra HTML as we already added a menu item with the class "current" applied to it in the last step.
CSSHat to New Current Menu Item Background Mixin:
In your PSD, select the rectangle of your "current" menu item and copy the CSSHat generated code into a new mixin named CurrentMenuItemBG:
CSSHat to New Current Menu Item Text Mixin:
Now select the text of your "current" menu item and copy the CSSHat generated code into a new mixin named CurrentMenuItemText:
Update Menu Style:
Update the existing ul.mainmenu style as follows.
And to allow the menu items to be pushed onto multiple lines if there are two many for the available width, add the following clearfix code below your existing menu class.
Result:
You should now see the "current" style applied both to the actual current menu item and the hover effect:
Add the Main Text
Add HTML:
Add the following code below your menu HTML:
CSSHat to New Mixin, Thin Text:
In your PSD, select either the first or third main text line (thin grey text) and copy the CSSHat generated code into a new mixin named ThinText:
CSSHat to New Mixin, Thick Text:
In your PSD, select either the second or fourth main text line (thick text) and copy the CSSHat generated code into a new mixin named ThickText:
New Styles:
Add the following new style code:
Result:
You should now see this below your menu:
Create the Info Panel Background
Add HTML:
Add the following code:
CSSHat to New Mixin:
In your PSD, select your info panel background rectangle and copy the CSSHat generated code into a new mixin named PanelBG:
New Style:
Add the following new style code:
Result:
You should now see your info panel background, currently still empty:
Panel Header Background and Text
Add HTML:
Update your info panel HTML to the following:
CSSHat to New Mixin, Panel Header Background:
In your PSD, select your panel header background layer and copy the CSSHat generated code into a new mixin named PanelHeadBG:
Add Panel Header Second Shadow:
We're now going to add a second shadow to the PanelHeadBG mixin we've already created. You'll recall from Part 1 of this tutorial that we had to create additional shadows on second layers due to Photoshop not being able to handle multiple drop shadows on one layer.
In your PSD, select your panel header second shadow layer and copy only the code between the parenthesis on the box-shadow line, which should be:
In the PanelHeadBG mixin you just created, add a comma before the closing parenthesis of the existing box-shadow line, then paste in the code you just took from CSSHat to give you:
CSSHat to New Mixin, Panel Header Text:
In your PSD, select your panel header text, and copy the CSSHat generated code into a new mixin named PanelHeadText:
New Style:
Add the following new style code:
Note that we added a font-weight of 400 manually given Photoshop can't process numerical font weight values.
Result:
You should now see:
Create the Panel Text
Add HTML:
Update your existing panel HTML code again, this time to the following:
CSSHat to New Mixin, Default Panel Text:
In your PSD, select the lighter weight text layer of the info panel and copy the CSSHat generated code into a new mixin named PanelText:
CSSHat to New Mixin, Larger Panel Text:
Now select the layer holding the thicker weight info panel text and copy the CSSHat generated code into a new mixin named UsingTheseText:
New Style:
Update the existing .panel style to:
This adds the PanelText mixin as well as a numerical font weight and some margin control for paragraphs in the info panel.
Also add the following new style code, below the .panel class:
This applies the larger and thicker font styling to the bottom line of text, as well as adding colored highlights.
Result:
You should now see:
Add the Big Down Arrow
Add HTML:
Add the following code below your info panel:
Because we incorporated FontAwesome.less into our project earlier, this HTML will automatically place our down arrow simply via application of the classes fa and fa-arrow-down to an i (icon) element.
At first it will appear in its default small, black state so all we need to do is style it as we would any other text element.
CSSHat to New Mixin:
In your PSD, select your big down arrow layer and copy the CSSHat generated code into a new mixin named DownArrow:
New Style:
Add the following new style code:
Result:
You should now see this below your info panel:
Starting the "Start" Button
Add HTML:
Add the following code below the big arrow html:
As with our down arrow, our use of the FontAwesome classes fa and fa-caret-right automatically place the icon we want to use, in this case a right pointing arrow.
CSSHat to New Mixin, Button Background:
In your PSD, select your start button rectangle layer and copy the CSSHat generated code into a new mixin named StartButtonBG:
Add Button Background Second Shadow:
Just as we did with the panel header, we'll now add a second shadow to the mixin we just created.
In your PSD, select your button second shadow layer and copy only the code between the parenthesis on the box-shadow line:
In the StartButtonBG mixin add a comma before the closing parenthesis of the existing box-shadow line, then paste in the code you just took from CSSHat to give you:
CSSHat to New Mixin, Button Text:
Select the text layer of your start button and copy the CSSHat generated code into a new mixin named StartButtonText:
New Style:
Add the following new style code:
The first .buttonrow class acts simply to center the button, while the second .start class applies both the button background and text styling.
Result:
You should now see:
Button Circle and Right Arrow
In this case we don't need any extra HTML as we're working with the button HTML added in the last step.
CSSHat to New Mixin, Arrow Circle:
In your PSD, select the small circle layer over your button and copy the CSSHat generated code into a new mixin named ArrowCircle:
CSSHat to New Mixin, Right Arrow:
Now select the small right-pointing white arrow layer and copy the CSSHat generated code into a new mixin named RightArrow:
New Style:
Add the following new style code:
Result:
You should now see:
Styling the Bottom Trim
Add HTML:
Add the following code below your start button HTML:
CSSHat to New Mixin:
In your PSD, select the layer that holds the two small concentric grey circles and copy the CSSHat generated code into a new mixin named CenteredCircle:
Tweak the Radial Gradient Code:
This is the one place I found the CSSHat output didn't quite match what I had in the PSD. Change the mixin's background-image line, replacing center center, 100px 100px with center, ellipse cover like so:
New Style:
Add the following new style code:
The first class .bottomtrim creates the two grey lines of our bottom trim, while the .centeredcircle class sizes and positions our concentric grey circles over the two lines.
Result:
You should now see this at the bottom of your design:
Wrapping Up
That's it! You should now have your completed static design in all its pure code glory, looking like this:
Extras
We've kept everything pretty simple for the purposes of this tutorial, but there's plenty more you can do with the code involved in this process if you prefer.
In some cases we've double up on styles by re-using font family declarations and colors, so you can define your font families and colors as variables and use those instead for easier updating later.
CSSHat also supports output in Stylus + Nib and Sass / SCSS + Compass, so if either of those are your preferred preprocessor you can try using those instead.