How-to Style Your Studio File Using the Section Component

This page describes how to use Section Wrappers in your Blue Bite experiences. The Section Wrapper uses the CSS Box Model; the phrase “box model” refers to the design and layout of HTML elements that make up your experience.

Table of Contents

Introduction

The CSS Box Model explains how HTML elements are visually constructed. The CSS Box Model is a box that houses the content of every HTML element. For example, the box model allows us to both put a border around elements and define spacing between and within them.

There are four major parts to this model:

  1. Content - The content of the box, which is where any texts or images appear.
  2. Padding - A transparent area around the content.
  3. Border - A border that surrounds the content and padding
  4. Margin - A transparent area around the border.

For more information on the CSS Box Model visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

How to Use the Section Wrapper to Style Your Page

Section Wrappers stylize components and wrappers by adjusting their size and dimensions. This includes height, width, padding, margin, border width and radius, font size and weight, text alignment and color, background color, and border color.

When you select the Section Wrapper, three icons appear—Details, Options, Styles.

Click the “Style” icon to configure this section’s CSS properties.

TRBL (Trouble) Acronym

In each field--padding, margin, border width, border radius, font size—you can add different dimensions for the top, bottom, left, and right edges. Remember to follow the TR(ou)BL(e) acronym.

TRBL - Top, Right, Bottom, Left
TRBL Design Table Example

1px1px on all four sides
1px 2pxTop and bottom are 1px, left and right are 2px
1px 2px 3pxTop is 1px, right and left are 2px, and bottom is 1px
1px 2px 3px 4pxTop is 1px, right is 2px, bottom is 3px, and left is 4px

Style Settings

Height and width

The height and width refer to the size of the content itself, not the section as a whole, meaning any additional padding, margining, or border will be excluded. If you set a height to be larger than a device’s display, the content will cut off. Adjusting the height and width impacts the content housed in the section, not the entire section.

Example: Different with settings

SettingValue
heightauto
widthauto
padding
margin


SettingValue
heightauto
width80px
padding
margin


Margin

This field controls the placement of the section. You can do so using the TRBL acronym, discussed above. Any area in the margin is outside the content and border and therefore will not

Border Width and Border Radius

The border width and radius fields control both the size and shape of your border. The border width controls the width and size of your border, while the border radius allows you to customize how round you would like that border to be.

Padding

Padding is the very first box that surrounds the content, and is transparent, however the background color will apply to the padding.

Font Size

Sets the size of any text within this section.

Font Weight

Indicates the weight of the text, and allows you to toggle between light, normal, and bold.

Text Align

Indicates the orientation of any text contained in this component. There are four options: left, right, center, justify.

Text, Background, and Border Color

The Section Wrapper allows you to adjust the color & opacity of the text, background and border. You can choose from a preset list, enter the Hex code, or enter the RGB values. To adjust the opacity, you can adjust the percentage or use the second toggle bar.

CSS Units

Note that you are not restricted to adjusting pixels. See below for an introduction to additional CSS units you can utilize in the Studio.

Pixels (px)

Pixels are the smallest discrete component of an image. Pixels are a standardized unit of measurement that will not change across devices.

Viewport Height (vh)

The viewport height refers to the visible height of a user’s screen, which will vary by device. It’s important to note this does not include the height of the browser’s navigation bar, so 100vh can result in some scrolling.

Viewport Width (vw)

The viewport width refers to the visible width of a user’s screen, which will vary by device.

Percentage (%)

The percentage value is based on either the height or width of the containing block of an element.

Helpful Tips and Best Practices for Using the Section Component

  1. Before you start, zero out all the fields in the style section.
  2. Always set bottom margin to zero when possible, in order to avoid unintentionally pushing down content below.
  3. Layer images and other components on top of each other by using negative margins. When using negative margins, components that are lower down in the page are in the foreground.
  4. If you do not use negative margins, the start of one component will be at the end of the previous one from a top to bottom layout.
  5. When layering components, there is an order of what will appear on top, regardless of margining. Galleries will always remain on top, and within gallery swipers will appear over grids. i.e. It is not possible to place a text component on top of a gallery.
  6. If no border is needed, zero out the field with 0px instead of 0%.
  7. If no background color or border is being used, always set the border and background colors to 0 opacity ensuring that any accidental coloring is transparent.
  8. These styling tips also apply to the Form, Button, and Twitter components.
  9. Make sure to provide a meaningful name for every section wrapper in your studio file so it is easier to go back and edit.
  10. Studio Experiences are built for mobile devices.
    1. As you stretch the width out the height will scale according to the width.
    2. Use pixels or calc to adjust the height and percentage for width.

How to Layer Multiple Components in the Studio

How to utilize negative margins to place components on top of another. When layering it is important to remember that one piece of content will appear above another if it is negatively margined from below.

Example: How to place a Button on top of a background Image by adjusting the Margin.

Studio ConfigurationImage 1Component 2

A. In this first layout, the Button is placed directly under Image 1.

Setting

Value
(Section 1 - Shark)
Value
(Section 2- Button)

heightautoauto
widthautoauto
padding0px0px
margin0px0px

B. Notice that the shark image gets cut off as the top margin of the button component gets negatively margined up. 

SettingValue
(Section 1 - Shark)
Value
(Section 2- Button)

heightautoauto
widthautoauto
padding0px0px
margin0px-50% 0px 0px 0px

*Note* the Button component has its own styling options. Adjust the margin either in the Section Wrapper or within the Button’s settings.


C. To offset the image being cut off, change the bottom margin of the button component.

SettingValue
(Section 1 - Shark)
Value
(Section 2- Button)

heightautoauto
widthautoauto
padding0px0px
margin0px-50% 0px 50% 0px

CALC Function

The purpose of the calc function is to align two images at the same height.

The calc() function a mathematical expression as its parameter, while the value that is used is the result of this expression. Any simple expression, utilizing the following operators can be used: addition, subtraction, multiplication, and division. For example, you could set the height of an HTML element to be calc(100% - 50px). This means that no matter what device your experience is being viewed on, this element will have a height of the full length of the given screen minus 50 pixels. The CALC function is mostly used with height and width, but can also be used with margin.

Example: How to use the calc() function to align two images to the top of the page

Studio ConfigurationImage 1Image 2

height: 2400px

width: 1800px


A. In this first layout, Image 2 is placed directly under Image 1.

SettingValue
(Section 1 - Shark)
Value
(Section 2 - Blue Bite Logo)


heightautoauto
widthautoauto
padding0px0px
margin0px0px

B. Use the CALC function to determine the precise number of units required to move Image 2 up to the top of Image 1

Formula:

calc((100vw*(height of image 1/width of image 1)*-1)

SettingValue
(Section 1 - Shark)
Value
(Section 2 - Blue Bite Logo)


heightautoauto
widthautoauto
padding0px0px
margin0pxcalc((100vw*1.33)*-1) 0px calc(100vw*1.33) 0px


Additional Resources