Layouting tutorial

# How to layout components on screen

This tutorial describes how is designed standard behavior of HTML and how to layout screens with minimum Layout API, CSS rules or classes.

## 1. Basics

**1.1. How is `<div>` rendered **: ([jsfiddle](http://jsfiddle.net/ondrek/daaCv/9/))
```html
<div>first element</div>
```
![rendered](images/sample@1.png)

**1.2. How `<span>` rendered **: ([jsfiddle](http://jsfiddle.net/ondrek/daaCv/13/))
```html
<div>first element</div>
```
![rendered](images/sample@2.png)

**1.3. How are more `<div>` rendered **: ([jsfiddle](http://jsfiddle.net/ondrek/daaCv/14/))
```html
<div>first element</div>
<div>second element</div>
```
![rendered](images/sample@3.png)

**1.4. How are more `<span>` rendered **: ([jsfiddle](http://jsfiddle.net/ondrek/daaCv/15/))
```html
<span>first element</span>
<span>second element</span>
```
![rendered](images/sample@4.png)

### Review
+ Standard layout elements are `<div>` and `<span>`, these elements have no special meaning at all
+ These two elements are standardly styled without borders, spaces, widths, heights
+ `<div>` element has

## 1. Basics

**4. How are more `<span>` rendered **: ([jsfiddle](http://jsfiddle.net/ondrek/daaCv/15/))
```html
<span>first element</span>
<span>second element</span>
```
![rendered](images/sample@4.png)

**Simply copy the HTML template below and drop it on any static file server**:

```html
<!DOCTYPE html>
<html>
<title>Hello Strapdown</title>

<xmp theme="united" style="display:none;">
# Markdown text goes in here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>

### Features

+ Search-engine friendly
+ Cross-browser compatible (tested with mobile Safari, IE 8/9, Firefox, Chrome)
+ Github-flavored Markdown (tables, syntax highlighting, etc)
+ Themeable

### Themes

Bootstrap themes from [Bootswatch.com](http://bootswatch.com) are included for your convenience. Simply include the attribute `theme` in your `<xmp>` tag with one of the following theme names (default is vanilla Bootstrap):

![Bootswatch](bootswatch.png)

### Self-hosting

For convenience the library is hosted at `strapdownjs.com` (as in the source above), but if you prefer to host it yourself make sure to save *all* files contained in `/v/<version_number>`, as the library dynamically loads all necessary stylesheets, etc.

### Limitations

It's an unlikely scenario, but since Strapdown uses the `<xmp>` tag to wrap your Markdown (so that users don't have to escape special HTML characters), your text can't contain the string `</xmp>`.

<hr/>