Infinite scrolling (IS), or known as endless scrolling, is a technique that loads more content as a user scrolls down the page. It allows visitors to continue reading the content by scrolling seamlessly and not by loading additional pages.

J1 Template supports infinite scrolling and is used, for example, for loading previews of blog articles.

J1 Template provides playing audio on web pages by HTML5 and supports custom players created by AmplitudeJS to playback audio individually.

Speak2Me for J1 Template is a speech synthesise (TTS) module that enables a so-called screen reader. The reader functionality allows users to sit back and listen to the browser read aloud the important contents on a Web page.

The screen reader on websites created by J1 Template is started by clicking on the speaker symbol placed top right in the menu bar.

Scroll-triggered animation (AOS) is an effective way to animate website elements such as text, graphics, photos, and video, bringing them to life as users scroll down a page. Scroll animations are more likely to grab the user’s attention, making websites look and feel more dynamic and interesting.

The Floating Action Button (FAB) is an element of Google’s Material Design. A FAB represents the primary action in an application, or triggers additional functions for a webpage. FABs are increasingly used on the web and serves to enable important actions for a page, but separated from the main navigation.

The template system supports Floating Action Buttons for in-page navigation. When the FAB is pressed, it provides more related actions like showing the content table or scrolling a page chapter-wise up and down.

Full-text search (FTS) for a website is an advanced method of searching through all documents. FTS promises fast retrieval of data with advanced indexing and more intuitive search results based on relevance.

J1 implements Lunr for indexing the whole website. The engine is designed to be small but full-featured. Lunr enables developers to provide visitors with a great search experience without the need for external, server-sided search services like Google on the internet.

Running websites in the EU and many other countries, implementing the General Data Protection Regulation (GDPR) is required to make a website compliant with the ePrivacy regulations of the European Unions and associated countries.

Under the GDPR, most cookies will fall into the category of personal data because they can identify visitors and can be used to provide website personalization and even profiling of individuals. As a result, you will need a legal basis for processing the data contained within those cookies. That legal basis is most likely going to be the CONSENT of your visitors on accepting the use of cookies.

The Template system provides a configurable GDPR compliant module to manage the consent of your visitors on cookies.

A Website translation service is useful in a wide range of situations. In today’s interconnected and global world English is no longer enough. Most online content is still written in English, while the language is just ranked 3rd in terms of the highest number of native speakers among all languages worldwide.

Source: lingohub.com

In 2015 it was necessary to support 25 languages to reach 90 percent of the entire Internet population in their native language. By 2020, a website will require localization into 48 languages to reach the same proportion of the global Internet audience.

Localization adapts a website to cultural backgrounds and local languages. Translation makes it easier for users to browse content and find what they’re looking for. An excellent user experience and understanding the language are key for building trust in the content you provide.

J1 integrates the free translation service provided by Google Translate (GT) and the professional translation services of Deepl (DT). If you want to get a larger number of international audiences, translating your site can help target your global audience more easily and quickly.

GT is fully integrated with the GDPR-compatible Cookie Consent module. If your visitors do not agree on cookies required to use Google Translate, GT gets automatically disabled, and all cookies from Google are deleted from the user’s system.

The most-top position of a web page is important; this postion is presented to your vistors very first. The Master Header (Attic) give your reader a first impression of what is presented on a page.

Attics may contains (dynamic) Text, Images or Videos to support a page for the content presented.

The clipboard is a special function of the operating system of desktop or mobile computers that temporarily stores copied text or other data in memory. Once something is stored in the clipboard, comments, the user can paste the data to a new location.

J1 integrates the clipboard functionality of your computer system to copy and paste examples or code elements from a webpage. A clipboard will help your users a lot to manage the code snippets you’ve provided.

Smooth scrolling (SSR) is an enhanced feature of J1 designed to improve scrolling and positioning on anchor links. If SSR is enabled, an animated transition is done for scrolling to headlines (anchor links) and gets exactly positioned.

When it comes to the usability of a website, your visitors' focus is on one important component: the Navigation System. The Navigation System used by J1 Template is a multi-purpose navigation builder based on the Bootstrap V5 Framework.

