Hi all! We’re continuing with the breakdown series.

This time we’ll be doing the 2012 Build Conference design event website. We’ll build this site completely with Breezi.

This is how the original site looks like. Click on the link above to fully see it.

We’ll first take a look at what we’re going to use, layout and apps. Then we’ll start working on it, first blocks, then apps, later on content, and finally, styling and additional setup.

Block & Apps Analysis

These are the Blocks we’ll be using in Breezi to build up this replication site.

1. Header
   1. 4 Columns: Image / Text / Text / Text
2. Intro
   1. 1 Column: Text, Button
3. Body 1(Speakers & bottom divider)
   1. 4 Columns: Image, Text / Image, Text / Image, Text / Image, Text
   2. 3 Columns: Image, Text / Image, Text / Image, Text
   3. 1 Column: empty Text app, just for creating space
4. Body 2(Workshops / bottom divider)
   1. 1 Column: Text
   2. 4 Columns: Image, Text / Image, Text / Image, Text
5. Body 3(Festival / bottom divider)
   1. 1 Column: Text
   2. 3 Column: Image, Text / Image, Text / Image, Text
6. Body 4 (Fringe / bottom divider)
   1. 1 Column: Text
   2. 4 Column: Image, Text / Image, Text / Image, Text / Image, Text
7. Body 5(About / bottom divider)
   1. 2 Columns: Text / Text
8. Body 6(Sponsors)
   1. 1 Column: Text
   2. 6 Columns: all Images
9. Footer(Social & Copyright)
   1. 4 Columns: all Text
   2. 1 Column: Text

Laying the Structure

As seen on the previous analysis, we will be using 9 Blocks, most of which will have 2 Sections. Each of them will have a varying number of columns.

This diagram illustrates the layout setup.

So if you’re following along, we recommend using the “blank” starting point as we are. Then you will only have to add 5 additional Blocks.

Then a Section within each Block that requires it.

Afterwards, Columns within each Section as stated on the analysis. Some Columns will need merging, but most will need splitting.

One thing to note for the second Section of body 6, which features 6 columns, is that we’ll need to remove the left/right spacing before splitting them all.

Click on the “Styles” button on the shelf, to open up the Bulk Style Editor. There on the top dropdown, leave selected only “Body 6″.

Then move the slider of “Left/Right Spacing” all the way to the left, so it has no spacing.

Otherwise we won’t be able to create all of the Columns, since a minimum of 160 (Update! Now it’s 100) pixels of width is required for each one. The total width of our layout (Sections) is 960, divided between 6, equals exactly 160 px. But Columns have some spacing by default, so we need to remove it before creating all 6.

Installing Apps

To install an app drag and drop its respective “Install New” button from the App Store.

And refer to the guide above to see which apps go where.

Once we install the apps, they will look empty. Adding the actual content is the next step.

Entering Content

Now that apps are there, we need to add content. For text its really easy, just copy the source text and double click on the text apps to edit.

Same with images, double click them to replace them.

Here’s a screenshot of what it looks once apps are added. Note that we haven’t styled them, so they still have to get the right colors, alignments, spacing etc.

Styling

For styling, we have a lot of things to do. Changing colors, adding background images, setting the right alignment, fonts, sizes, etc.

Blocks Styling

We’ll begin with Blocks that need a background change.

First, the top one: header.

There we will change the background color to #191818.

The text won’t be visible, because of the dark background. But don’t worry, we’ll get to it. We’ll also add some 10 pixels of bottom spacing.

We’ll also change the background color for the next two Blocks (Intro and Body 1), to #e41f3a.

Then, we’ll also edit the background image for Body 1. You can have both, a color and an image as background. The color will be visible where the image ends (if its not set to repeat both ways). We’ll also move the vertical position slider all the way to the right (so the image moves to the bottom of the Block) and add some bottom spacing.

For the next 5 Blocks (body 2, 3, 4, 5 and 6), we’ll do something similar. We’ll leave white as background, but add a divider image all the way to the bottom of the Block and make it repeat horizontally. Also, don’t forget to add 50 pixels to the bottom and top spacing.

