Корзина:
руб.

Полезные ссылки

svg -> background-image

Трансформация шрифтов (transfonter)

http://liquidhub.ru/

Генератор градиентов

Генератор регулярных выражений

jQuery методы на ванильном js

Если нужно скрыть верстку от клиента

if ($.cookie('dev')) {
  $('body').show()
}else{
  if (window.location.href.indexOf('dev=true') == -1) {
    $('body').remove();
  }
}

if (~window.location.href.indexOf('dev=true')) {
  $('body').show();
  $.cookie('dev', true, {
    path: '/'
  });
}

Переменные

project\scss_import\variables\

Цвета



Spider.css

Если $gutter-width-primary == 0. При уменьшении экрана к .container все равно добавляются паддинги.

.container
  .row
    .cell-4
    .cell-4
    .cell-4
cell-4
cell-4
cell-4
.row.is-stretch
  div
  div
  div
  div
is-stretch
is-stretch
is-stretch
is-stretch
.container
  .row.is-grid
    .cell-4
    .cell-4
    .cell-4
cell-4
cell-4
cell-4

Кнопки

project\bundles\css\base\buttons.scss



Links

inputs

  <button class="bttn">В корзину (bttn)</button>
  <button class="bttn-prim">В корзину (bttn-prim)</button>
  <button class="bttn-second">В корзину (bttn-second)</button>
  <button class="bttn-transparent">Быстрая покупка 1 (bttn-transparent)</button>
  <button class="bttn-transparent-second">Быстрая покупка 1 (bttn-transparent-second)</button>
  <button class="bttn-fill">Быстрая покупка (bttn-fill)</button>
  <button class="bttn-fill-second">Быстрая покупка (bttn-fill-second)</button>

.page-title

project\bundles\css\base\page.scss

Заголовок страницы

Заголовок страницы

Заголовок страницы

Заголовок страницы
Заголовок страницы
<h1 class="page-title">Заголовок страницы</h1>
<h2 class="page-title">Заголовок страницы</h2>
<h3 class="page-title">Заголовок страницы</h3>
<div class="page-title">Заголовок страницы</div>
<span class="page-title">Заголовок страницы</span>
    

Уведомления

project\bundles\css\base\notice.scss

После настройки удалить из темы компонент style_guide!

Удобная настройка в одном компоненте

Развиваем проект обратной связью

Сообщаем о багах

<div class="notice is-warning">
  <p>
    После настройки удалить из темы компонент <strong>style_guide</strong>!
  </p>
</div>
<div class="notice is-success">
  <p>
    Удобная настройка в одном компоненте
  </p>
</div>
<div class="notice is-info">
  <p>
    Развиваем проект обратной связью
  </p>
</div>
<div class="notice is-error">
  <p>
    Сообщаем о багах
  </p>
</div>

Alertify

project\bundles\css\base\alertify.scss

  $('[data-alert-success]').click(function(event) {
    alertify.success('Товар добавлен в корзину', 10)
  });
  $('[data-alert-error]').click(function(event) {
    alertify.error('Ошибка при отправке формы', 10)
  });
  $('[data-alert-warning]').click(function(event) {
    alertify.warning('Товар удален', 10)
  });
  $('[data-alert-message]').click(function(event) {
    alertify.message('Все поля обязательны для заполнения', 10)
  });

pagination

project\bundles\css\base\pagination.scss

  <ul class="pagination">
    <li class="pagination-item is-current">
      <span class="pagination-link">
        1
      </span>
    </li>
    <li class="pagination-item">
      <a href="/collection/tolstovki?page=2" class="pagination-link">
        2
      </a>
    </li>
    <li class="pagination-item">
      <a href="/collection/tolstovki?page=3" class="pagination-link">
        3
      </a>
    </li>
    <li class="pagination-item">
      <a href="/collection/tolstovki?page=2" class="pagination-link">
        <i class="fa fa-angle-right"></i>
      </a>
    </li>
    <li class="pagination-item">
      <a href="/collection/tolstovki?page=3" class="pagination-link">
        <i class="fa fa-angle-double-right"></i>
      </a>
    </li>
  </ul>

breadcrumb

project\bundles\css\base\breadcrumb.scss

<div class="breadcrumb-wrapper">
  <ul class="breadcrumb">
    <li class="breadcrumb-item home">
      <a class="breadcrumb-link" title="Главная" href="#">Главная</a>
    </li>
    <li class="breadcrumb-item">
      <a class="breadcrumb-link" title="LOOKBOOK" href="#">Каталог 1</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-link current-page">Вложенный каталог 1</span>
    </li>
  </ul>
</div>

Чекбокс

project\bundles\css\base\chkbx.scss

Инпут .chkbx стоит заворачивать в тег label.

    <div>

          <label class="chkbx-label">
            <input class="chkbx" type="checkbox" value="11111" name="characteristics[]">
            <span class="chkbx-control"></span>
            <span>Белый</span>
          </label>

          <label class="chkbx-label">
            <input checked class="chkbx" type="checkbox" value="22222" name="characteristics[]">
            <span class="chkbx-control"></span>
            <span>
              Белый
              <br>
              Красный
              <br>
              Синий
            </span>
          </label>

        </div>
        <div>
          <p>
            <label>
              <input class="chkbx" type="checkbox" value="33333" name="characteristics[]">
              <span class="chkbx-control"></span>
            </label>

            <label>
              <input checked class="chkbx" type="checkbox" value="44444" name="characteristics[]">
              <span class="chkbx-control"></span>
            </label>

            <label>
              <input disabled class="chkbx" type="checkbox" value="55555" name="characteristics[]">
              <span class="chkbx-control"></span>
            </label>
          </p>
          <p>
            <input type="checkbox" value="66666" name="characteristics[]">
            <input checked type="checkbox" value="77777" name="characteristics[]">
            <input disabled type="checkbox" value="88888" name="characteristics[]">
          </p>
        </div>

Селекты

project\bundles\css\base\select.scss

<select class="slct" name="select">
 <option value="111">111</option>
 <option value="222">222</option>
 <option value="333">333</option>
</select>

inpt-group

project\bundles\css\base\input-group.scss

    <p>
      <form class="inpt-group">
        <input class="inpt-control inpt" type="text" name="city" value="" placeholder="Ввести свой город">
        <button type="submit" name="button" class="bttn-prim inpt-group-addon">
          Обновить
        </button>
      </form>
    </p>

    <p>
      <form class="inpt-group">
        <button type="submit" name="button" class="bttn-second inpt-group-addon">
          Подписаться
        </button>
        <input class="inpt-control inpt" type="email" name="email" value="" placeholder="Ввести свой email">
      </form>
    </p>

    <p>
      <form class="inpt-group">
        <a href="/search" class="bttn-prim inpt-group-addon">
          <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <input class="inpt-control inpt" type="text" name="q" value="" placeholder="Поиск">
        <button type="submit" name="button" class="bttn-prim inpt-group-addon">
          Найти
        </button>
      </form>
    </p>

 

Считалка

project\components\quantity\scss\quantity.scss

project\bundles\css\base\buttons.scss

+ -

    <div class="quantity is-product">
      <div class="quantity-controls">
        <button class="quantity-control bttn-count">
          -
        </button>

        <input class="quantity-input" type="text" name="quantity" value="1">

        <button class="quantity-control bttn-count">
          +
        </button>
      </div>
    </div>

Избанное

project\bundles\css\base\buttons.scss

<button class="bttn-favorite"></button>
<button class="bttn-favorite is-added"></button>

Кнопки сравнения

project\bundles\css\base\buttons.scss

Счетчик
<button class="bttn-compares is-icon" data-compares-trigger="{{ product.id }}">
  <i class="fa fa-exchange" aria-hidden="true"></i>
