Bootstrap styles for the J1 are based on the free and open-source CSS front-end framework of version V5. The Bootstrap theme feature enables the presentation of different versions of the same site using already prepared Bootstrap CSS styles.
Bootstrap is an HTML, CSS and Javascripts Library that focuses on simplifying the development of modern web pages. The primary purpose of applying the framework to J1 is to provide a general standard for colors, sizes, fonts, and the overall layout of a J1-based site.
Using Bootstrap themes results in a uniform appearance for the content in terms of the overall layout, text, tables, and form elements across all modern web browsers available on the market. In addition, developers can take advantage of CSS classes defined in Bootstrap to customize content individually.
The Themes Menu
Styles adjust the website’s appearance based on the core CSS rules and definitions of Bootstrap. Styles 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 style may add additional components to extend the Bootstrap’s framework.
Modifying the CSS styles of Bootstrap is not rocket science. But, to be honest, some knowledge is needed for the CSS technology to do so. We encourage you to spend some time first on learning CSS. To learn what is the design base of each and every website.
Thanks to the people at Bootswatch, a great set of already prepared Bootstrap stylesheets in various designs are available on their website. There is no need to start from scratch. It is not needed to re-define all the Bootstrap variables, and rebuild the framework files to create a new style. Many different styles are available. What is already available at Bootswatch is at least a good base for your modifications; your unique design.
Besides the bunch of different stylesheets at Bootswatch, an Integration API is provided that helps a lot to integrate available designs into an existing site. This API is the base to integrate selectable Bootswatch stylesheets into the J1 Theme navigation system for easy use.
Apply a Style
The base for designing pages using the J1 Theme is the style Uno, a modern light CSS layout used for many types of websites. And what we mentioned already, web design is not: one size fits all. The style Uno can be seen as a good base, a starting point. Combining Uno and a different styles may be a fast solution for your site!?
You can find all available styles and stylesheets on your pages from the menu Themes. You’re invited to check how a page is changing for its design if other stylesheets, other ideas of web design are used.
| Changing BS-based styles is one thing. Changing from one style to the next at runtime is a bit more challenging. For the current version of the J1 Theme, many styles are automatically changed for J1 specific components, but not all of them for now. |
Select a style from this menu, and a new BS-based stylesheet is automatically applied to your pages.
What next
The search option for the J1 Theme is based on the search engine Lunr and is fully integrated with the template. Lunr is designed to be lightweight yet full-featured to provide users with a great search experience. Using Lunr for a Jekyll website, there is no need to integrate complex external, server-sided search engines like Google or Bing.
Visitors should be able to search your site to find pages and posts they are interested in. Usability is one of the top criteria for all visitors browsing your site. A good user experience and excellent content are key factors for the success of a website. Nothing in this business is guaranteed, but user experience efforts are good reasons your readers will return.
Check what is searching a J1 website all about at Lunr Search.