News

From PSD to CSS with Brackets

Brackets, the open source code editor, has a new feature for turning design into CSS

BPSDCSSMain

Brackets, the open source code editor, has a new feature for turning design into CSS

Brackets01

Get the code to help complete this tutorial

Brackets is very lightweight and has an inline code editor which means that you can edit the CSS in a HTML document from a separate document without leaving HTML.

It supports CSS preprocessors and a live preview for viewing changes in Chrome. Brackets lets you open a PSD inside, gives you autocomplete hints and lets you extract images without going to Photoshop!

Get started

Open Brackets v1 available from http://brackets.io and go to File>Open Folder, choosing the start folder from the project folder. Now go to View>Show Extract for Brackets Preview. A window will open in the bottom of the interface, drag and drop the PSD from the project folder onto it.

Create the first rule

You will need to sign into your Creative Cloud account to add the PSD, once this is done, click on design.psd in Brackets and you will have access to the PSD and layers. Now put your cursor on the opening header tag and press Cmd or Ctrl+E to open the quick edit and click the new rule button.

Extract the CSS

Click on the header in the PSD and as you type the word ‘height’ in the CSS, you’ll get an autocomplete from the height of the graphic of 100 pixels. Do the same for the background colour and use autocomplete again. Click on Shape 1 in the layers and type ‘border-bottom:’, the autocomplete will give the colour.

Finish the header CSS

Now add the remaining CSS code shown, the width will autocomplete but the position and z index are our own properties. Close the quick edit and click on the city text in the PSD and Shift-click the city image. Place your cursor between the div tags with the id of ‘logo’.

001     position: absolute;
002        width: 960px;
003        z-index: 100; 

Extract the image

Start typing an image tag, when you come to the source you will see a popup with three options. The first is for a merged image from the two layers, click on this and rename it ‘logo.png’ then press Enter (this extracts the image) and close the tag. You will now have an images folder with the image, logo.png, inside which has been created automatically.

Logo CSS

Put your cursor on the id ‘logo’ and press Cmd or Ctrl+E. Click the new rule button and click on the light blue logo in the PSD image. The background colour will be available via the code hint from the PSD file. The other CSS values are shown in the code below, we are going to add a little padding to the div tag in order to hold the image in the right place.

001    #logo {
002        float: left;
003        width: 105px;    
004        height: 90px;
005        padding: 10px 0 0 45px;
006        background-color: #06a7e1;
007        }

Position the menu

Put your cursor on the id for the ‘menu’ and press Cmd or Ctrl+E, then click the new rule button and add the code as shown. This positions the menu to the right of the header ready for formatting up in the PSD document. Hopefully you are seeing that the PSD helps the front-end developer to write CSS without trying to take over their work.

001    #menu {
002    float: right;
003    margin: 40px 50px 0 0;
004    } 

        

Arrange the unordered list

In the panel on the left-hand side of Brackets click on the style.css file to edit it directly. Add the code as shown, which will help us to get the unordered list into an inline row like a menu, ready for the actual formatting of the link and hover effects that are commonly found in the menus.

001    ul {
002        list-style-type: none;
003        margin: 0;
004        padding: 0;
005        text-align: center;
006    }
007    ul li{
008        display: inline;
009    } 

Link styling

In the CSS create the link CSS as shown. By clicking on the text in the menu you can get the CSS to autocomplete the font size and colour from the PSD. Finish this by turning off the text decoration and we will add a transition effect ready for the hover of the link.

001    ul li a {
002        color: #d3f4ff;
003        font-size: 18px;
004        text-decoration: none;
006        transition: background-color 0.5s ease;
007        }
008

Hover state

Now switch over to the style.css file and add the code at the bottom as the hover state for the button. This will simply put the light blue background in there when we roll over. We’ve got a half second transition and this transition will simply fade in and out as the user rolls over and out again.

001    ul li a:hover{
002        background-color: #06a7e1;
003        }

Calling the hero

Move back to the index.html page and place your cursor inside the ‘hero’ id. Press Cmd or Ctrl+E, then click the new rule button. Now click on the large image of the city in the PSD file. The autocomplete will help you fill in the width and height properties. Start typing background and you will be able to extract the image, name it ‘hero.jpg’ and press Enter.

Text strap

Now place your cursor inside the id for ‘strap’ and create a new rule as previously. Fill out the details as shown. If you click on the text in the PSD that is over the image you will see that this is at 375px down from the top, but we’ve adjusted this back slightly to 350px.

001    #strap {
002          position: absolute;
003        top: 350px;
004        width: 960px;
005        text-align: center;
006      color: #fff;
007        }

Heading 2 CSS

Click on the h2 tag and we will create a new rule as previous. Click on the text in the PSD within Brackets. You will get help autocompleting as you type in the font size. Also add ‘line-height: 24px’ to get the line height similar to that of the PSD design comp.

The alternative heading

Close the quick edit part of the window and put your cursor in the class of ‘alt’ on the first h2 tag. In the PSD, click on the first heading over the image. Create a new rule for this in the quick edit window and start typing the font weight. The autocomplete should help you get the right font weight of 300 for this. Save your documents and test in the browser.

The medium is the message

Close the quick edit here and move your cursor onto the id for ‘message’ and create a new rule for this. You will be able to autocomplete the background colour if you click on the background of the message in the PSD. Change the display to block and add ‘padding: 60px 0;’ here as well.

H3 message text

Move your cursor to the h3 tag inside the message section of the page. Create a new rule for the h3 tag and then click on the text in this section of the PSD. You will be able to get autocomplete help with the colour and font size, so add the rest of the details as shown in the code. Save your file now and then proceed to viewing it in the browser.

001    h3 {
002    color: #fed99e;
003    font-size: 34px;
004    text-align: center;
005    margin:0; padding: 0;
006    }

Branding image

In the PSD preview mode, click on the blue circle and Shift-click on the crown image so that both layers are now selected. Place your cursor before the h4 tag for the word ‘branding’ and then hit the Return key. On the new line start typing an image tag and when you get to the source, select the first image that Brackets gives you the option for.

Generate the image

Name the new image ‘branding.png’ and then press Enter to generate the image. Finish off the image tag and then create a new line above the h4 tag for the word ‘strategy’. In the PSD preview click on the second blue circle and Shift-click on the tick image so both will now be selected.

Strategy image

Start adding the image tag and name this new extracted image ‘strategy.png’ as you get to the source and Brackets extracts the image. Then do the same for the Management section, naming this ‘mgmt.png’. This image extraction makes it easy for the developer to decide what will be an image and what will be CSS.

Column style

Click on the column class and create a new CSS rule. You will be able to get the width of the column from the image still selected in the PSD. Float this to the left and add ‘padding: 60px 30px;’ so that there is a larger space at the top and bottom to the left and right.

Final h4 style

Click on the word ‘Branding’ in the PSD and then place your cursor on the h4 tag and add a new rule for this. You can extract the colour, font size and font weight with Brackets autocompleting this for you. Also add ‘text-align: center;’ and save all your documents, testing the final design in the browser.

×