--- title: Theme Preview tagline: Explore Current Styles date: 2022-12-01 00:00:00 description: > JekyllOne is a theme for multifunctional Bootstrap-based and responsive websites, and offers various unique functionalities compared to other themes and templates for Jekyll. Themes for Bootstrap are used to customize the appearance of a website based on the basic rules and definitions of Bootstrap's CSS styles. categories: [ Previewer ] tags: [ Bootstrap, CSS, Theme ] image: path: /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg width: 1920 height: 1280 alt: Photo by Clem Onojeghuo on Unsplash comments: false fab_menu_id: page_ctrl scrollbar: false permalink: /pages/public/previewer/current_theme/ regenerate: false resources: [ animate, clipboard, rouge ] resource_options: - toccer: collapseDepth: 3 - attic: 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: // Attribute settings for section control // :navbars: true :buttons: true :buttons_active: true :buttons_disabled: true :buttons_outline: true :buttons_dropdown: true :buttons_flat: false :buttons_sizes: true :buttons_pulsed: true :buttons_blocklevel: true :selections: true :selections_checkboxes: true :selections_radio_buttons: true :selections_switches: true :fab: true :fab_raised: true :fab_pulsed: true :fab_mini: true :fab_mini_raised: true :fab_colors: true :fab_disabled: true :typography: true :typography_headings: true :typography_blockquotes: true :tables: true :forms: true :forms_bootstrap: false :navs: true :navs_tabs: true :navs_pills: true :navs_breadcrumbs: true :navs_pagination: true :indicators: true :indicators_alerts: true :indicators_badges: true :scrollbars: false :progress: true :progress_basic: true :progress_contextual_alternatives: true :progress_multiple_bars: true :progress_striped: true :progress_animated: true :lists: true :cards: true :cards_simple: true :cards_image: false :dialogs: true :dialogs_modals: true :dialogs_popovers_tooltips: true // Set (local) page attributes here // ----------------------------------------------------------------------------- // :page--attr: // Load Liquid procedures // ----------------------------------------------------------------------------- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%} // Load page attributes // ----------------------------------------------------------------------------- {% include {{load_attributes}} scope="global" %} // Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [role="dropcap"] JekyllOne is a theme for multifunctional Bootstrap-based and responsive websites, and offers various unique functionalities compared to other themes and templates for Jekyll. Themes for Bootstrap are used to customize the appearance of a website based on the basic rules and definitions of Bootstrap's CSS styles. // Include sub-documents (if any) // ----------------------------------------------------------------------------- ++++
++++ Bootstrap themes are used to customize the appearance of a website based on the basic rules and definitions of Bootstrap's (CSS) styles. The use or change of a theme does not alter the functionality of the underlying Bootstrap framework but modifies, for example, the color scheme, fonts, or font sizes. The use or change of a style does not alter the functionality of the underlying Bootstrap framework but modifies, for example, the color scheme, fonts, or font sizes. ifeval::[{navbars} == true] == Navbars A navbar is an elementary page element, usually integrated at the top of your page for navigation. Bootstrap offers many navigation functions that are minimized on smartphones and thus always remain easy to use. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-navbar}[Bootstrap Docs {char-middot} Navbar, {browser-window--new}] Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from `.navbar-light` for use with light background colors, or '.navbar-dark' for dark background colors. Then, customize with `.bg-*` utilities. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{buttons} == true] == Buttons Buttons are important visual anchors that encourage visitors to click on them to call up to click on certain pages and offers on a website. Well-designed buttons are usable instead of simple text links. With the use of buttons, a higher visiting rate (click-through rate) of important pages of a site is achievable. The Bootstrap framework offers different buttons out of the box, which is sufficient for most use cases. Buttons are suitable for the following HTML elements: * Links (anchors) * Form buttons (input) * General buttons (button) Defining a standard button in Bootstrap is very simple: assign the CSS class `.btn` to an HTML element. The following sections describe the different types of available buttons and how they are to be defined. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-buttons}[Bootstrap Docs {char-middot} Buttons, {browser-window--new}] ifeval::[{buttons_active} == true] === Active buttons Active buttons will appear with a darker background and border. If pressed, a *ripple* effect is shown for feedback. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{buttons_disabled} == true] === Disabled buttons Buttons look *inactive* by adding the *disabled* boolean attribute to any ` ++++ [source, html] ---- ---- endif::[] ifeval::[{buttons_outline} == true] === Outline buttons In need of a button, but not a hefty background color they bring? Replace the default modifier with the class `.btn-outline-*` to remove all background images and colors on any button. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{buttons_dropdown} == true] === Dropdown buttons In need of a button having a little menu, buttons with a (nested) *dropdown* (menu) can be used. ++++
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
++++ [source, html] ----
Dropdown link Dropdown link
---- endif::[] ifeval::[{buttons_flat} == true] === Flat buttons *Flat* buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but *hightlighted* on mouse *hover* and *focussed* on press. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{buttons_sizes} == true] === Button sizes Beside the *default* size, small and large buttons are available. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{buttons_pulsed} == true] === Pulsed button Draw attention to a button, e.g for a *recommended* action. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{buttons_blocklevel} == true] === Block level button Create responsive stacks of full-width *block buttons* like those in BS@4 with a mix of *display* and *gap* utilities. By using *utilities* instead of button specific classes, you have much greater control over spacing, alignment, and responsive behaviors. ++++
++++ [source, html] ----
---- endif::[] endif::[] ifeval::[{selections} == true] == Selections J1 Theme support two *selection* elements: checkboxes and radio buttons. These selection elements *replace* the default Bootstrap **toggle**-buttons for a better *style*. ifeval::[{selections_checkboxes} == true] === Checkboxes Checkboxes are used if you want users to select *any* number of options from a list of *preset* (available) options. ++++
++++ [source, html] ----
---- endif::[] ifeval::[{selections_radio_buttons} == true] === Radio buttons Radio buttons are used if you want to *limit* users to just *one* selection from a list of *preset* (available) options. ++++
++++ [source, html] ----
---- endif::[] ifeval::[{selections_switches} == true] === Switches You can use an *alternative* to standard J1 checkboxes: the Material Design styled element *switch*. Switches behave the same as checkboxes to want users to select *any number* of options from a list of *preset* (available) options. ++++
++++ [source, html] ----
---- endif::[] ifeval::[{fab} == true] === Floating Action Button (FAB) Floating Action Buttons are adopted navigation elements from mobile devices (Android) but are used today quite often for web pages as well. Floating action buttons (FABs) for the web typically provide *additional* actions for a page, for example, in-page navigation. mdi:bootstrap[18px, mdi-md-deep-purple-400] https://material.io/components/buttons-floating-action-button/android#using-fabs[Google Material Design {char-middot} Floating action buttons, {browser-window--new}] ++++
++++ [source, html] ---- ---- ifeval::[{fab_raised} == true] ==== Raised FAB To put a 3D effect on floating action buttons, buttons can be *raised* by adding the additional CSS class `raised-zX`. J1 supports 25 levels of raising HTML elements ranging from 0 to 24. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{fab_pulsed} == true] ==== Pulsed FAB Draw *attention* to floating action buttons (FAB) with this subtle but captivating effect. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{fab_mini} == true] ==== Mini FAB A smaller sized, *mini* floating action button (FAB) is also available. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{fab_mini_raised} == true] ==== Mini FAB raised Mini FAB buttons can be *raised* as well by adding the additional CSS class `raised-zX`. J1 supports 25 levels of raising HTML elements ranging from 0 to 24. ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{fab_colors} == true] ==== Colors For floating action buttons (FAB), all Bootstrap button *color classes* can be applied. ++++
++++ [source, html] ---- ---- ++++
++++ [source, html] ---- ---- endif::[] ifeval::[{fab_disabled} == true] ==== Disabled FAB FAB Buttons look inactive by adding the `disabled` boolean attribute to the ` ++++ [source, html] ---- ---- ++++
++++ [source, html] ---- ---- endif::[] endif::[] ifeval::[{typography} == true] == Typography Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more. The base for all typography features is the default *font family*. J1 is using *Roboto* for the default font at a font size of *16px*. This setting is different from the standard Bootstrap configuration using the font family of *Helvetica* for the default. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography, {browser-window--new}] ifeval::[{typography_headings} == true] === Headings HTML headings provide valuable information by highlighting important topics and the structure of the document. The HTML5 standard offers six levels of heading tags, ranging from

through

. The lower the heading level, the higher its importance. Therefore

tag defines the most important heading, whereas the

tag defines the least important heading in a document. ++++

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 3 with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

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.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

++++ endif::[] ifeval::[{typography_blockquotes} == true] === Blockquotes The HTML element `
` specifies a section with content quoted from another source. Blockquotes are generally displayed with indented left and right margins, along with a little extra space added above and below. For Bootstrap, are more complex styling of cites is available with the `
` elements respectively the additional CSS class `.blockquote`. ++++

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in history
++++ endif::[] endif::[] ifeval::[{tables} == true] == Tables Creating a design for tables is challenging. The approach used by J1 Theme is based on pure CSS on top of the classic Bootstrap styles for simplicity and portability to be viewed best on all devices and browsers. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--content-tables}[Bootstrap Docs {char-middot} Tables, {browser-window--new}] ++++
Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content
++++ endif::[] ifeval::[{forms} == true] == Forms For collecting structured data, forms are essential. So-called Web forms, in short forms, are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is sent, e.g., to a web server for processing. Here are some examples to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more. Be sure to use an appropriate type attribute on all inputs (e.g., email for the email address or the number for numerical information) to take advantage of newer input controls like email verification, number selection, and more. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browser-window--new}] ++++
We'll never share your email with anyone else.
++++ Textual form controls-like ``, ` ++++ For file inputs, swap the `.form-control` for `.form-control-file`. // ++++ //
//
//
// // //
//
//
// ++++ ++++
++++ ++++
++++ ifeval::[{forms_bootstrap} == true] === Bootstrap Forms ++++
We'll never share your email with anyone else.
Radio buttons
Checkboxes
Switches
Ranges
++++ === Bootstrap Inputs ++++
Success! You've done it.
Sorry, that username's taken. Try another?
$ .00
++++ endif::[] endif::[] ifeval::[{navs} == true] == Navs Navigation available in Bootstrap shares general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. The base .nav component is built with a flexbox and provides a strong foundation for building all navigation components. It includes some style overrides (for working with lists), link padding for larger hit areas, and basic disabled styling. mdi:bootstrap[18px, mdi-md-deep-purple-400] link:{url-bs-docs--components-navs}[Bootstrap Docs {char-middot} Navs, {browser-window--new}] ifeval::[{navs_tabs} == true] === Tabs Tabs takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin. ++++

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

++++ endif::[] ifeval::[{navs_pills} == true] === Pills Take that same HTML as Tabs, but use .nav-pills class instead. ++++

Standard Pills

Stacked Pills (vertical)
++++ endif::[] ifeval::[{navs_breadcrumbs} == true] === Breadcrumbs Breadcrumbs indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Separators are automatically added in CSS through ::before and content. ++++
  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data
++++ endif::[] ifeval::[{navs_pagination} == true] === Pagination We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping