ebullient·works

Grid Component

By using the <grid> tag you are able to layout the content of your slide in parts.

Concept

Grid layouts drag-and-drop is used to size and position content of your slides.

Basic Syntax

The following syntax is used to drag-and-drop a grid in Slides Extended:

<grid drag="width height" drop="x y">
...
</grid>

The width and height values of the drag property define the size of the area in which the content will be displayed. The x and y values ​​of the drop property define the position on the slide where the content should be inserted.

Tip

By default, it is assumed that the values ​​are percentages based on the size of the slide. Append px to the values for pixel sizes.

Position by Coordinates

Both positive and negative values can be set for x and y on the drop property. The meaning of positive and negative values in each case is summarized as follows:

The following sample slide helps to clarify these concepts:

<grid drag="60 55" drop="5 10" bg="red">
60 x 55
</grid>

<grid drag="25 55" drop="-5 10" style=bg="green">
25 x 55
</grid>

<grid drag="90 20" drop="5 -10" bg="gray">
90  x 20
</grid>

Example

Position by Name

Some common grid positions have been named for your convenience. Named positions can be used in place of x and y coordinates on the drop property. The following named positions are currently defined:

The following sample slide helps to clarify these concepts:

<grid drag="40 30" drop="topleft" bg="red">
Top Left
</grid>

<grid drop="right" bg="green">
Right with default size
</grid>

<grid drag="80 30" drop="bottom" bg="coral">
Bottom
</grid>

Example

Tip

When drap property is not specified, grid component uses a default size of 50 100

Flow

The following syntax is used to define a custom flow for a grid:

<grid drag="width height" drop="x y" flow="col | row">

Using a value of col or row for the flow property defines the layout behavior for the grid. If the flow property is not specified then the grid automatically inherits the default col flow behavior.

Column Flow

When flow="col" the following layout and spacing behaviors occur within the grid:

The following sample slide helps to clarify these concepts:

<grid  drag="40 100" drop="center" bg="coral" flow="col">
Heading
![[Image.jpg]]
**Lorem Ipsum** is simply dummy text
</grid>

Example

Row Flow

When flow=row the following layout and spacing behaviors occur within the grid:

The following sample slide helps to clarify this concept. Note, the grid width here is 100% of the slide width:

The following sample slide helps to clarify these concepts:

<grid  drag="100 40" drop="center" bg="coral" flow="row">
Left
![[Image.jpg]]
**Lorem Ipsum** is simply dummy text
</grid>

Example

Attributes

Background

The grid bg property is used to define a custom background for a grid. Children added to the grid are rendered on top of the background.

<grid  drag="width height" drop="x y" bg="color">

Where the color option of the bg property takes any valid CSS Color Value. The following sample demonstrates color backgrounds:

<grid  drag="55 50" drop="topleft" bg="orange">
### Make
</grid>

### Noise <!-- element drag="55 50" drop="bottomright" bg="rgb(0,0,0)"-->

<grid  drag="25 20" drop="center" bg="green" rotate="-15">
### some
</grid>

Example

Border

The grid border property is used to define a custom border for a grid section. Custom borders can help to highlight or differentiate grids on your slide.

<grid  drag="width height" drop="x y" border="width style color">

Where the width option of the border property takes values of thin, medium, thick or a pixel value such as 10px. The style option takes values of dotted, solid, dashed, inset, or outset. And the color option takes any valid CSS Color Value.

The following sample demonstrates borders:

<grid  drag="30 25" drop="left" border="thick dotted blue">
thick dotted blue
</grid>

<grid  drag="30 25" drop="center" border="4px solid white">
20px solid white
</grid>

thick dotted blue <!-- element drag="30 25" drop="right" border="medium dashed red"-->

Example

Animation

The grid animate property is used to define a slide animation a grid section. The animation applies to the grid and all associated children.

<grid  drag="width height" drop="x y" animate="type speed">

Where the type option of the animate property can take one of the following animation types:

Tip

The speed option is optional. When specified it accepts a value of slower or faster.

Opacity

The grid opacity property is used to control the transparency of a grid section. Adjusting the opacity of a section also affects the opacity of all associated children.

<grid  drag="width height" drop="x y" opacity="level">

Where the level option of the opacity property can take any value from 0.0 to 1.0. A grid section with an opacity value of 0.0 is invisible.

Filter

