INTRODUCTION

Welcome to the Blocs documentation. This document is a work in progress and will be continuously updated. It covers all of the basic features of Blocs.

What is Blocs

Blocs is a modern web design tool focused on simplicity. The goal of Blocs is to create beautiful looking, well coded websites without the need to write code in order to create them.

What Blocs is Not

Blocs is not a Content Management System or FTP client. It does not handle any server side technologies.

PROJECTS

When you create a new project in Blocs you will be presented with a blank Blocs document. Blocs documents are split into 3 layout zones, the nav bar, the body and the footer. The nav bar and footer zones are sticky, this means any content placed in these zones will be included in every page of your website. The body zone is unique to each page, this is the zone you use in order to add specific page content.

Blocs let's you toggle the inclusion of the nav and footer sticky areas per page, the option to toggle sticky area visability is located under the page menu in the sidebar options bar.

BLOCS

There are two types of objects we use in Blocs to create web pages, Blocs and Brics. Blocs act as the main containers that we place Brics into. We can select the layout of a Bloc, set it's padding height, background colour, background image and the type of horizontal dividers it has.

Adding Blocs

To add a Bloc to a new layout simply left click on any of the 3 layout zones (Nav bar, Body, Footer), doing this will open the Bloc bar. From the Bloc bar you can now select to add an empty layout Bloc or a pre-made Bloc by left clicking on one of the available options. After a Bloc is added you can continue to change the placed Bloc by left clicking on other Bloc options from the Bloc bar, alternativily instead of replacing the current placed bloc it's also possible to add multiple blocs by holding down when you click on a bloc option tile. Once you are happy with your selection move the mouse cursor out of the Bloc bar, this will cause the bar to disappear and also set the newly added Bloc in place.

It is also possible to add Blocs by hovering the mouse over the horizontal edge of any set Bloc (top / bottom), doing this will display a thin rectangle that stretches the full width of the Bloc, this is the add area. If you click this area the Bloc bar will now appear above or below the horizontal edge of the targeted Bloc(s).

Selecting Blocs

To select a set Bloc, simply Left Click on any area of the Bloc that does not contain a Bric when in design mode. Once a Bloc is selected a small blue marker will be displayed in the top right corner of the Bloc, this indicates the Bloc is now selected. When you have a Bloc selected, it's also possible to quickly select the Bloc above using the keyboard shortcut ⌘+↑ or the Bloc below using ⌘+↓.

Moving Blocs

You can move any selected Bloc up the page using the keyboard shortcut ⌘+⌥+↑ and down the page using ⌘+⌥+↓.

Duplicating Blocs

To duplicate any Bloc, first select it and then use the keyboard shortcut ⌘+D.

Deleting Blocs

There are many ways to delete a set Bloc from a page, the most efficient way is to first select the Bloc and then use the keyboard shortcut ⌘+Backspace. Another option is to click the little blue marker that contains an symbol in the right corner of the selected Bloc.

BRICS

Brics are individual user interface elements that we use in order to make up our web page design. Images, buttons, icons, headers and many others are all classed as Brics in the Blocs application.

Selecting Brics

To select a Bric, simply Left Click the Bric when in design mode. Once a Bric is selected a small blue marker will be displayed around the Bric, this indicates the Bric is now selected. When you have a Bric selected, it's also possible to quickly select the Bric above using the keyboard shortcut ⌘+↑, the Bric below using ⌘+↓, the Bric to the left using ⌘+← and the Bric to the right using ⌘+→.

Moving Brics

You can move any selected Bric up the layout stack using the keyboard shortcut ⌘+⌥+↑ and down the stack using ⌘+⌥+↓.

You can also move Brics across into neighbouring stacks using the keyboard shortcut ⌘+⌥+← or ⌘+⌥+→.

Alternatively you can also drag and drop any Bric from one page location to another. When you are dragging a Bric a little drop marker will appear in the location that the element will be placed, when you release the mouse button the Bric will be moved.

Scale Nudging

When a Bric is selected it's possible to quickly nudge it's scale up using the keyboard shortcut ⌥+↑ and down using the keyboard shortcut ⌥+↓. This is useful when formatting text.

Align Nudging

When a Bric is selected it's possible to quickly nudge the alignment of a Bric left using the keyboard shortcut ⌥+← and right using the keyboard shortcut ⌥+→. This is useful when formatting text or positioning Brics such as buttons.

Duplicating Brics

To duplicate any Bric, first select it and then use the keyboard shortcut ⌘+D.

Deleting Brics

There are many ways to delete a Bric from a page, the most efficient way is to first select the Bric and then click the little blue marker that contains an X symbol in the right corner of the selected Bric. Another option is to use the keyboard shortcut ⌘+Backspace.

DROP MODE

Drop mode is a work mode that can be switched on and off using the right mouse button, when the cursor is over the page canvas or by pressing the D key. This work mode allows you to rapidly add content to your pages.

