---
title:                                  J1 Theme
tagline:                                Creating Responsive Websites
date:                                   2020-11-03 00:00:00
description: >
                                        A good user experience browsing a Web site is one of the most important
                                        features a website offers as a must, besides excellent content. Presenting
                                        content at its best on all devices for all window sizes makes a great Web
                                        brilliant. J1 Theme supports your Web for full responsiveness, for the
                                        best user experience on all modern devices.

categories:                             [ Info ]
tags:                                   [ Info, Jekyll, Template ]

robots:
  index:                                false
  follow:                               false

image:
  path:                                 /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
  width:                                1920
  height:                               1280
  alt:                                  Photo by Alexander Andrews on Unsplash

exclude_from_search:                    true
regenerate:                             false
permalink:                              /pages/public/panels/intro_panel/

resources:                              [
                                          animate, clipboard, rouge, carousel, lightbox,
                                          justifiedGallery, lightGallery
                                        ]

resource_options:
  - attic:
      slides:
        - url:                          /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg
          alt:                          Photo by Alexander Andrews on Unsplash
          badge:
            type:                       unsplash
            author:                     Alexander Andrews
            href:                       https://unsplash.com/@alex_andrews
---

// 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 (if any)
// -----------------------------------------------------------------------------
[[responsive-design]]
== Full Responsive

[role="mb-3"]
image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}, width=1280]

A good user experience browsing a Web site is one of the most important
features a website offers as a must, besides excellent content. Presenting
content at its best on all devices for all window sizes makes a great Web
brilliant. J1 Theme supports your Web for full responsiveness, for the
best user experience on all modern devices.

// [role="skiptranslate"]
=== Bootstrap Integration

To not sidetrack your audience by irritating user interface (UI) components,
the J1 Theme is based on Bootstrap. Bootstrap is one of the most popular
frameworks for web development used today. J1 is based on Bootstrap V5,
the last current version to support your visitors by common navigation
elements, data input, tables, and many other components.

Bootstrap simplifies HTML programming a lot, offers excellent JS support
for interactive components like navigation elements, cards, forms, etc.

==== Bootstrap Themes

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

Themes for Bootstrap step in the framework to further adjust the website's
appearance based on the core CSS rules and definitions of Bootstrap. Themes
do not change the framework's functionality 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.

[role="mb-4"]
It is expected that many people will change the template for their needs. To
create unique websites. Fundamental to do this is are CSS styles
defined by Bootstrap.

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

Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
a great set of already prepared Bootstrap stylesheets (20+ for BS V5) 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 for Bootstrap. Many different styles are available.
What is already available at Bootswatch is at least a good base for your
modifications; your unique design.


[[current-technology]]
== HTML5 · CSS3 · JS

[role="mb-3"]
image::/assets/images/pages/panels/florian-olivo-1920x800.jpg[{{page.title}}, width=1280]

The Internet is a rapidly changing world. Like the fashion industries, new
trends are set every year. J1 Theme combines modern technologies for the
world of static Webs to make a site unique using current standards in terms
of web development, languages, and tools.

=== Coding web pages

J1 uses HTML5, the latest major HTML version, for structuring content
on the World Wide Web. The HTML standard's current version many new features,
including detailed processing models to support more
interoperable implementations. It extends and improves HTML markups available
in older versions.

HTML5 introduces application programming interfaces (APIs) for more complex
web applications. For the same reasons, the new HTML standard is also a good
choice for modern cross-platform mobile applications because it includes
features designed with mobile devices in mind.

Many new features are included with HTML5. To natively support multimedia and
graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
added. Besides this, *SVG* (scalable vector graphics) support an API called
*MathML* for mathematical formulas, and Flex's grid system is now available.

The new standard allows to use so-called *semantic* markup elements for your
documents. New structure elements such as `<main>`, `<section>`, `<article>`,
`<header>` or `<footer>` (and many more) were added. Better structured HTML
code can help people having disabilities to read the pages presented better.

*CSS* (cascading style sheets) is designed to enable the *separation* of
presentation and content, including layout, colors, and fonts. This separation
improves content accessibility, provides more flexibility and control for
the presentation.

