CrypSimple - HTML шаблон - Документация

Описание

CrypSimple - это качественные, легкие и адаптивные HTML страницы криптовалютной тематики.

  • Современнный дизайн
  • 9 разных цветовых схем
  • Валидный и оптимизированный HTML5 и CSS3
  • CSS Grid - поддерживаемая всеми браузерами стандартная Grid система.
  • Быстрое создание своих страниц, по готовому коду.
  • Исходные файлы SCSS для разработчиков.
  • Все плагины, шрифты, PHP форма прочее включены в проект.
  • Адаптивная и кросбраузерная верстка.
  • Документация (En, Ru) и бесплатная поддержка
  • Версия: 1.1 (от 15.05.2018)
  • Тип шаблона: HTML/CSS3/jQuery
  • Grid: CSS Grid Layout
  • JS пагины: Slick / Lightbox / eTimer / ViewportChecker
  • Автор: Александр Мерк (https://themeforest.net/)
  • Демо шаблона: crypsimple

Структура папок

|-- assets
|-- | -- css/
|-- | -- img/ (авторских фото из демо нет в архиве)
|-- | -- fonts/
|-- | -- js/
|-- scss/
|-- php/
|-- ***.html

Все пути в файлах указываются от корня (html)

Начало работы

Распакуйте архив, выберите цветовую схему, подключив необходимый стиль в HTML файле:

<link rel="stylesheet" href="./assets/css/color/purple.css">

Вы можете отредактировать файл Grid стилей или оставить как есть:

<link rel="stylesheet" href="./assets/css/grid/home1.css">

Изображений и фотографий из демо нет в архиве. Используйте свои, для удобства добавления картинок мы все вынесли в HTML.
Например, чтобы поменять фоновое изображение, добавьте следующий стиль к блоку c классом section

<header class="section section-theme section-full" id="preview" style="background-image: url(./assets/img/bg-main.jpg);">

HTML

Чтобы быстро сделать свою адаптивную и красивую HTML страницу, воспользуйтесь следующим шаблоном (так построены все страницы нашего шаблона)

...
<body>
  <div class="main">
    <section class="section" id="{YOUR_ID}" style="{YOUR_IMAGE}" >
      <h1 class="section-title t-center">{YOUR_TITILE}</h1>
      <div class="container">
        <div class="block">
          {YOUR_CONTENT}
        </div>
        <div class="block">
          {YOUR_CONTENT}
        </div>
      </div>
    </section>
  </div>
</body>
...

Для стилизации блока, вы можете воспользоваться базовыми классами:

.section - обязательный класс
.section-white - белый фон
.section-theme - цвет фона зависит от подключенного стиля цвета
.section-gray - серый цвет фона
.section-black - черный цвет фона, как у футера
.section-full - блок на всю высоту экрана
.section-fixsize - блок с фиксированной высотой (min-height: 300px;)

Grid

Изначально блоки .block из предыдущего примера встанут горизонтально друг за другом.

Чтобы задать их вертикально или задать им определенный размер или положение, воспользуйтесь файлом стилей из папки /grid/, который вы подключили в пункте начало работы

<link rel="stylesheet" href="./assets/css/grid/home1.css">

Например, нам нужно сделать 1-ый блок 300px, а 2-ой на всю ширину, которая осталась:

#{YOUR_ID} .container {
  grid-template-columns: 300px 1fr;
}

Используйте и другие возможности стандартного CSS Grid. Читать документацию по CSS Grid

Color

Чтобы изменить цветовую тему сайта, подключите необходимый css стиль

<link rel="stylesheet" href="./css/color/purple.css">

Все цвета доступны здесь /css/color/

Чтобы задать свой цвет (а в нашем случае это два цвета)

1 вариант - взять css файл со стилем цвета, создать на основе него новый и заменить коды цветов на свои

2 вариант - воспользоваться исходным файлом /scss/color/color.scss

Image

Чтобы сделать изображение адаптивным, добавьте класс:

<img src="./img/app.png" alt="" class="responsive-img">

Увеличить изображение по клику:

<a href="./assets/img/shortnews1.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
  <img class="responsive-img mini-img" src="./assets/img/shortnews1.jpg" alt="">
</a>

Сделать фото галерею со слайдером изображений:

<div class="img-list slider-autoplay" height="200px">
  <a href="./assets/img/shortnews1.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews1.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews2.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews2.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews3.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews3.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews4.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews4.jpg" alt="">
  </a>
  <a href="./assets/img/shortnews5.jpg" data-lightbox="set" data-title="Click the right half of the image to move forward.">
    <img class="responsive-img mini-img" src="./assets/img/shortnews5.jpg" alt="">
  </a>
</div>

Данный функционал реализован через библиотеку LightBox читать документацию

Font and Icon

В данной сборке CrypSimple 1.0, в папке ./fonts/ 3 бесплатных шрифта, внутри каждого есть лицензия и документация

Все они подключаются отдельно и скачены в проект

<link rel="stylesheet" href="./fonts/fontawesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="./fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="./fonts/quicksand/css/quicksand.css">
                

Подключение согласно документации каждого шрифта

<i class="fab fa-apple"></i>
<i class="flaticon-046-network"></i>
                

Slider

В нашем шаблоне используется бесплатный слайдер Slick

Внедрить данный слайдер можно в любом месте проекта, где структура кода:

<div class="slider-name">
  <div>...</div>
  <div>...</div>
</div>

Напишем настройки для нашего слайдера в main.js

$('.slider-name').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 4000,
});
              

Пример слайдера показан в галерее в разделе Image

Другие настройки вы можете посмотреть в документация к слайдеру Slick

Button

Цвета кнопок зависят от выбранной цветовой схемы

Если вы используете группу кнопок, то их можно обернуть в div c классами .btn-line - выравнивание, .btn-line-gap - отступы

Tab

<div class="tab">
  <ul class="tab-nav">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
  </ul>
  <div class="tab-content active">
    <p>Content Tab 1</p>
  </div>
  <div class="tab-content">
    <p>Content Tab 2</p>
  </div> 
</div>
              
  • Tab 1
  • Tab 2

Content Tab 1

Content Tab 2

Pop-up

Создаем Pop-up:

<div id="{YOUR_MODAL_ID}" class="modal-form">
  <div class="modal-content">
    <div class="modal-close"><i class="fas fa-times"></i></div>
    <div class="modal-title t-center">{YOUR_MODAL_TITLE}</div>
    <div class="modal-body">
      {YOUR_MODAL_CONTENT}
    </div>
  </div>
</div>

Вызываем Pop-up:

<a href="#" data-modal="#{YOUR_MODAL_ID}" class="open-modal">{YOUR_LINK_NAME}</a>

Php + ajax Форма

Форма для связи уже встроена в проект, чтобы она заработала В файле ./php/sender/form.php измеите следующие поля:

$to = "youb@mail.com"; // Your email
$subject = 'Message by CrypSimple!'; // E-mail subject
$headers .= "From: CrypSimple <youb@mail.com>\r\n"; // Your name and email

Это простая форма служит для демонстрации работы и удобства покупателя. С точки зрения безопасности мы не рекомендуем её к использованию.

Обновление HTML шаблона

ВАЖНО: Создайте резервную копию своего проекта перед любым обновлением.
Настоятельно рекомендуется создавать собственные файлы css / js, если вы вносите изменения.

По всем вопросам и багам, обращайтесь к разработчику themeforest.net