A quickstart guide for Showcase theme.
Unzip the theme folder and you'll see the next file structure:
dist- production files
Then run the following npm command to install all the theme's dependencies:
Showcase uses Browsersync to serve pages from the dist directory. Running gulp will compile the theme, copy all required files to the dist directory and will open a browser window to
The theme uses Nunjucks as a template engine, basically to include partials (header, footer...). Gulp renders Nunjucks templates to HTML.
Once your files are ready for production, you can remove all unused CSS using purgecss. To do it just run the following command:
Purgecss analyzes the HTML and Bootstrap JS files and removes unused CSS content. Your CSS file size will be greatly reduced.
The basic template is a guideline for how to structure your pages when building with this theme.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Google Fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,400i,500" > <!-- CSS --> <link rel="stylesheet" href="assets/css/style.css"> <title>Showcase - Bootstrap Theme</title> <!-- JS --> <script src="assets/js/jquery.slim.min.js" defer></script> <script src="assets/js/popper.min.js" defer></script> <script src="assets/js/bootstrap.min.js" defer></script> </head> <body> <!-- Main content --> </body> </html>
Remember to add the
defer attribute in order to execute the scripts after the page has been rendered.