Enter Drop Mode

To enter drop mode simply Right Click anywhere on the page canvas or press the D key.

Placing Brics Onto Page

Once you enter drop mode you will see six small boxes appear at the bottom of the screen. The first five of these are interchangeable Bric storage spaces that can be used to store the Brics that you plan to use when building your web page. The active storage space is high-lighted blue.

If you move the mouse cursor above or below an already placed Bric on a page, you will see a thin blue line appear. This marker indicates the location that the Bric will be placed ie above or below said Bric, if the area does not yet contain a Bric, the entire area will become high-lighted when the mouse cursor is over it. When the blue line marker or fully high-lighted section is visible a Left Click will place a Bric onto the page.

Activating Other Bric Spaces

To activate another Bric storage space you can either left click on it or use the number keys 1 2 3 4 5 on your keyboard.

Bric Selection Menu

There are many different types of Brics available to use in your page designs, all of which are stored in the Bric menu. To access the Bric menu, simply Left Click the small box containing a plus symbol that is located to the right of the Bric storage spaces or alternatively, press the number 6 key on your keyboard.

To hide the Bric selection menu press the number 6 key or Right Click.

Changing Bric Spaces

When the Bric selection menu is open, a Left Click on any of the Bric option tabs from the menu will cause that Bric to be stored in the currently active Bric storage space. While this menu is open you can still select any of the Bric storage spaces making it possible to change any of the Brics stored in all five spaces.

Exit Drop Mode

To exit drop mode, Right Click anywhere on the page canvas or press the D key.

VIEW MODE

Blocs has two main view modes that you can utilize while building your web site, design and preview mode. Design mode is the standard view mode that you will start every project in. When in design mode you will have access to all of the editing tools and also be able to toggle in and out of drop mode in order to build and edit your web pages.

In preview mode you can see how your site is going to look and work once it's in the browser. All videos, iframes and interactions will be activated in this view mode.

Switch View Mode

To switch view mode at any point you can use View > Toggle View Mode or the keyboard shortcut ⌘+V.

OPTIONS SIDEBAR

From the options sidebar you can access all of the main settings for your project along with the controls to edit and fine tune many of the features of the currently selected Bloc or Bric.

Toggle Sidebar Visibility

The main options sidebar is hidden upon startup, to make it visible, click the menu button located in the top left corner of the apps window or use the keyboard shortcut ⌘⏎ .

SITE OPTIONS

The site options let you set the global styling for the pages of your web site, enter the SEO information about your site and also set the sites favicon.

Accessing Global Options

You can access the site options for your project by navigating to the top of the options sidebar and clicking the tab labeled site.

Design Settings

The first sub tab of the site options is the site design settings. From these settings you can set the global style of text elements such as headers and paragraphs along with user interface elements such as buttons and links.

SEO Settings

The SEO settings let you set all of the important search engine optimization data for your site such as title, keywords and description as well as your google analytic tracking code.

Adding a Favicon

To add a favicon to your site navigate to the site option miscellaneous, from here click on the small favicon thumbnail and then select the artwork you would like to use as your sites favicon. For best results use a .png sized at 16x16px

SWATCHES

Colour swatches in Blocs work a little differently than those found in most other design applications. In Blocs a single colour swatch can be assigned to any number of different Blocs and Brics. The benefit of this workflow means if any colour swatch value is updated at some point in the future, all Blocs and Brics assigned to that swatch will be automatically updated to reflect the new colour.

Assign a Swatch

To assign a swatch to any Bloc or Bric simply select the item and then press 8 on your keyboard to open the swatch manager panel. From the swatch manager panel you can select the swatch you wish to assign to the currently selected object.

Add Swatch

To add a new swatch simply click the + symbol located in the top right of the swatch manager panel.

Edit Swatch

To edit any swatch, double click the selected swatch to open the native mac colour picker. As the swatches colour value changes any blocs or brics that have that colour assigned will update in real time.

Delete Swatch

To delete a swatch click the - symbol located in the top right of the swatch manager panel. Please note: the first two base swatches can not be deleted.

Unlink Swatch

To unlink a swatch from any object, click the small cross located inside the colour well in the main left hand menu.

GUIDES

Blocs is able to display basic page layout guides, to toggle these guides on and off use the keyboard shortcut G when in design mode.

IMAGES

Images can be added to your project in two ways. Import to library or dragging images into the Blocs application.

Change Image

When you place an image Bric into your design or use one of the pre-made Blocs that contains an image, the image will be set to a basic placeholder. To change any image in your design simply double click it or if the image is already active you can also change it by clicking on the preview thumb from the sidebar options. This will open the assets library, from here you can choose to use either a stock image or one of your own.

Importing Images

There are multiple ways to import images into a project, the easiest way is to simply drag images into the Blocs application window, doing this will add them to your assets library as well as placing them onto your current project page. Alternatively you can also import images to a project using the keyboard shortcut ⌘+I.

