---
title:                                  J1 Template
tagline:                                creating responsive websites
description: >
                                        A good user experience browsing a Web is one of
                                        the most important features a site has to offer as
                                        a must. Beside excellent content. Presenting content
                                        at it’s best on all devices, for all window sizes makes
                                        an excellent Web brilliant. J1 Template support your Web
                                        for full responsiveness, for the best user experience on
                                        all modern devices.

author:                                 J1 Team

tags:                                   [ Jekyll, Template ]
index:                                  [ Jekyll, Template, Responsive, Web ]
categories:                             [ pages ]

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

resources:                              [ lightbox, carousel ]
resource_options:
  - attic:
      padding_top:                      400
      padding_bottom:                   50
      opacity:                          0.5
      slides:
        - url:                          /assets/images/modules/attics/the-place-1920x1280-bw.jpg
          alt:                          the-place-1920x1280-bw
---


[[responsive-design]]
== Full Responsive

A good user experience browsing a Web is one of the most important features
a site has to offer as a must. Beside excellent content. Presenting content
at it's best on all devices, for all window sizes makes an excellent Web
brilliant. J1 Template support your Web for full responsiveness, for the
best user experience on all modern devices.

=== Bootstrap 4 Integration

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

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

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

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


=== HTML5 + CSS3

J1 is using HTML5 for structuring content on the World Wide Web. The current
version of the HTML standard offer a lot of new features including detailed
processing models to support more interoperable implementations. It extends
and improves HTML markups available. HTML5 introduces application
programming interfaces (APIs) for more complex web applications. For same
reasons, the new HTMLstandard 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. Beside this, support for scalable vector graphics (SVG) and an API
called MathML for mathematical formulas are 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 is designed to enable the separation of presentation and content.
Including layout, colors and fonts for example. This separation improves
content accessibility, provide more flexibility and control in 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 J1 Template
make use of this.

CSS3 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 to create 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 be used as a
replacement for *proprietary solutions* like Adobe Flash to build modern
webpages based on *open standards*.

=== Javascript

HTML5 and CSS3 can do a lot. Content placement and basic methods for the
dynamic of elements can be done using pure HTML5 and CSS3. For more
complex solutions like modules the support of Javascript is needed.

J1 Template has build-in a wide range of JS powered modules to support a
website for e.g. the navigation, for presenting image data in galeries,
lightboxes and so on.


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

The base idea of J1 Template is to give all people a tool set 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 by start learning the the deep of web development technologies.

=== Create your Web

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

To present a static website, only a web server environment is needed. To
publish a website on the Internet, many possible platforms can be used like
Github, Netlify or Heroku for example - 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: intrinsicly secure. That means: *not* changeable. No
offender attacking your website is able to break your site. Because it's
static or in other words: unchangeable, unbreakable from it's natur.

This 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 a huge
number of modules are available to extend a site by e.g. Apps like image
galleries, video players, calendars etc.

This is a bit different for static webs as they don't have a central
Management System as CMS do to integrate external code. There no ecosystem,
no marketplace to get apps and modules from.

Luckily, it is not that hard to integrate external components into the world
of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
toolset without the need to install, to integrate components that expected
as a need.

A rich set of modules are already included. The modules support common 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.