</button>
<button class="bttn-compares is-bg" data-compares-trigger="{{ product.id }}">
</button>

<button class="bttn-compares" data-compares-trigger="{{ product.id }}" data-compares-added="Удалить из сравнения" data-compares-not-added="Добавить в сравнение">
</button>

<button class="bttn-prim" data-compares-add="{{ product.id }}">
  Добавить
</button>

<button class="bttn-second" data-compares-remove="{{ product.id }}">
  Удалить
</button>

<div>
  Счетчик <span data-compares-counter></span>
</div>

 

рейтинг

project\bundles\css\base\star-rating.scss

<div class="star-rating-wrapper">
  <div class="star-rating">
    {% assign r = 5 %}
    {% for i in (1..5) %}
      <input name="review[rating]" id="star{{ r }}-{{ product.id }}" type="radio" name="reviewStars" class="star-radio"
             value="{{ r }}"/>
      <label title="{{ r }}" for="star{{ r }}-{{ product.id }}" class="star-label"></label>
      {% assign r = r | minus: 1 %}
    {% endfor %}
  </div>
</div>

<div class="star-rating-wrapper">
  <div class="star-rating">
    <span class="star-item"></span>
    <span class="star-item active"></span>
    <span class="star-item"></span>
    <span class="star-item"></span>
    <span class="star-item"></span>
  </div>
</div>

Мобильные панели

    <button type="button" class="bttn-fill" data-open-mobile-menu >
      Открыть панель слева
    </button>
    <div class="hide">
      <div class="mobile_menu">
        {% for collection in collections.all.subcollections limit: 5 %}
          <nav>
            <ul>
              <li>
                <a href="{{ collection.url }}">
                  {{ collection.title }}
                </a>
              </li>
            </ul>
          </nav>
        {% endfor %}
      </div>
    </div>

    <script type="text/javascript">
    $(document).on('click', '[data-open-mobile-menu]', function(event) {
      event.preventDefault();
      alertify.panel({
        target: '.mobile_menu',
        position: 'left'
      });
    });
    </script>

Инпуты

project\bundles\css\base\inputs.scss

<input class="inpt" type="text" value="text">

Изображения

\project\bundles\css\base\images.scss

is-square
is-rectangle
is-rounded
is-simple
is-wide

Изображение с модификатором is-cover

is-square
is-rectangle
is-rounded
is-simple
is-wide
<div class="image-container is-square">
  <img src="image.jpg">
</div>
<div class="image-container is-square is-cover">
  <img src="image.jpg">
</div>

Drop

item 1
item 1.1
item 1.2
.drop
  div
    | item 1
  .drop-target
    div
      | item 1.1
    div
      | item 1.2

Табы

dataTabs

Описание
Отзывы (7)
test
30.11.2016 09:52

test

test
30.11.2016 09:42

test

test
30.11.2016 09:41

test

test
30.11.2016 09:41

test

test
30.11.2016 09:40

test

test
30.11.2016 09:40

test

ПЕТЯ
14.10.2016 12:18

tertetetrert

Убежденность некоторых оппонентов позволяет оценить значение укрепления моральных ценностей. Лишь реплицированные с зарубежных источников, современные исследования лишь добавляют фракционных разногласий и обнародованы.

В своем стремлении улучшить пользовательский опыт мы упускаем, что действия представителей оппозиции формируют глобальную экономическую сеть и при этом - подвергнуты целой серии независимых исследований. Семантический разбор внешних противодействий прекрасно подходит для реализации стандартных подходов. Современные технологии достигли такого уровня, что высококачественный прототип будущего проекта требует от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Принимая во внимание показатели успешности, социально-экономическое развитие обеспечивает актуальность системы обучения кадров, соответствующей насущным потребностям.

