HTML Templates Documentation

Структура шаблона

Данный раздел содержит информацию о структуре шаблона и его отдельных файлов.

Структура архива

После распаковки архива шаблона, вы увидите следующую структуру файлов:

documentation

содержит файлы документации по редактированию и установке шаблона.
- documentation.html
  
  основной файл документации. Содержит ссылку на онлайн документацию, которую вы сейчас читаете.
screenshots

содержит скриншоты шаблона. Не для рабочего сайта.
site

содержит .html файлы страниц шаблона.
- bat
  
  содержит все .php скрипты, используемые в шаблоне.
- audio
  
  содержит все аудио файлы, используемые в шаблоне.
- css
  
  содержит все файлы .css, используемые в шаблоне.
- fonts
  
  содержит все нестандартные типографические и иконочные шрифты, используемые в шаблоне.
- images
  
  содержит все изображения, используемые в файлах .html.
- js
  
  содержит библиотеки JavaScript и плагины jQuery.
- video
  
  содержит все видео файлы, используемые в шаблоне.
sources

содержит исходные файлы шаблона.
- psd
  
  содержит .psd-файлы Adobe Photoshop (доступность исходных файлов PSD зависит от шаблона).
- sass
  
  содержит файлы .scss, используемые в шаблоне.
- pug
  
  содержит файлы .pug, используемые в шаблоне.
info.txt

содержит информацию о защищенной паролем папке "sources".

Структура HTML

Структура .html страниц в шаблонах строится по следующему принципу:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your Stylesheets, Core Scripts (jQuery etc) & Title -->
    ...
</head>
<body>
<div class="page">
    <!-- Page Head -->
    <header class="page-head">
        ...
    </header>

    <!-- Page Content-->
    <section>
                ...
    </section>

    <!-- Page Footer-->
    <footer class="page-footer">
            ...
    </footer>
</div>
<!-- Javascript -->
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Структура CSS

В шаблоне все стили шаблона расположены в файле style.css.

Структура файла style.css строится по следующему принципу:


        /**
        * Template Style
        *
        * [Table of contents]
        *   1. Custom styles
        *     1.1 Main Styles
        *     1.2 Typography
        *     1.3 Backgrounds
        *     1.4 Colors
        *     1.5 Main layout
        *
        *   2. Components
        *     2.1 Icons
        *     2.2 Buttons
        *     2.3 Forms
        *     2.4 Tables
        *     2.5 Lists
        *     2.6 Post
        *     2.7 Thumbnail
        *     2.8 Tooltip
        *     2.9 Snackbars
        *     2.10 Navigation
        *     2.11 Preloader
        *     2.12 Breadcrumbs
        *     2.13 Panel custom
        *
        *   3. Helpers
        *     3.1 Text-alignment
        *     3.2 Text-styling
        *     3.3 Visibility responsive
        *     3.4 Groups
        *     3.5 Context Styling
        *     3.6 Sections
        *     3.7 Offsets
        *
        *   4. Modules
        *     4.1 Flex grid
        *     4.2 Unit-responsive
        *
        *   5 Plugins
        *     5.1 Animate
        *     5.2 Isotope
        *     5.3 Owl Carousel
        *     5.4 RD Navbar
        *     5.5 RD Parallax
        *     5.6 RD Google-Map
        *     5.7 RD Search
        *     5.8 To top
        *     5.9 Tabs
        *     5.10 Photoswipe
        *     5.11 Progress-bars
        *     5.12 Counter
        *     5.13 jquery-circle-progress
        *     5.14 Timecircles
        *     5.15 Swiper
        *
        *   6. Fonts
        *     6.1 FontAwesome
        *     6.2 MDI
        **/