The NAV module for J1 consists of four configurable sub-modules:

All features are available by configuration, and no programming is needed.

A Lightbox is, in general, a helper which displays enlarged, almost screen-filling versions of images (or videos) while dimming the remainder of the page. For the J1 Template, two different lightboxes are available:

The default tool employed by J1 Template is Lightbox V2, a Javascript library written by Lokesh Dhakar.

For more complex use cases, like thumbnail gallery previews or video support, LightGallery can be used alternatively.

SwiperJS is a Javascript API that creates modern slider shows. All sliders use hardware-accelerated features like 3D transitions to perform best on modern devices. SwiperJS-based sliders are intended to be displayed at their best on all types of websites, such as those viewed on desktop computers, tablets, or smartphones.

Image and Video Galleries allow you to lay out groups of images or videos in very different ways. J1 supports JustifiedGallery is a great jQuery plugin to create responsive, infinite, and high-quality justified image galleries. The gallery uses a so-called masonry grid layout. It works by placing elements in an optimal position based on available horizontal and vertical space. Sort of like mason fitting stones in a wall.

A set of Advanced Bootstrap Modals (ABM), based on the free package of Material Design for Bootstrap, is integrated with the template system. Bootstrap modals are used to add dialogues to your web pages for user notifications.

To improve your visitor’s experience on important information that shouldn’t be missed. ABMs are a great choice to bring the user’s attention. Using the J1 Template predefined modal styles, some emotional weight is added to the information displayed. Ranging from an info level, a simple warning to critical messages.

Creating a design for responsive HTML tables is challenging. J1 integrates responsible HTML tables for Bootstrap to be used for Mobile Devices.

J1 Template implements a bunch of incubating Ruby-based extensions for Asciidoctor. Using Asciidoctor extensions, it’s easy to integrate lightboxes, galleries, icon fonts, and other complex elements using Asciidoc tags with your content pages.

Banners and panels are complex but configurable building blocks, typically used for home and landing pages. Examples how to use banners and panels can be found with the included starter web for the homepage.

To make your Blog Articles available to your vistors, J1 offers an easy to use navigation module for all your posts. The Blog Post Navigator automatically generates different views to explore articles by Categoy, Date, or all posts from an Archive View.

Banners and panels are complex but configurable building blocks, typically used for home and landing pages. Examples how to use banners and panels can be found with the included starter web for the homepage.

All pages from the roundtrip section are provided by the starter web included with the J1 Template. Many real-world examples for your content could be taken from these pages and are easy to use with your website.

All images for a Starter Web, for example, from the roundtrip section, are included with J1 Template. All images are taken from Unsplash.com as Royalty Free images and can be used without paying any license fees.

The Themes for the template system J1 are based on the free and Open Source CSS front-end framework Bootstrap of version V5. Using Bootstrap base style only 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.

Thanks to the people at Bootswatch, a great set of already prepared Bootstrap stylesheets in various designs are available on their website. There is no need to start from scratch. 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. J1 integrates all available themes from Bootswatch with the navigator module.

Comments became an integral part of almost each website on the web. People want to talk about what they currently read on your web, listen to or see. And they want it right there, under what they’ve read or seen, not on their social networks.

J1 Template supports currently two comment providers: Disqus (DQC) and Hyvor (HVC). The comment interfaces from the supported providers can be integrated by pure configuration.

Enable the provider you want to use and add your access credentials to the configuration, and you’re done. On all posts or pages you want to use for comments, the comment interface is shown automatically and can be used by your visitors.

DQC is fully integrated with the GDPR-compatible Cookie Consent module. If your visitors do not agree on cookies needed for Diqus, DQC gets automatically disabled, and all related cookies are deleted from the user’s system.

Google Analytics (GAL) provides access to a massive amount of data related to how users find and interact with your site. For example, you can see how many people visited a specific page, how long they remained there, where your users live, how certain keywords perform, and so forth.

Google Analytics is integrated by pure configuration. Simply enable the provider and set your your access credentials to the configuration, and you’re done.