Separation of formatting and content also makes it feasible to present the
same page in different styles. For example, the *themes feature* of the J1
Template makes use of this.

*CSS3*, the current standard for cascaded style sheets, is divided into
several separate components called *modules*. Each module adds new
capabilities or extends features defined in the former CSS2 standard. HTML5,
in combination with CSS3, allows creating modern and modular code for web pages
viewed on all current devices like Mobiles, Tablets, or the classic Desktop PC.
The new HTML5 elements plus CSS3 modules can replace proprietary solutions
like _Adobe Flash_ to build modern web pages based on open standards

*CSS3*, the current standard for cascading style sheets, is divided into
several separate components called modules. Each module adds new capabilities
or extends features defined in the former CSS2 standard. HTML5, in combination
with CSS3, allows creating modern and modular code for web pages that can be
viewed on all current devices like Mobiles, Tablets, or the classic Desktop
PC. The new HTML5 elements plus CSS3 modules can replace proprietary
solutions like Adobe Flash to build modern web pages based on open standards.


=== Javascript

[role="mb-3"]
image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}, width=1280]

JavaScript is a text-based programming language used on the client-side and
server-side to make web pages interactive. HTML and CSS are languages that
give structure and style to web pages, and JavaScript provides web pages
interactive elements that engage a user.

Content placement and basic methods for the dynamic of elements can be done
using pure HTML5 and CSS3. For more complex solutions like *modules* (to
provide dynamic, interactive features), the support of *Javascript* for a
webpage is needed.

JavaScript is used for J1 mainly as a client-side script engine. A client-side
script is a programming language that performs its tasks entirely on the
client's machine and does not need to interact with the server to function.

Some of the dynamic website enhancements performed by JavaScript are:

* Loading (new) content or data onto the page without reloading the page
* Rollover effects and dropdown menus
* Animating page elements such as fading, resizing, or relocating
* Playing audio and video

J1 Theme has build-in a wide range of JS-powered modules to support a
website, e.g., by a powerful navigation system, for presenting image data
in galleries, lightboxes, and so on. The good news is: no programming
JavaScript is needed to use the build-in JS-based modules.

[[launch-ready]]
== Start in No Time

[role="mb-3"]
image::/assets/images/pages/panels/no-time-1920x800.jpg[{{page.title}}, width=1280]

The base idea of the J1 Theme is to give all people a toolset at their
hands to create a website with no need to start by web development or
web design from the beginning. A website based on J1 is using build-in
templates and engines. As a result, the process to generate HTML code from
your content is done automatically and allows you to concentrate on what
truly matters: your content.

Using J1, you can instantly start a web project by creating your content and
not earning the deep of web development technologies.

=== Create your Web

J1 is highly customizable. Based on a pure configuration, websites are
created. The template system creates static web pages using Jekyll as the
base HTML code generator. Static websites are fast and secure but
straightforward to manage. No complex database systems and PHP interfaces
are needed.

For managing static websites, only a web server environment is needed. Publish
a site on the Internet, possible platforms can be used like Github, Netlify,
or Heroku, for free!

The Internet is not a peaceful place. Every site accessible from the public
is attacked from the first second if published. Static websites are robust,
fast, and that’s import: intrinsically secure. That means: not changeable.
No offender attacking your website can break your site because it’s static,
or in other words: unchangeable, unbreakable from its nature.

That makes a static website for the better.

=== Modules and Apps

It's predictable what base components are needed for a modern website. For
Content Management Systems (CMS) like WordPress, Joomla, or Drupal, many
modules are available to extend a site by, e.g., Apps like image galleries,
video players, calendars, etc.

[role="mb-4"]
That is a bit different for static webs as they don’t have a central Management
System as CMS does to integrate external code. There no ecosystem, no
marketplace to get apps and modules from.

gallery::jg_old_times[]

[role="mt-4"]
Luckily, it is not that hard to integrate external components into the world
of Jekyll. One of J1 is to give people a ready-to-use toolset without the
need to install, to integrate features that are expected as a need.

A rich set of modules are already included. The modules support usual use
cases of a website like a flexible navigation system, a local search,
lightboxes to present pictures and videos, little helpers for scrolling,
or to automatically create TOCs (table of contents) for a page.