Full Responsive
A great user experience is one of the most important things a website can offer, right next to good content.
A responsive website looks good and works well on every screen size, from a small mobile phone to a wide desktop monitor. J1 Template makes sure your pages adjust automatically, so visitors always get the best view of your content.
Bootstrap Integration
Visitors should not have to learn a new layout for every site they visit. That is why J1 Template is built on Bootstrap, one of the most popular frameworks for the web today. We use Bootstrap V5, the latest version, which gives you ready-made navigation menus, forms, tables, and many other building blocks that look familiar to most users.
Bootstrap takes a lot of work out of writing HTML. It also includes helpful JavaScript code for interactive parts like menus, cards, and forms.
Bootstrap Themes
The Bootstrap Themes feature in J1 is still experimental. Even so, it is a good way to show what is possible when you change the look of a Bootstrap-based site.
A theme changes how a Bootstrap site looks while keeping the same features. It does not change what each part does. A theme can change colours, fonts, font sizes, or the look of more complex parts like forms and tables. A theme can also add new components, as long as they fit Bootstrap’s rules and style.
Many people will want to change the template to fit their own ideas and build a unique website. Bootstrap’s CSS styles are the foundation that makes this possible.
The team at Bootswatch offers a great set of ready-made Bootstrap stylesheets — more than 20 designs for Bootstrap V5. So you do not need to start from scratch, re-define every Bootstrap variable, or rebuild the framework files to make a new theme. Many different styles are already prepared. Bootswatch is a great starting point for your own modifications and your own unique design.
HTML5 · CSS3 · JS
The web changes fast. Like fashion, it has new trends every year.
J1 Template uses modern web technology to help you build static sites that follow today’s standards in web development, languages, and tools.
Coding web pages
J1 uses HTML5, the latest major version of HTML. HTML is the language that describes the structure of a web page. HTML5 adds many new features and clear rules for how browsers should handle them. It also extends and improves the older versions of HTML.
HTML5 introduces application programming interfaces (APIs) that make it easier to build complex web applications. For the same reason, HTML5 is also a great choice for cross-platform mobile apps, since many of its features were designed with mobile devices in mind.
HTML5 includes many new features. It supports multimedia and graphics out of the box with the new <video>, <audio>, and <canvas> elements. It also supports SVG (Scalable Vector Graphics) and MathML (a way to display mathematical formulas), and it includes the Flex grid system for layouts.
HTML5 also lets you use semantic tags. New structure tags such as <main>, <section>, <article>, <header>, and <footer> (and many more) describe what each part of the page is for. Better-structured HTML helps people who use assistive technology, such as screen readers, to read the page more easily.
CSS (Cascading Style Sheets) is the language that controls how a page looks. It separates the content of the page from the presentation, which includes layout, colours, and fonts. This separation makes content easier to access and gives you more control over the design.
Separating the look from the content also lets you show the same page in different styles. The themes feature in J1 Template uses this idea.
CSS3 is the current version of CSS. It is split into smaller parts called modules. Each module adds new features or improves features from the older CSS2 standard. Together, HTML5 and CSS3 let you build modern, modular web pages that work on every current device, including mobile phones, tablets, and desktop computers. The new HTML5 elements and CSS3 modules can replace older tools like Adobe Flash, so you can build modern pages on open standards.
Javascript
JavaScript is a programming language used on both the client side (in the browser) and the server side. It makes web pages interactive. HTML gives a page its structure, CSS gives it its look, and JavaScript adds the actions that engage the visitor.
You can place content and add basic motion using only HTML5 and CSS3. For more complex features, such as interactive modules, you need JavaScript.
In J1, JavaScript runs mostly on the client side. A client-side script runs entirely in the visitor’s browser and does not need to talk to the server to do its job.
Some of the things JavaScript can do for a website are:
-
Load new content or data without reloading the page
-
Create rollover effects and dropdown menus
-
Animate parts of the page (fade, resize, or move)
-
Play audio and video
J1 Template comes with many built-in modules powered by JavaScript. These give your site a powerful navigation system, image galleries, lightboxes, and more. The good news: you do not need to write any JavaScript to use them.
Start in No Time
The main idea behind J1 Template is to give everyone a complete toolset to build a website. You do not need to start with web development or web design from scratch.
A J1-based site uses built-in templates and engines. They turn your content into HTML pages automatically, so you can focus on what really matters: your content.
With J1, you can start a web project right away. Just create your content. You do not need to learn the deep details of web development.
Create your Web
J1 is highly customisable. You build your website mostly through configuration. The template system uses Jekyll to generate static HTML pages from your content. Static websites are fast, secure, and simple to manage. You do not need a complex database or server-side code.
To run a static website, you only need a basic web server. To publish your site online, you can use platforms such as GitHub Pages, Netlify, or Heroku — and many of them are free.
The internet is not always a friendly place. Every public website is under attack from the moment it goes live. Static websites are robust, fast, and — most important — secure by design. Because the pages do not change after they are built, attackers cannot break them in the same way they break dynamic sites.
That is what makes static websites such a strong choice.
Modules and Apps
The basic features of a modern website are easy to predict. For Content Management Systems (CMS) like WordPress, Joomla, or Drupal, there are many add-on modules. These add features such as image galleries, video players, calendars, and more.
Static websites work a little differently. They have no central management system to plug into, so there is no big marketplace of apps and modules to install.
The good news is that adding outside components to Jekyll is not hard. One of the goals of J1 is to give you a ready-to-use toolset, so you do not need to install or set up the features people expect on a modern site.
J1 already includes a rich set of modules. They cover the common needs of any website: a flexible navigation system, a local search, lightboxes for images and videos, smooth-scroll helpers, and tools that build a table of contents (TOC) for each page automatically.