В целом, конечно, высокотехнологичная концепция общественного уклада обеспечивает широкому кругу (специалистов) участие в формировании вывода текущих активов. Также как высококачественный прототип будущего проекта представляет собой интересный эксперимент проверки форм воздействия. Повседневная практика показывает, что новая модель организационной деятельности предопределяет высокую востребованность укрепления моральных ценностей. Разнообразный и богатый опыт говорит нам, что постоянный количественный рост и сфера нашей активности требует от нас анализа распределения внутренних резервов и ресурсов. А еще базовые сценарии поведения пользователей, инициированные исключительно синтетически, ассоциативно распределены по отраслям. Значимость этих проблем настолько очевидна, что убежденность некоторых оппонентов позволяет оценить значение своевременного выполнения сверхзадачи.

Следует отметить, что понимание сути ресурсосберегающих технологий напрямую зависит от благоприятных перспектив. Задача организации, в особенности же внедрение современных методик позволяет выполнить важные задания по разработке распределения внутренних резервов и ресурсов. Сложно сказать, почему явные признаки победы институциализации могут быть подвергнуты целой серии независимых исследований. В рамках спецификации современных стандартов, активно развивающиеся страны третьего мира представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть представлены в исключительно положительном свете.

    <div class="js-tabs" data-tabs-container>
      <div>
        <button data-tab-anchor="1" type="button" data-tab-active>
          Первая вкладка
        </button>
        <button data-tab-anchor="2" type="button">
          Вторая вкладка
        </button>
      </div>

      <div>
        <div data-tab-target="1">
          Содержимое первой вкладки
        </div>
        <div data-tab-target="2">
          Содержимое второй вкладки
        </div>
      </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function() {
      $('.js-tabs').dataTabs();
    });
    </script>

Нативные элементы

Инпуты
























Заголовки

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Employee Salary
Jane $1 Because that’s all Steve Job’ needed for a salary.
John $100K For all the blogging he does.
Jane $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Jane $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag

The acronym ftw stands for “for the win”.

Big Tag

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” – Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the tag.

Preformatted Tag

This tag styles large blocks of code.

\n.post-title {
      margin: 0 0 5px;
      font-weight: bold;
      font-size: 38px;
      line-height: 1.2;
    }  

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag

This rarely used tag emulates teletype text, which is usually styled like the tag.

Variable Tag

This allows you to denote variables.




Гайд

Установка

Заходим сюда https://bitbucket.org/insalesDesign/insales-template-builder/src

Скачиваем проект. Ссылка на скачивание

по классике устанавливаем пакеты nodejs через

npm i


Настройка

Собираем тему командой

gulp theme:deploy

Собранная тема лежит в \theme, её нужно заархивировать в zip и залить в магазин.
После загрузки берем id темы и настраиваем аплоадер.

Настройка аплоадера происходит тут gulpfile.js\config\uploader.json, внутри файла необходимо выставить "use": true


Запуск

Запускаем сборщик командой

gulp

Когда тема уже собрана, то повторное включение сборщика делаем через команду

gulp theme:watch


Контент из макета

Изображения и иконки кладем в /project/media/{создаем папки по смыслу по примеру папки icons}

Шрифты кладем в /project/fonts/{создаем папку с названием шрифта}

Шрифты предварительно конвертируем во все нужные форматы + генерим css через transfonter
Шрифт system можно оставить как шрифт который отображается до загрузки кастомных.


Переменные

Проставляем переменные в \project\scss_import\variables.variables.scss.


Типографика & UI

Настройка UI и типографики на сколько возможно перенесено в project\bundles\css\base,
html, body - настраиваются в \project\bundles\css\base\_layout.scss
Что где править описано в style_guide.liquid

После настройки базовых элементов представленых в компоненте style_guide, этот компонент нужно удалить, чтобы не было мусора.

Spider находится в C:\insales-template-builder-master\project\bundles\css\spider, там нужно настроить container в зависимости от макета.
Сгенерировать сетку со своими брейк поинтами


Компоненты

Каждый компонент лежит в отдельной папке внутри директории components.

