#Jekyll Bootstrap Carousel Landing Page

Build from Jekyll Bootstrap Starter Template

Based on Bootstrap Carousel Example

Photos from Pexels

{hello world codesandvox} tets commit push

Jekyll Template

This is a template for Jekyll and Bootstrap 4 using Filament Group's LoadJS and LoadCSS so you can get fast loading site.

I've built this using recommendations from google page speed insights. (Say what you want about that).

It includes jekyll-livereload for easy development.

Here is a barebones version without Bootstrap

Set up

• Run bundle
• Run jekyll serve

That's it.

Adding JS and CSS

CSS

To load additional css files use...

<link rel='preload' href='/path/to/stylesheet.css' as='style' onload='this.rel="stylesheet"'> <noscript><link rel='stylesheet' href='/path/to/stylesheet.css'></noscript>

as per LoadCSS.

For custom styles, place all sass files in assets/_sass and use @import 'filename' with no extension in the assets/css/main.scss

JS

For adding JS files see the instructions in assets/js/loader.js. It is designed to load files asynchronous and prevent render blocking.

Recomendations

I like to put any important styles in the _inludes/prority-css.html file. This is mostly to prevent flashes of un-styled content.

Use Favicon Generator to generate your own favicon. Replace all the files in the root folder with the ones it generates for you. The theme colour can be changed in the _includes/head.html file.

Props and Thanks to...

• Filament Group's LoadJS and LoadCSS
• penibelst's HTML Compression
• jpeg.io for image compression
• tiny png for png compression
• Favicon Generator Bootstrap 4