title: Roundtrip tagline: themes date: 2020-11-10 00:00:00 +100 description: >

The themes feature for J1 is in an experimental
state for the template system. Anyway, it makes
sense to present what is possible using different
versions of Bootstrap's CSS styles for a website.

categories: [ Roundtrip ] tags: [ Introduction, Module, Themes ]

scrollbar: false fam_menu_id: page_ctrl_simple

permalink: /pages/public/learn/roundtrip/themes/ regenerate: false

resources: [ rouge, clipboard, lightbox ] resource_options:

- attic:
    padding_top:                      400
    padding_bottom:                   50
    opacity:                          0.5
    slides:
      - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
        alt:                          Photo by Clem Onojeghuo on Unsplash
        badge:
          type:                       unsplash
          author:                     Clem Onojeghuo
          href:                       https://unsplash.com/@clemono

// Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid:

// Set (local) page attributes here // —————————————————————————– // :page–attr: <attr-value> :images-dir: {imagesdir}/pages/roundtrip/100_present_images

// Load Liquid procedures // —————————————————————————– {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes // —————————————————————————– {% include {{load_attributes}} scope=“all” %}

// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Include sub-documents // —————————————————————————–

Themes for the template system J1 are based on the free and open-source CSS front-end framework {url-bs–home}[Bootstrap, {browser-window–new}] of version V4.

Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of modern web pages. The primary purpose of applying the framework to J1 is to provide a general standard for colors, sizes, fonts, and the overall layout of a J1-based site. Bootstrap provides basic style definitions for all commonly used HTML elements.

This results in a uniform appearance for the content in terms of the overall layout, text, tables, and form elements across all modern web browsers available on the market. In addition, developers can take advantage of CSS classes defined in Bootstrap to customize content individually.

The themes feature for J1 is in an experimental state for the template system. Anyway, it makes sense to present what is possible using different versions of Bootstrap's CSS styles for a website.

Template themes

Themes step in the framework to further adjust the appearance of a website based on the core CSS rules and definitions of Bootstrap. Themes do not change the functionality of the framework but modify rule-based, e.g., the color scheme, fonts, sizes or the appearance of more complex elements like forms,or tables. Additionally, a theme may add additional components but in the sense of Bootstrap's framework rules and philosophy.

It is expected that many people will change the template for their needs. To really create unique websites. Fundamental to do this is are CSS styles defined by Bootstrap.

Modifying the CSS styles of {bootstrap-home}[Bootstrap, {browser-window–new}] is not rocket science. But, to be honest, some knowledge is needed for {w3org-css-spec}[the CSS technology] to do so. We encourage you to spend some time first on learning CSS. To learn what is the {w3schools-css-tutorial}[design base, {browser-window–new}] of each and every website.

.Themes menu (Bootswatch) lightbox::images–themes-menu[ 1024, {data-images–themes-menu} ]

Thanks to the people at {bootswatch-home}[Bootswatch, {browser-window–new}], a great set of already prepared Bootstrap stylesheets in various designs are available on their website. No need to start from scratch, to re-define all the Bootstrap variables and rebuild the framework files to create a new theme. Many different styles are available. What is already available at Bootswatch is at least a good base for your modifications; your unique design.

Besides the bunch of different stylesheets at Bootswatch, an {bootswatch-api}[Integration API, {browser-window–new}] is available that helps a lot to integrate available designs into an existing site. This API is the base to integrate selectable Bootswatch stylesheets into the J1 Template navigation system for easy use.

Apply a template theme

The base for designing pages using the J1 Template is the theme Uno, a modern light theme that can be used for many types of websites. And what we mentioned already, web design is not: one size fits all. The theme Uno can be seen as a good base, a starting point. Combining Uno and a different theme may a fast solution for your site!?

You can find all available themes, all stylesheets to be applied to your pages from the menu Themes. You're invited to check how a page is changing for its design if other stylesheets, other ideas of web design are used.

NOTE: Changing BS-based styles is one thing. Changing from one theme to the next at runtime a bit more challenging. For the first version of the J1 Template, many styles are automatically changed for J1 specific components as well, but not all of them for now.

Simply select a theme from this menu, and a new BS-based stylesheet is automatically applied to your pages.

Code Highlighter Rouge

Rouge is a pure Ruby and themeable syntax highlighter. It can highlight 100+ different languages and output HTML or ANSI 256-color text. Find with this section all available themes and examples for several languages how highlighting works using Rouge.

For the default theme `Uno` of J1 Template, the following Rouge themes are used:

NOTE: The default themes used for the J1 Template can be configured with the global template config file `~/_data/j1_config.yml`.

Apply a theme

Make a selection of a theme below to preview.

++++ <div class=“btn-group”>

<!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
<!-- NOTE: control the behaviour of popper.js for positioning -->
<!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
<button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
Select Theme<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu">
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
  <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
</ul>

</div> <div id=“selected” class=“mt-1 mb-3”></div> ++++

Highlight Liquid code

{% raw %}

source, liquid

Hello {{ 'now' | date: “%Y %h” }}

{% comment %} if item.quantity is 4… {% endcomment %} {% for i in (1..item.quantity) %}

{{ i }}

{% endfor %}


{% endraw %}

Highlight Javascript code

source, javascript

// helper functions // function styleSheetLoaded(styleSheet) {

var sheets     = document.styleSheets,
    stylesheet = sheets[(sheets.length - 1)];

// find CSS file 'styleSheetName' in document
for(var i in document.styleSheets) {
  if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
    return true;;
  }
}

}


Highlight Ruby code

source, ruby

require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal' include Asciidoctor <1>

Asciidoctor::Extensions.register do

class J1BlockMacro < Extensions::BlockMacroProcessor
  use_dsl
  named :banner
  name_positional_attributes 'role'

  def process parent, target, attrs
    html = %(<div id="#{target}" class="#{attrs['role']}"></div>)
    create_pass_block parent, html, attrs, subs: nil
  end
end
block_macro J1BlockMacro

end


<1> don't miss to load the Asciidoctor ruby

Whats next

Using a theme, the character of a website can change a lot. If you don't want to support multiple themes with your site, a theme is a good base to create your own theme, anyway.

An important feature for larger webs is searching. The visitors should be able to search your site to find pages and posts they are interested in. Check what is searching a J1 website all about at {roundtrip-quicksearch}[Quicksearch].