On 12/3/2012 5:33 PM, Dan Allen wrote:
For those who like style...I've been getting a little crazy exploring how varied and presentable I can make the AsciiDoc output. In my previous message, I shared my dzslides backend [1] which produced these HTML5-based presentations [2]. We all love Twitter Bootstrap and there's no question their documentation, which is based on Bootstrap, is pretty slick looking [3]. I wanted to see if I could reproduce that page using AsciiDoc and a custom backend [4] (employing as few tricks as possible). I'm happy to report that I could match it almost 1-to-1 [5] (with the exception of non-documentation elements such as forms and buttons, and a few limitations on styling tables). I'm going to keep working to simplify the AsciiDoc source document and backend, perhaps even enough to compel Twitter to adopt it :) You are welcome to join the effort! Cheers, -Dan p.s. In the process of developing the bootstrap-docs backend, I realized that AsciiDoc could really use a base HTML5 backend that is much more minimal and makes maximum use of HTML5 tags (section, article, aside, etc). I'll likely refactor that out of the bootstrap-docs backend so that I have less to override. I also plan to create a vanilla bootstrap backend that doesn't use the extra assets used in the documentation. [1] https://github.com/mojavelinux/asciidoc-dzslides-backend [2] http://mojavelinux.github.com/decks/ [3] http://twitter.github.com/bootstrap/base-css.html [4] https://github.com/mojavelinux/asciidoc-bootstrap-docs-backend [5] http://cloud.github.com/downloads/mojavelinux/asciidoc-bootstrap-docs-backend/example.html -- You received this message because you are subscribed to the Google Groups "asciidoc" group. To view this discussion on the web visit https://groups.google.com/d/msg/asciidoc/-/jtkLIOGo2EMJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/asciidoc?hl=en.
Just a test drive to the new backend: https://github.com/mojavelinux/asciidoc-bootstrap-docs-backend 1) this link in that page is dead. https://github.com/downloads/mojavelinux/asciidoc-bootstrap-docs-backend/bootstrap-docs.zip so I can only use this to install: https://github.com/mojavelinux/asciidoc-bootstrap-docs-backend/archive/master.zip 2) I tried to generate the html with the new backend, using this as source: https://raw.github.com/mojavelinux/asciidoc-bootstrap-docs-backend/master/examples/base-css-book.asciidoc but what I got is no way like this: http://cloud.github.com/downloads/mojavelinux/asciidoc-bootstrap-docs-backend/example.html attached is what I got. the command I use to generate the page is : asciidoc -b bootstrap-docs -a toc base-css-book.asciidoc please advise if possible. -- You received this message because you are subscribed to the Google Groups "asciidoc" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/asciidoc?hl=en.Title: Base · Bootstrap
Base CSSFundamental HTML elements styled and enhanced with extensible classes. TypographyHeadingsAll HTML headings, h1. Heading 1h2. Heading 2h3. Heading 3h4. Heading 4h5. Heading 5Heads up! AsciiDoc only supports headings through Body copyBootstrap’s global default Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <p>...</p> Lead body copyMake a paragraph stand out by adding Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. <p class="lead">...</p> Built with LessThe typographic scale is based on two LESS variables in variables.less: EmphasisMake use of HTML’s default emphasis tags with lightweight styles.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"> ... </table>
Optional classes
Add any of the following classes to the .table base class.
.table-striped
Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped"> ... </table>
.table-bordered
Add borders and rounded corners to the table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered"> ... </table>
.table-hover
Enable a hover state on table rows within a <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @TwBootstrap |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover"> ... </table>
.table-condensed
Makes tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @TwBootstrap |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-condensed"> ... </table>
Optional row classes
Use contextual classes to color table rows.
| Class | Description |
|---|---|
.success |
Indicates a successful or positive action. |
.error |
Indicates a dangerous or potentially negative action. |
.warning |
Indicates a warning that might need attention. |
.info |
Used as an alternative to the default styles. |
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
...
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
...
Supported table markup
List of supported table HTML elements and how they should be used.
| Tag | Description |
|---|---|
table |
Wrapping element for displaying data in a tabular format |
thead |
Container element for table header rows (<tr>) to label table columns |
tbody |
Container element for table rows (<tr>) in the body of the table |
tr |
Container element for a set of table cells (<td> or <th>) that appears on a single row |
td |
Default table cell |
th |
Special table cell for column (or row, depending on scope and placement) labels Must be used within a <thead> |
caption |
Description or summary of what the table holds, especially useful for screen readers |
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Forms
Not applicable to AsciiDoc.
Icons by Glyphicons
Icon glyphs
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.
Glyphicons attribution
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
How to use
All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:
<i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
<i class="icon-search icon-white"></i>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icon examples
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Buttons
Button group in a button toolbar
…
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href=""><i class="icon-align-left"></i></a>
<a class="btn" href=""><i class="icon-align-center"></i></a>
<a class="btn" href=""><i class="icon-align-right"></i></a>
<a class="btn" href=""><i class="icon-align-justify"></i></a>
</div>
</div>
Dropdown in a button group
…