The grid filter property is used to define filter effects for a grid section. Filter effects on a grid section also affect all associated children.

<grid  drag="width height" drop="x y" filter="effect">

Where the effect option of the filter property can take one of the following types:

The following sample demonstrates filters:

<grid  drag="50 50" drop="-12 -25" bg="white" filter="grayscale()">
![[Image.jpg]]
</grid>

Text is too blurry <!-- element drag="30 25" drop="5 15" bg="#B565A7" filter="blur(10px)" -->

Example

Rotate

The grid rotate property is used to control the 2D rotation of a grid section. Rotation on a grid section also affect all associated children.

<grid  drag="width height" drop="x y" rotate="deg">

Where the deg option of the rotate property is a postive or negative value indicates a degree of rotation from 0 to 360 degrees.

The following sample demonstrates rotation:

<grid  drag="30 25" drop="12 15" bg="#B565A7" rotate="-10">
Hello
</grid>

World! <!-- element drag="40 25" drop="-12 -25" bg="#D65076" rotate="40" -->

Example

Padding

The grid pad property is used to define custom padding for grid. Custom padding can help to enhance the overall appearance of content by controlling the space around grid children.

<grid  drag="width height" drop="x y" pad="top right bottom left">

Where the top, right, bottom, and left options on the pad property all take pixel size values. Following standard CSS Padding Rules these four options can also be specified with just two values or even a single value, for example:

<grid  drag="width height" drop="x y" pad="10px 15px">

This sample grid above would display with 10px padding top and bottom and 15px padding left and right. The following sample demonstrates padding:

<grid  drag="50 50" drop="topleft" bg="orange" pad="0 50px">
###### Lorem Ipsum wasnt simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book here there
</grid>

<grid  drag="50 50" drop="bottomright" bg="orange" pad="20px">
![[Image.jpg|800]]
</grid>

Example

Tip

Padding introduced by this property does not increase the size of the grid itself. Rather it reduces the size of the area available to render children within the grid.

Alignment

The grid align property is used to define the horizontal alignment of a grid section.

<grid  drag="width height" drop="x y" align="type">

Where the type option of the align property can take one of the following types:

The following sample demonstrates the use of align:

<grid drag="35 20" drop="topleft" align="left">
This text is aligned to the left side of the box
</grid>

<grid drag="35 20" drop="topright" align="right">
This text is aligned to the right side of the box
</grid>

<grid drag="36 20" drop="center" align="justify">
Stretches the text so that each line has equal width (like in newspapers and magazines)
</grid>

Example

The following sample demonstrates the use of stretch alignment:

<grid drag="100 45" drop="top" flow="row" align="stretch">
![[Title-Wide.png]]
![[Title-Wide.png]]
![[Title-Wide.png]]
</grid>

<grid drag="100 55" drop="bottom" flow="col" align="stretch">
![[Title-Wide.png]]
![[Title-Wide.png]]
</grid>

Example

Justify Content

The grid justify-content property is used to define how the grid component distributes space between and around their children.

<grid  drag="width height" drop="x y" justify-content="type">

Where the type option of the justify-content property can take one of the following types:

The following sample demonstrates the use of align:

<grid drag="30 100" drop="left" justify-content="center" bg="red">
Item 1

Item 2

Item 3

Item 4
</grid>

<grid drag="30 100" drop="center" justify-content="space-between" bg="green">
Item 1

Item 2

Item 3

Item 4
</grid>

<grid drag="30 100" drop="right" justify-content="space-around" bg="coral">
Item 1

Item 2

Item 3

Item 4
</grid>

Example

Fragments

The grid frag property is used to define fragments for grid. Fragments are used to highlight or incrementally reveal individual elements on a slide.

    <grid  drag="width height" drop="x y" frag="index">

Where the index option of the frag property is a postive value indicates the order the fragment will be displayed.

The following sample demonstrates fragments:

<grid drag="60 55" drop="5 10" bg="red">
### Fragments:
+ Right
+ Bottom
</grid>

<grid drag="25 55" drop="-5 10" bg="green" frag="1">
Right Grid
</grid>

<grid drag="90 20" drop="5 -10" bg="gray" frag="2">
Bottom Grid
</grid>

As you have surely seen in the example, you can combine Fragments and Fragment Lists with each other. By default, Fragment Lists generate indexes that start at 1.

Reference

This guide provides a quick reference to the full set of attributes that can be set on grid component: