--- title: Roundtrip tagline: themes date: 2020-11-10 00:00:00 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. tags: [ Bootstrap, Themes ] categories: [ Introduction, Features ] permalink: /pages/public/learn/roundtrip/themes/ regenerate: false resources: [ rouge, clipboard ] 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 page (local) attributes here // ----------------------------------------------------------------------------- // :page--attr: :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 a HTML, CSS & JS Library that focuses on simplifying the development of modern web pages. The primary purpose to apply the framework to J1 is to provide a general standard colors, sizes, fonts and the overall layout of a J1-based site. Bootstrap provides basic style definitions for all common 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 does not change the functionality of the framwork, but modifies 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 additonal 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 link:{bootstrap-home}[Bootstrap, {browser-window--new}] is not rocket science. But, to be honest, some knowledge is needed to link:{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 link:{w3schools-css-tutorial}[design base, {browser-window--new}] of each and every website. Thanks to the people at link:{bootswatch-home}[Bootswatch, {browser-window--new}], a great set of already prepared Bootstrap stylesheets in various designs are available at 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, a link:{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 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 their design if other stylesheets, other ideas of web design is 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 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 lanuguages how highlightning works using _Rouge_. === Apply a theme Make a selection of theme below to preview a theme. ++++

++++ === 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 = %(

) 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 You've explored some of the possibilities J1 offers for managing themes. But much, much more can the J1 do for your website. This was the last place to go for the roundtrip. More details of the most common elements of Bootstrap can be found on the previewer for a theme. Have a look at the link:{previewer-theme}[Theme previewer]. To make things real for your new site, go for Web in a day. This tutorial guides you through all the steps on how to build a website - your site using Jekyll and the template system J1. It's really a pleasant journey to learn to create today's static webs. Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].