Blocs supports image files up to 2MB in the following file formats: jpg, png, gif and svg.

Deleting Images From Library

To delete an image from your asset library, double click any image in your design to open the asset manager panel, click the my assets tab, navigate to the asset thumbnail you wish to delete and then right click it and select remove image from the contextual menu.

FONTS

Blocs provides a curated list of Google Web Fonts.

ICONS

Blocs comes with the 4 open source icon sets built in allowing you to easily use any of them in your designs.

Change Icon

When you place an icon Bric into your design or use one of the pre-made Blocs that contains an icon, the icon will already be set. To change any icon in your design simply double click it or if the icon is already active you can also change it by clicking on the preview thumb from the sidebar options. This will open the icon set library, from here you can search and select the icon you wish to use.

FORMS

Blocs allows you to easily intergrate forms into your projects using the various form Brics available.

Adding a form

To add a form to a page, right click to enter drop mode then hit the 6 key to view the Bric menu. From the Bric menu, select the navigation tab forms and then left click the first option at the far left to load the fully built form into a drop space. Hit the 6 key again to hide the Bric menu and then move the cursor to the area you wish to add the form and left click to set it in place on your page. Take care to right click to exit drop mode.

Setting up a form

Once you have a form in place on your page, it will require a little configuration before it will work as desired. Making sure you are no longer in drop mode, move the cursor towards the edge of one of the form fields to reveal the outer form container hover marker. Once this marker is revealed left click and the form will be activated for editing.

On the left hand inspector menu you will now be presented with the form options. The two main sections that require attention are the SENDTO and FROM input fields. In the SENDTO field enter the email address you would like the forms data sent to and in the FROM field enter the email address you would like the form to be posted via (this data will show in your email client as sent from). With these options set correctly the form should operate as desired after your project is exported as long as the site is hosted on a web server that supports PHP.

IMPORTANT

Although Blocs creates all of the required PHP server side code to process and post forms, remember form posting will not work when your site is run from a computers desktop. Forms will only be processed and sent when hosted on a web server with PHP support.

INTERACTIONS

Blocs comes with many different interaction types which are available to use with user interface elements such as buttons and links.

Assigning an Interaction

You can assign interactions to links, buttons, icons and images. To assign an interaction simply select the Bric on the main page canvas, then from the options sidebar selection the type of interaction you wish to assign from the interactions drop down.

Lightbox

When an image is clicked that has the lightbox interaction assigned to it, a lightbox modal will be shown containing either a full size version of the clicked image or another user defined image.

Navigate to Page Interaction

When a Bric is clicked that has the navigate to page interaction assigned to it, the browser will navigate to the project page you have selected.

Navigate to URL Interaction

When a Bric is clicked that has the navigate to URL interaction assigned to it, the browser will navigate to the url you have set.

Open Dropdown

When a Bric is clicked that has the open dropdown interaction assigned to it, a dropdown menu will be displayed.

Scroll to Target Interaction

When a Bric is clicked that has the scroll to target interaction assigned to it, the browser will scroll the page to the Bloc you have selected. Only Blocs from the same page that have id's set will show up in the scroll to drop down.

Submit Form Interaction

The submit form interaction can be assigned to a button that resides inside of a form in order to sucessfully post the forms field data to the server for processing.

PAGES

Blocs allows you to create an entire website inside the application, you can add as many pages as you need to your project and they will all be stored in a single Bloc file.

Adding Pages

You can add a new page to your project by clicking the button with a + symbol in it, located in the top right corner of the application window or by using the keyboard shortcut ⌘+P.

When creating a new page Blocs will prompt you to enter a page name, once added Blocs will automatically add a link to the new page in your projects nav bar Bloc.

Duplicating Pages

You can duplicate any page in a Blocs project by following the (Adding Pages) steps above but taking care to set the TYPE drop down on the new page modal to Duplicate Page and selecting a page you wish to duplicate. Please note sticky areas are obviously not duplicated, only the main body content is duplicated to the new page.

Pages Settings

You can find the page settings for the currently active page in the options sidebar. From these options you can update a pages name and select whether a link to it should be included in the sites nav bar Bloc.

Navigate Pages

You can navigate through your projects pages by clicking on the page tabs located at the top of the application window or by using the keyboard shortcut ⌘+] to go to the next page or ⌘+[ to go to the previous page.

Deleting Pages

You can delete a page from your project by clicking on the small X icon on the page tab, the page tabs are located at the top of the application window. When deleting a page, Blocs will prompt you to confirm that you want to delete the selected page.

PREVIEW IN BROWSER

You can quickly preview your design as a fully coded website in your default web browser by using the keyboard shortcut ⌥+⌘+B.

EXPORTING

You can export your project from Blocs at any point using File > Export or the keyboard shortcut ⌘+E. On export Blocs will generate the necessary HTML, CSS, Images and JavaScript files for your project.