Компонент может содержать:

  • /{Название сниппета}.liquid
  • /{Название js файла}.js
  • /scss/{название scss файла}
  • /plugins/{название плагина}/{файлы плагина}
  • /setup/{setup для компонента}.json

Весь каталог
Лучшие предложения дня
Тойс бутик, это интернет магазин
премиальных детских игрушек и аксессуаров

Мы продаем только оригинальные детские игрушки, куклы и аксессуары Дисней (Disney), Маттел (Mattel), Diamond select и многих других лучших мировых производителей детских игрушек!

 

Все  игрушки и аксессуары представленные на сайте закупаются напрямую у производителей, что позволяет нам удерживать комфортные цены — без переплат и многочисленных торговых наценок. Все они выполнены из безопасных материалов, долговечны, отвечают мировым стандартам качества и экологичности. Любая из них станет отличным подарком для ребенка или подростка, поможет ему прикоснуться к волшебному миру любимых сказок, фильмов и комиксов.

 

В нашем интернет магазине Тойс-Бутик.ру Вы сможете купить настоящие игрушки и куклы Дисней из США, Монстер Хай (Monster High), фигурки Марвел, рюкзаки и сумки Loungefly, школьные товары и принадлежности, оригинальные кружки прямо из Диснейлэнда и много еще интересного.

 

Мы работаем, чтобы превратить повседневность в волшебную сказку. Приобретайте только оригинальные товары для Ваших детишек.

 ____

Подарите детям детство!

С уважением,   директор интернет магазина Toys-Boutique.ru

Роман Глущенко 



 

Наш сайт прочно занимает первое место в Российском рунете по продаже премиальных детских игрушек* Весь ассортимент поставляется нам из США и Европы и является эксклюзивным на российском рынке!

 

Мы дорожим репутацией и у нас никогда не будет подделок! Это наш принцип!

 

Доставка осуществляется по всей России. Просматривайте различные предложения и акции, делайте свой выбор и завершайте покупку через корзину. В рабочее время вы также можете позвонить нам по телефону или заказать звонок менеджера. Они с радостью ответят на все вопросы, помогут определиться с покупкой и примут заявку.

 

 

 

 

Развернуть
Подробнее
Отзывы наших покупателей
pic
Татьяна Волошина
г. Санкт-Петербург

Самое главное, что все игрушки оригинальные, делаю покупку и уверена в качестве на 100%. На прошлой неделе получила уже третий заказ из магазина. Купила для племянника фигурку Магнето. Детализация на высшем уровне, ребенок в восторге!

05.09.2018

https://vk.com/id497057880

pic
Ирина Фомина
г. Москва

Нравится делать у вас покупки для своих детей. Всегда уверенна, что игрушки качественные и безопасные. На прошлой неделе, получила заказанный набор мини-кукол Дисней 'Рапунцель'! Отличное оригинальное качество, приятно знать, что дети играют только лучшими игрушками. Хочу сказать спасибо за быструю доставку, которая заняла всего 2 дня. Уже подбираю игрушки для следующего заказа!

19.06.2018

https://vk.com/id479397634

pic
Екатерина Титова
г. Москва

Сервис в магазине всегда на высшем уровне. Покупаю в магазине куклы Дисней уже не первый раз и никогда никаких нареканий. По ценам могу сказать сразу, что тут намного дешевле, чем в других магазинах. Игрушки всегда качественные, без посторонних запахов. Покупала дочке и племяннице кукол, они в восторге. Ну вот ассортимент бы побольше, а в целом магазином очень довольна!

13.07.2018

https://vk.com/id494892661

pic
Дарья Мочалкина
г. Сызрань

Заказывала здесь рюкзак для племянницы. Очень довольна покупкой. Качество отличное. Доставили быстро. Также хотелось бы отметить работу консультантов, очень помогли при оформлении заказа.

12.09.2018

https://vk.com/dashk448

pic
pic