# University - Bootstrap 4 Education template

Template version 1.1.1

## Introduction

- Item Name : University - Bootstrap 4 Education template
- Item Version : v 1.1
- Author : Ondrej Svestka
- Contact email : ahoj@ondrejsvestka.cz

Hello,
thank you for downloading. I hope you wil enjoy working with the template.
You are entitled to get free lifetime updates to this product.

This documentation is to help you with template's customization. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

### Requirements

You will need the following sofwares to customize this template.

1. Code Editing Software (eg: Dreamweaver, Sublime Text, Visual Studio Code)
2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
3. FTP Tool to upload files to Server (eg: FileZilla)

## Getting started #back to top

This template uses Bootstrap 4 CSS framework, a powerful tool to help you building great websites in a short time.

### Template's directory structure

- HTML files - HTML files are located in the root folder. These are index.html, category.html, etc.
- `/css` - CSS files including Bootstrap CSS, CSS for the components and main template stylesheets
- `/icons-reference` - Custom icons list and sources
- `/fonts` - Font Awesome icon font
- `/img` - Images for demo purposes. Mostly replaced by placeholder images in the download archive.
- `/js` - Javascript files
- `/scss` - SCSS source files for easier customization

## CSS #back to top

### Switching colour variant

The theme stylesheet is `css/style.default.css`. Colour variants are named accordingly, to use a different colour variant, just replace link to the `style.default.css` with e.g. `style.pink.css` in the `<head>` element in HTML files.

### Custom CSS code

I suggest placing your changes and CSS declarations in `custom.css` file. This way, you will keep your code separated and you can update the original template stylesheet if an updated is released.

## SCSS #back to top

### What is SASS and SCSS

This template contains its SCSS source codes too. These can be very handy when you would want to create your own custom colour variant, create a new button style and similar situations.

If you are completely new to SASS, check out their official website and download a compiler for your OS. SASS uses a bit different syntax than CSS but you should not have a problem working with it if you understand CSS.

### File structure

The easies way to change theme colours, fonts and any CSS rules in general is by editing the SCSS files.

In the SCSS directory, there is a main file `style.default.scss` or its colour variants. In these files, we just define which of the predefined colours will be used and the rest is done by `core.scss` file. It takes control of all the necessary module includes. The modules (blog, pages, etc.) are located in the modules subdirectory.

    _core.scss (core file handling all the includes)
    _theme.scss (main Bootstrap components based on settings in the variable file)
    style.default.scss (main file)
    style.blue.scss (main file)
    style.green.scss (main file)
    style.pink.scss (main file)
    style.red.scss (main file)
    style.sea.scss (main file)
    style.violet.scss (main file)

    -- <modules> (includes all partials included in the main stylesheets - style.default.scss, etc.)

    ---- _general.scss - generic styling of the template -buttons, header, footer, sections..
    ---- _mixins-custom.scss - my custom mixins
    ---- _mixins.scss - Bootstrap 4 mixins (included from the mixins directory)
    ---- _variables-custom.scss - file based on the Bootstrap 4 variables file.
    ---- _blog.scss
    ---- _blogpost.scss
    ---- _contact.scss
    ---- _course-details.scss
    ---- _courses.scss
    ---- _staff.scss
    ---- _demo.scss - styles for the demo purposes only

    ---- <mixins> (original Bootstrap 4 mixins)

## JavaScript #back to top

### Main JavaScript file

Main template file is called `js/front.js` and takes care of the following tasks. Most of them can be reconfigured there too.

- Search popup
- Carousels initialization and settings
- Google maps on the contact form

## Google Maps #back to top

### API key

Provided Google API key is OK for localhost but will not work on production server. You will need to generate your own API key at https://developers.google.com/maps/documentation/javascript/get-api-key.

Replacing API key:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

## Credits #back to top

- Bootstrap
- Font Awesome icon font
- Google Fonts Open Sans
- Bootstrap select
- Swiper
- Lity
- Custom icon font: Created with Fontastic with free SVGs from FlatIcon
- Images from Pexels, more in credits.txt

## Version History (Changelog) #back to top

    -----------------------------------------------------------------------------------------
    Version 1.1.1 - 2019/02/18
    -----------------------------------------------------------------------------------------

    - template upgraded to Bootstrap 4.3.1
    - plugins updated: Bootstrap Select (1.13.5), PopperJS (1.14.7),
      Swiper (4.4.6)

    -----------------------------------------------------------------------------------------
    Version 1.1 - 2018/06/20
    -----------------------------------------------------------------------------------------

    - template upgraded to Bootstrap 4.1.1
    - plugins updated: Bootstrap Select (1.13.1), Lity (2.3.1), PopperJS (1.14.3),
      Swiper (4.3.3)

    -----------------------------------------------------------------------------------------
    Version 1.0 - 2018/02/21
    -----------------------------------------------------------------------------------------

    - Initial release