Slide layout and composition
Every Sprites infographic consists of one or several slides which, in turn, consists of one or several elements (such as text, fact, figure, chart, etc.). As you can see this model is quite similar to what you're already used to from PowerPoint, Keynote or Google Presentations. This is also one of the key differences of Sprites comparing to other infographic creation tools - the infographic in Sprites is more like a visual presentation (as opposite to "bullet-point" presentation), a story which has a flow.
Elements on a slide are usually placed into one of the four stacks (aka groups, aka containers): "top", "left", "right" and "bottom". Stacks help to organize and align elements on a slide making your infographic more visually compelling. The following image illustrates how stacks are positioned on a slide:
The "left" and the "right" stacks each occupies roughly 35% of the total slide width while the "top", "center" and the "bottom" stacks are 100% wide. Below is the HTML template that every new slide is given:
<div class="slide">
<ul class="stack stack-center"></ul>
<ul class="stack stack-top"></ul>
<ul class="stack stack-left"></ul>
<ul class="stack stack-right"></ul>
<ul class="stack stack-bottom"></ul>
</div>Those elements that have custom position applied to them (via drag'n'drop) are placed outside of all the stacks, as direct children of the <div class="slide"> tag.
When multiple elements are being added to the same stack, they're aligned either vertically or horizontally, depending on the stack they're being added to. The following image illustrates per-stack element alignment:
As you can see, it's only the "center" stack where elements are aligned horizontally. Also, elements are always centered within the current stack (either via text-align: center style applied directly to the element or via display: table-cell style applied to the element container). It's worth mentioning that although every stack is represented by the <ul> tag, elements within the given stack are not necessarily placed inside the corresponding <li> tags (for example, the "left", "right" and the "center" stacks use a single <li> tag for all the elements while the "top" and the "bottom" stacks use a dedicated <li> tag for wrapping each element).
Each element is represented by a single <div> tag with the "element" class applied to it (there're more classes that Sprites applies to each element, depending on its type):
<div class="element ...">
<div class="element-outer">
<div class="element-inner">
<!-- Element contents -->
</div>
</div>
</div>The <div class="element-outer"> as well as the <div class="element-inner"> are the two helper containers are always populated and that can help you styling your custom elements. The exact HTML markup that every element produces also depends on the type of a given element (for example, element of type "text" doesn't generate any additional markup whereas element of type "map" renders inside the svg container).
Although it's possible to apply styles directly to the <div class="element">, we don't recommend doing so because Sprites relies on some of the styles to provide consistent user experience. Please apply your styles to the <div class="element-outer"> and the <div class="element-inner"> containers instead.