Full Responsive
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 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 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 Template 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.
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.
Thanks to the people at Bootswatch, 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.
HTML5 · CSS3 · JS
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
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.
Start in No Time
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 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.
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.
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.