Quantcast
Channel: professional website design » CSS3
Viewing all articles
Browse latest Browse all 198

How to Code a Photoshop Layout With CSSHat, LESSHat and PNGHat

$
0
0
What You'll Be Creating 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: Photoshop to Pure Code with CSSHat and PNGHat 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.

Viewing all articles
Browse latest Browse all 198

Trending Articles