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.
↧