Стандартные ссылки
Каталоги
Если нужно скрыть верстку от клиента
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
.row.is-stretch div div div div
.container .row.is-grid .cell-4 .cell-4 .cell-4
Кнопки
project\bundles\css\base\buttons.scss
<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-cover
<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
.drop div | item 1 .drop-target div | item 1.1 div | item 1.2
Табы
test
test
test
test
test
test
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
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 one
- List item two
- List item three
- List item four
Ordered List (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 one
- List item two
- List item three
- List item four
HTML Tags
These supported tags come from the WordPress.com code .
Address Tag
1 Infinite LoopCupertino, CA 95014
United States
Anchor Tag (aka. Link)
This is an example of a .
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
премиальных детских игрушек и аксессуаров
Мы прочно занимаем первое место в Российском рунете по продаже премиальных детских игрушек*
Весь ассортимент поставляется нам из США и Европы и является эксклюзивным на отечественном рынке!
Больше всего мы дорожим репутацией и у нас никогда не будет подделок! Это наш принцип!
Товары представленные на сайте закупаются напрямую у производителей, что позволяет нам
удерживать комфортные цены — без переплат и многочисленных торговых наценок.
Все продукция выполнена из безопасных материалов, долговечна, отвечает высоким стандартам
качества и экологичности. Любое приобретение станет отличным подарком для ребенка или
подростка и позволит ему прикоснуться к волшебному миру любимых сказок, фильмов и комиксов.
Доставка осуществляется по всей России. Следите за различными предложениями и акциями,
делайте свой выбор и завершайте покупку через корзину. В рабочее время с 10 до 21
вы также можете позвонить нам по бесплатному телефону 8(800)6007288 или заказать звонок
менеджера. Они с радостью ответят на все вопросы, помогут определиться с различными
вариантами и примут заявку.
В интернет магазине Тойс-Бутик.ру Вы сможете купить настоящие игрушки и куклы Disney,
фигурки супергероев Марвел от Diamond select Toys и Marvel Legends,
рюкзаки и сумки Loungefly, школьные принадлежности, оригинальные кружки прямо из Диснейленда
и много еще интересного.
Приобретайте только лучшее для Ваших детишек!
Подарите детям детство!
С уважением, директор Toys-Boutique.ru Роман Глущенко
Самое главное, что все игрушки оригинальные, делаю покупку и уверена в качестве на 100%. На прошлой неделе получила уже третий заказ из магазина. Купила для племянника фигурку Магнето. Детализация на высшем уровне, ребенок в восторге!
05.09.2018
https://vk.com/id497057880
Сервис в магазине всегда на высшем уровне. Покупаю в магазине куклы Дисней уже не первый раз и никогда никаких нареканий. По ценам могу сказать сразу, что тут намного дешевле, чем в других магазинах. Игрушки всегда качественные, без посторонних запахов. Покупала дочке и племяннице кукол, они в восторге. Ну вот ассортимент бы побольше, а в целом магазином очень довольна!
13.07.2018
https://vk.com/id494892661
Заказывала здесь рюкзак для племянницы. Очень довольна покупкой. Качество отличное. Доставили быстро. Также хотелось бы отметить работу консультантов, очень помогли при оформлении заказа.
12.09.2018
https://vk.com/dashk448