Documentation
Barisco Helpcenter
Video Tutorial – How to use Interactions
Using free background patterns in Barisco
How to prepare designs in Photoshop for Barisco
Video Tutorial – Explanation of Barisco’s editor user interface
Video Tutorial – How to use the scroller
Video Tutorial – How to create overlays or pop-ups
Video Tutorial – How to create groups
Video Tutorial – How to use the Position & Size panel
Free interface templates in Barisco
Different interfaces for different platforms.
What features are not supported in Internet Explorer?
How can I optimize the load time of my project?
Why do fonts appear differently across different browsers and de
How to add your own domain name?
Does Barisco support Android?
How to duplicate pages to a different edition
Video Tutorial – Interfaces 2/2 – How to design a custom interfa
Video Tutorial – Interfaces 1/2 – Using default interfaces
Release 2.0.0.0
Optimize your publication for SEO
Direct Share to Social Media Channels
Embed your Project
DOOH (Narrowcasting)
Release 2.1
Improved Group settings for desktop and mobile views using one U
Improvements Release 2.2.5
How to create pixel perfect mobile web pages without coding?
Making a mobile ready site in 5 steps:
Reset your Profile
Animate Layers in the Scroll when Visible
Use now animated GIF in Barisco.
Integrating YouTube video’s in your Barisco projects is easy!
How to create a landing page or vertical scrolls in a page.
Release 2.0.1.0
Implement Youtube original player (control)
New! Dimensional scrolling features for landing pages micro site
UX improvements
Orientation options on publication settings
New Features for creating templates in the restricted editing
Video Tutorial – How to use the Position &
Size panel
Intro
Welcome to this Barisco tutorial! In this tutorial we’re going to have a look at the position and size panel in Barisco.
Part 1 – Position Properties
Just like in other graphic design tools, visual objects have a position. The position of an object can be found on your right hand side at the property panel at Position and Size.
As you can see in this case there’s a Top and Left position visible. At the position and Size panel, you can change the position of the object by clicking the smart properties that you see here. To do this just click your mouse button down and drag the property in either the left or right direction. If you looking to set a specific value for the positions: you can also just click the property and enter a value.
Besides being able to move objects using the Position and Size panel; you can also move objects on the stage by clicking the object and dragging it. As you can see the top and left properties are updated immediately. This way you can instantly see to what position you are dragging the object.
Part 2 – Size Properties
As you may have seen the width and height properties are located above the position properties. Just like the position properties; the size properties can be changed by dragging to left and right to change the value of the properties.
On the right hand side of the width and height properties you can find the lock aspect ratio option. With the lock aspect ratio option you can lock the aspect ratio width and height. This means that when either the width or height is changed, that the aspect ratio between the width and height property is maintained.
Part 3 – Positions constraints
Sometimes positioning objects from the top and left corner is not enough. Imagine that you have a layout that requires you to have an object that is positioned on the right side of the screen at all times. If you would place an object at the right side of the stage and then start to resize your browser, the object would maintain a static position relative to the left side of the screen and may even disappear from view.
To illustrate what exactly I’m talking about, I will place the black rectangle on the right side of the stage, then save the page and then preview the edition from the editions overview so that I can resize my browser window.
As you can see the black rectangle does not behave as I had intended. This is because the black rectangle uses a left position constraint.
In cases like these you can set the horizontal constraint to the right hand side instead. Now when you start to resize your browser the object will maintain its position on the right hand side at all times.
Part 4 – Constraint-based layouts
When making more complex designs, it possible that you want have an object that is constraint to the top and the bottom or left or right, rather than just left or right. To do this you can add additional constraints to make sure that the object maintains a position relative to those constraints too.
For example if I need some object that maintain a position on the top, left and bottom – like a vertical bar on the left; I can do this by adding additional constraints on the top, left and bottom.
I will also add an example of the same object, but this time on the right hand side, to illustrate how this would look like on both the left and the right hand side of my browser window.