title: J1
Template tagline: creating responsive websites date: 2020-11-03 00:00:00 +100 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 Template 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
exclude_from_search: true
comments: false fam_menu_id: page_ctrl_simple
permalink: /pages/public/panels/intro_panel/ regenerate: true
resources: [
clipboard, rouge, carousel, lightbox, justifiedGallery, lightGallery ]
resource_options:
- attic: padding_top: 400 padding_bottom: 50 opacity: 0.5 slides: - url: /assets/images/modules/attics/jessica-ruscello-1920x1280.jpg alt: responsive-text-1920x1280 badge: type: unsplash author: Alexander Andrews href: https://unsplash.com/@alex_andrews
// Page content // =============================================================================
- [responsive-design]
-
Full Responsive¶ ↑
- role=“mb-3”
-
image::/assets/images/pages/panels/responsive-text-1920x800.jpg
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
Template supports 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, the
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 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.
- [current-technology]
-
HTML5 · CSS3 · JS¶ ↑
- role=“mb-3”
-
image::/assets/images/pages/panels/florian-olivo-1920x800.jpg
The Internet is a rapidly 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 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
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
Template 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
The base idea of the
J1
Template 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 onJ1
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 usingJekyll
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.
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[]
Luckily, it is not that hard to integrate external components into the world of
Jekyll
. One ofJ1
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.
-