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
        **/