Instead of going over each Block Dot and make all these changes, we can make a Dot Profile and reuse it. When you are editing a Style Dot, you’ll notice a link below labeled “Save Styles as Dot Profile”. You can click there to save all the modifications you’ve made to make it available for import in other Dots.

Then type a name and save. Think of a relevant name so it will make sense later on. For this particular profile, you could name it something among the lines of “Block Background with Gray Divider”.

In order to use them, go to the Dot where you want to import the styling, and click on the “Load Dot Profile” link below.

Then select the desired profile and click “Load”.

This way we’ll speed up the time we invert in the styling of these Blocks.

For the last Block, the footer, we will use a custom image that has simulates the border that the copyright information has right above it. We could use the top (horizontal) border setting of the Section Style Dot, but it doesn’t span the whole width of the page.

We’ll also leave 10 px for the top spacing and 25 for the bottom. The horizontal slider of the custom image panel should be all the way to the left.

Text Style

Text will be easier to bulk-edit if its marked correctly (headings, links, normal, etc.). For that we’ll use the Bulk Style Editor (BSE), on the Text tab.

We’ll keep to the current Block being edited.

Once we’ve selected the relevant Block (or Blocks), we’ll click on the Text tab on the left.

There we’ll style normal text white, leave Arial font selected, and make it size 13 px.

For links, we’ll change the (normal state) color to #909090 and rollover color to #c42f37. Currently, its not possible to change the font size on the Bulk Style Editor specifically for links, so we’ll have to do that one manually, one by one.

Next, the intro Block.

The “Get Ready to Build” title, seems to have a custom serif font, similar to Georgia. We found a similar looking one, available in Breezi, called “Sanchez”. We’ll use that in white color, centered, size 48 and we’ll also update its line height to around 50.

The embedded image below the title will be centered too, as well as the text below the image. We’ll also need to make some spacing above and below the image. This can be done in a different ways, we’ll use the fastest method: adding new lines by hitting enter.

The color for the text will be #FF9FAC, 13 pixels the date and place line, and 21 the text below it. Remember to keep updating the line height, as this is not done automatically.

The button below will require some styling and configuration too.

• Background color: black
• Rollover color: #444444
• Corner radius: 10px
• Left/Right Spacing: 23px
• Top Spacing: 12px
• Bottom Spacing: 12px
• Width: 10%
• Alignment: center
• On settings: don’t display slogan text

Since the text above the button is not repeated in other places we didn’t use the BSE, but we can use it for the next Section (that has the speakers’ picture and name).

We’ll start with the text. First, on the Text tab, we’ll change the size to 18, and font “Sanchez”.

Even though in this Block all text must be links, this general tab affects the styling for them too. Because of the default red color applied to links, we won’t be able to immediately see the changes.

We’ll change to links and update the colors for “normal” state to #FF9FAC, and rollover white. Then, we’ll have to manually center all these links, since alignment is not currently available on the BSE.

Now the images. If we go to the Bulk Style Editor again, while hovering over some of the tabs, we get a preview of what we’re editing. If we go over the Apps tab, we’ll notice the default (25 px) spacing above and below apps.

We’ll change the top and bottom spacing to 8 pixels each.

Then, we should have a last Section below the speakers one. We’ll use it just to add some spacing. But for a Section to have a Style Dot, an App must be installed inside. So we’ll just use a Text app and remove all text (so its empty). We’re using this trick just to get more spacing below, so the bottom image is aligned correctly.

Once the text is deleted, we’ll select the Section Dot and add

This way the background image of the Block will be sent further down as in the original site.

The next Block has a similar Text app on the top, which in styling, is identical to the next 2. So the top text app has the same style settings in body 2, body 3, and body 4. For this, we can style the first, and then duplicate and update the content.

We’ll start with the heading. We’ll make it a heading 1 (h1), and color #2A2A2A, centered, size 48 (line height 50) and font Sanchez.

A line (enter) will be entered before and after the small “nuts” image.

Then, the text below will be h5, size 21, line height 30, and color #909090.

We changed the headings so it won’t interfere when we add styling to the next Text apps below the images. But we’ll get to that after styling the images.

