Blog - AsciiDoc-Bootstrap 3.0.1

Table of Contents

Basic Blog

A basic blog layout with two columns: on left the post dates, and on right the post content.

Example of Asciidoc document. See source text
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/examples/demo2.asciidoc]
.

In first post, we used :

role attribute to customize css rules
cols attribute to specify columns width
citetitle and attribution attributes to identify sources of article.
asciidoc text formatting, for left column to show post date and possible tags.

In second post, we used also :

role attribute to customize css rules
cols attribute to specify columns width
asciidoc text formatting, for left column to show post date and the image inline macro to illustrate article by a thumbnail.

We used additional css rules added to themes/2/flatly/user.css to give such design.

span.medium { font-size: 1.4em; }

.title .label-warning {
    padding: 10px;
}

.timeline > .title {
    padding: 20px 20px;
    text-align: right;
    margin: 0;
}
.timeline > .content {
    padding: 20px 20px;
    border-left: 3px solid #EEE;
}

.attribution {
    float: right;
    text-align: right;
    color: #d3d3d3;
}

Result with flatly theme

Enter the following command:

$ asciidoc -b bootstrap -a bsver=2 -a theme=flatly -a jumbotron-fullwidth /path/to/document/demo2.asciidoc

And here are the final result that you should get.

Figure 1. My Blog with flatly theme

About this document

How to build the source code
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/examples/blog1.asciidoc]
.