Styling

How to make your templates look pretty

Table of Contents

1. Styling
   1. CSS Styling with Bootstrap
   2. Octicons
   3. Charts
   4. Markdown

CSS Styling with Bootstrap

Bootstrap makes modern css styling available in templates.

Example: Formatting a table

  <table class="table">

Example: Formatting a small table

  <table class="table table-sm">

See Bootstrap docs for other examples

Octicons

Octicons make icons available in templates. These are the same icons that Github uses.

Example: Make an archive icon

  <%= octicon("archive") %>  

Example: Make a larger icon

  <%= octicon("archive", height:30) %>  

Example: Make the icon gray

  <%= octicon("archive", fill:"gray") %>  

Note Bootstrap can also show icons, but so far we like the simplicity of Octicons.

Charts

With Chartkick you can use 1 line of Ruby to draw charts.

Markdown

You can write your archive description in Markdown
# Heading 1
## Heading 2
### Heading 3

The user will see a new info icon if the archive description is more than one line

Its is also possible to render markdown content in a Ruby View

<%= markdown <variable> %>