A slightly larger spacing will remain between this text and the images on the next Section. We’ll select this Text app’s Dot to remove the bottom spacing from it (make it 0px).

We can alternatively use the BSE, since the other apps on this Block, and the next 2 (body 2, 3 and 4) will need to be stripped of their bottom spacing too. Just remember to target only the right Blocks on the drop down.

The images below are already the right size for the space available. The ones of the original site are a bit larger (on max-width), but the width of our page is not as wide as 1165 pixels, the site’s layout width.

So we’ll continue to the text below. We can use the BSE for these Text apps, as long as they have proper heading marking. Take a look at the next image to get a better idea of the headings we’ll be using.

This kind of styling will be also used on body 4, so we’ll go on and select body 2 and 4 on the BSE before applying changes to the text. Look for the check box below the Bulk Style Editor labeled “Marge Selected Block Controls” and make sure its checked.

The changes are, for h4:

• Font remains Arial
• Size: 11px
• Color: #999999
• Treatment: none (not bold)
• Line height: 18px
• Top margin: 0px
• Bottom margin: 6px

For the h3:

• Font: Sanchez
• Font size: 18px
• Color: #333333
• Treatment: none (not bold)
• Line height: 20px
• Top margin: 0px
• Bottom margin: 18px

For normal text:

• Font remains Arial
• Size: 13px
• Color: #808080
• Line height: 21px

There’s one more manual thing we’ll have to do on each Text app: center-align the titles.

And lastly for this Section: we’ll add 50 pixels to the bottom spacing.

Next Block: Festival (body 3). We’ll duplicate the first Text app of the previous Block. As mentioned before, we’ll do this to retain the styling so we only have to copy and paste text.

Then we’ll move it to this Block (body 3) and edit its content.

We’ll perform similar actions to what we have already done. If it’s not already 0, we’ll remove the bottom spacing of all Apps (just Block body 3). We’ll edit the h3 as follows:

• Font: Sanchez
• Font size: 22px
• Color: #333333
• Treatment: none (no bolding)
• Line height: 24px
• Bottom margin: 20px

Manually, we’ll center the these headings on each app.

Normal text will be the same as in the previous Block. We’ll paste them here again:

• Font remains Arial
• Size: 13px
• Color: #808080
• Line height: 21px

We’ll also add 50 pixels to the bottom spacing of the last Section, as in the previous Block.

For the next Block (Fringe, body 4) most things should be already set. We’ll only need to duplicate the first Text app from any of the previous two Blocks. That’s the one which has the title, the decorative image and the tag line.

If you’re following along, and marked correctly the text below the images, they should already be styled. This is because they should pick up the styling from the steps of the body 2 Block editing (refer above).

The only manual thing left to do would be to center-align the titles.

And, as in the previous Blocks, we’ll add 50 pixels to the last Section’s bottom spacing.

The next Block uses the same styling as the last Section’s Text apps, so we can easily use the BSE. Remember the text should be headings 3 and 4, and normal text for it to be applied.

We’ll be left only with the centering of the headings.

The next Block (Sponsors), needs only a title edit. It should have the same styling as the h4 we did before:

• Font remains Arial
• Size: 11px
• Color: #999999
• Treatment: none (not bold)
• Line height: 18px
• Top margin: 0px
• Alignment: center

The app itself will be stripped of its top spacing, and enter 10 pixels for the bottom one.

And that’s it for this Block.

The only one left is the Footer. Here we’ll enter similar styling to the h4 and h3 used before, with the only difference being the color; #666666 for the h4, and #BBBBBB for the h3 (normal state) and white (rollover state). The image should also be center-aligned.

For the normal text (the last line) we’ll use font size 10, and color #4A4A4A, and center alignment. For the links, the same color will be used as normal state, and #777777 for the rollover.

We’re almost done!

Additional Settings

We’ll only need to edit the page title and the favicon.

The first one is made through the shelf, on the Pages menu, and clicking on “Page Settings”.

There we can edit the page title, and add some keywords and description of the page.

As for the favicon, we’ll go to the More menu, and click on “Favicon & Breezi Badge”.

That’s All Folks

This is how the finished product in Breezi will look like:

Liked this breakdown? Let us know if you have any questions!