title: J1 Template tagline: Responsive Webs using J1 Template description: Responsive Webs using J1 Template author: J1 Team

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

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

resources: [ lightbox, carousel ] resource_options:

- toccer:
    collapseDepth:                    2

[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 confuse your audience by irritating user interface (UI) components, J1 Template is based on Bootstrap, one of the most popular HTML, CSS, and JS framework used today. J1 is using Bootstrap V4, the last current version to support your readers by common elements for navigation, data input, tables and many more.

For you development projects, Bootstrap simplifies HTML programming a lot, offer 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 and presenting content on the World Wide Web. The fifth and current major version of the HTML standard offer a lot of new features including detailed processing models to encourage more interoperable implementations. It extends, improves and rationalizes the markup available for documents and introduces markup and application programming interfaces (APIs) for complex web applications. For same reasons, HTML5 is also a good choice for modern cross-platform mobile applications, because it includes features designed with low-powered devices in mind.

Many new syntactic features are included with HTML5. To natively include and handle multimedia and graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were added. Support for scalable vector graphics (SVG) content and MathML for mathematical formulas.

To enrich the semantic content of documents, new page structure elements such as `<main>`, `<section>`, `<article>`,`<header>` or `<footer>` (and many more) are added. Better structured HTML code can help people having disabilities to read the pages presented.

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, enable multiple web pages to share formatting by specifying the relevant CSS in separate files and reduce complexity and repetition in the structural content.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

CSS3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in formaer CSS 2, preserving backward compatibility.

HTML5 in combination with CSS3 allows to create modern, modular code for Web pages that can be viewed on all modern devices like Mobiles, Tablets or the classic Desktop PC. The new HTML5 elements plus CSS3 modules can be used as a replacement for e.g. Adobe Flash to build modern Web pages 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 methods. For more complex solutions like Apps and Modules the support of Javascript is needed.

J1 Template has build-in a wide range of JS powered Apps and Modules to support a Web site 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 Web with no need to start by Web Development or Web Design from the beginning.

A Site based on J1 is structured by the underlying template methods and engines. Using J1, you can instantly start a Web project by creating you content, not by digging in the deep of Web development.

Create your Web

J1 is highly customizeable. Based on pure configuration, a unique Web can be created. J1 creates static Webs using Jekyll as the base engine. Static Webs are fast, secure but simple to manage. No complex database systems are needed.

To present a static Web, only a Web server environment is needed. To publish a Web on the Internet, many possible platforms can be used like e.g. at Github - for free!

The Internet is not a peaceful place. Every Site published to the public is attacked from the first second if published. Static Webs are robust, fast and that's import: not hackable. No offender attacking your Web is able to break your Site. Because it's static or in other words: unchangeable, unbreakable from outside.

This makes a static Web for the better.

Modules and Apps

It's predictable what base components are needed for a modern Web. For Content Management Systems (CMS) like Joomla, Wordpress or Drupal a huge number of modules are available to extend a Web 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 offer to integrate external code. There no ecosystem, no marketplace to get Apps and Modules from. It is not that complex to integrate external components into the world of Jekyll but one of the objectives of J1 is to give a featured toolset to all people without the need to install, to integrate components that are to be expected as a need.

A rich set Modules and Apps are included for common needs of a Web like a flexible navigation system, a local search, lightboxes to present pictures, little helpers for scrolling or to create TOCs (table of contents) for a page.