Skip to content

K
kpp
Commit 7c578531 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавление библиотеки блоков

parent 1cc2d5d0
Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 47 deletions
README.md
View file @ 7c578531
...@@ -187,7 +187,7 @@ src/ # Исходные файлы ...@@ -187,7 +187,7 @@ src/ # Исходные файлы
js/ # - можно положить добавочные js-файлы (нужно подключить в addJsBefore, addJsAfter или copiedJs, иначе игнорируются) js/ # - можно положить добавочные js-файлы (нужно подключить в addJsBefore, addJsAfter или copiedJs, иначе игнорируются)
scss/ # - стили (style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе они будут проигнорированы) scss/ # - стили (style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе они будут проигнорированы)
index.html # - главная страница проекта index.html # - главная страница проекта
components-demo.html # - библиотека блоков blocks-demo.html # - библиотека блоков
``` ```
......
package.json
View file @ 7c578531
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
}, },
"configProject": { "configProject": {
"blocks": { "blocks": {
"page": [],
"typo": [],
"page-header": [], "page-header": [],
"page-footer": [], "page-footer": [],
"sprite-svg": [], "sprite-svg": [],
...@@ -25,7 +27,9 @@ ...@@ -25,7 +27,9 @@
"addCssAfter": [ "addCssAfter": [
"./src/scss/print.scss" "./src/scss/print.scss"
], ],
"singleCompiled": [], "singleCompiled": [
"./src/scss/blocks-library.scss"
],
"addJsBefore": [ "addJsBefore": [
"./node_modules/jquery/dist/jquery.min.js", "./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-migrate/dist/jquery-migrate.min.js", "./node_modules/jquery-migrate/dist/jquery-migrate.min.js",
......
src/blocks-demo.html 0 → 100644
View file @ 7c578531
<!DOCTYPE html>
<html class="no-js page" lang="ru">
<head>
<meta charset="utf-8">
<title>NTH start project</title>
<meta name="description" content="">
@@include('_include/page_head.html')
<link rel="stylesheet" href="css/blocks-library.css">
<script>
document.addEventListener('DOMContentLoaded', function(){
// Открытие/закрытие блока с кодом
var codeShowTriggers = document.querySelectorAll('.blocks-library__code-show-trigger');
for (var i = 0; i < codeShowTriggers.length; i++) {
codeShowTriggers[i].addEventListener('click', function(){
this.closest('.blocks-library__code-wrapper').querySelector('.blocks-library__code').classList.toggle('blocks-library__code--shown');
});
}
// Изменение размера шрифта на произвольном блоке
var parent, fontSizeEm;
$('.js-font-resizer')
.css('font-size', '1em')
.append('<div class="js-font-resizer__btns"><button class="btn btn--sm js-button-plus">+</button><button class="btn btn--sm js-button-null">0</button><button class="btn btn--sm js-button-minus">-</button></div>')
.on('click', 'button.js-button-plus', function(){
parent = $(this).closest('.js-font-resizer');
fontSizeEm = /(\d*\.?\d?)(em)/g.exec(parent.attr('style'));
parent.css('font-size', parent.css('font-size', parseFloat(fontSizeEm[0], 10) + 0.1 + 'em') );
}).on('click', 'button.js-button-minus', function(){
parent = $(this).closest('.js-font-resizer');
fontSizeEm = /(\d*\.?\d?)(em)/g.exec(parent.attr('style'));
parent.css('font-size', parent.css('font-size', parseFloat(fontSizeEm[0], 10) - 0.1 + 'em') );
}).on('click', 'button.js-button-null', function(){
parent = $(this).closest('.js-font-resizer');
parent.css('font-size', '1em' );
});
});
</script>
</head>
<body>
<div class="components-demo blocks-library">
<h1>Страница демонстрации блоков</h1>
<p>Если какой-либо блок отображен криво, вероятно его стилизация отсутствует в общем стилевом файле (блок не используется на проекте).</p>
<section class="blocks-library__item" id="page" data-name=".page">
<h2 class="blocks-library__item-title">Страница и типографика</h2>
<p>Блок страницы, благодаря которому применяются некоторые глобальные стили.</p>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;html class="page"></code>
<code> &lt;head>...&lt;/head></code>
<code> &lt;body>...&lt;/body></code>
<code>&lt;/html></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="text">
<h2 class="blocks-library__item-title" id="text-text">Текст, теги</h2>
<div class="blocks-library__sub-item">
<p>Параграфы, расстояние между ними. <a href="qwert1234">Далеко-далеко</a> за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class=&quot;p&quot;&gt;...&lt;/div&gt;</code>
</pre>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-headers">
<h2 class="blocks-library__sub-item-title">Заголовки и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h1>Заголовок 1</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h2>Заголовок 2</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h3>Заголовок 3</h3>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h4>Заголовок 4</h4>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h5>Заголовок 5</h5>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6</h6>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-lists">
<h2 class="blocks-library__sub-item-title">Маркированный и нумерованный списки и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row">
<div class="col-md-6">
<ul>
<li>Пункт 1
<ul>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ul>
</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>
<div class="col-md-6">
<ol>
<li>Пункт 1
<ol>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ol>
</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-lists-dl">
<h2 class="blocks-library__sub-item-title">Список определений и параграфы</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-hr">
<h2 class="blocks-library__sub-item-title">Разделитель уровня параграфа</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr>
<p>. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div>
<div class="blocks-library__sub-item" id="text-inline-tags">
<h2 class="blocks-library__sub-item-title">Строчные теги</h2>
<div class="row">
<div class="col-lg-6">
<table>
<tbody><tr>
<td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка</a></td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td><strong>действительно значимый текст</strong></td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td><b>просто выделенный текст, лид</b></td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td><i>иностранное слово или термин</i></td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td><em>эмфатическое ударение</em></td>
</tr>
<tr>
<td><code>&lt;s&gt;</code></td>
<td><s>информация, утратившая актуальность</s></td>
</tr>
<tr>
<td><code>&lt;del&gt;</code></td>
<td><del>изменение, внесённое в документ (удаление)</del></td>
</tr>
<tr>
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
</tbody></table>
</div>
<div class="col-lg-6">
<table>
<tbody><tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
</tr>
<tr>
<td><code>&lt;small&gt;</code></td>
<td><small>малозначимый текст</small></td>
</tr>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td><abbr title="Аббревиатура">АББРЕВИАТУРА</abbr></td>
</tr>
<tr>
<td><code>&lt;kbd&gt;</code></td>
<td><kbd>Ctrl + C</kbd></td>
</tr>
<tr>
<td><code>&lt;sup&gt;</code></td>
<td>2<sup>3</sup></td>
</tr>
<tr>
<td><code>&lt;sub&gt;</code></td>
<td>H<sub>2</sub>O</td>
</tr>
<tr>
<td><code>&lt;code&gt;</code></td>
<td><code>code</code></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="blocks-library__sub-item" id="text-address">
<h2 class="blocks-library__sub-item-title">Контактная информация автора материала</h2>
<p>Тег <code>address</code> представляет контактную информацию для ближайшего элемента-предка <code>article</code> или <code>body</code>. Если это элемент <code>body</code>, то контактная информация применяется ко всему документу целиком. Тег обязан не использоваться для предоставления произвольного адреса (например, почтовых адресов), если эти адреса не являются реальной контактной информацией. <a href="http://spec.piraruco.com/html5/sections.htm#the-address-element">Подробнее</a></p>
<hr>
<address>
<strong>Имя Фамилия</strong>
<br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:imya@mail.com">imya@mail.com</a>
</address>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">address</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Имя Фамилия<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></span>
<span class="code__line"> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"mailto:imya@mail.com"</span>&gt;</span>imya@mail.com<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">address</span>&gt;</span></span>
</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item" id="text-blq">
<h2 class="blocks-library__sub-item-title">Блочные цитаты</h2>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span>Emmet<span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span></span>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span></span>
</code>
</pre>
</div>
</div>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
<span class="code__line"> <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">cite</span>&gt;</span>Emmet<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span></span>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span></span>
</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item" id="text-pre">
<h2 class="blocks-library__sub-item-title">Форматированный текст</h2>
<p>Смотри так же <a href="#code">БЭМ-блок для кода</a>.</p>
<pre>// Блочный код с тегом переноса строки<br>// Вторая строка</pre>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">pre</span>&gt;</span>// Блочный код с тегом переноса строки<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>// Вторая строка<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span></span>
</code>
</pre>
</div>
</div>
<pre> // Блочный код с введённым переносом строки и табуляцией перед строками
// Вторая строка
</pre>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code"> <code class="code__syntax html hljs xml">
<span class="code__line"><span class="hljs-tag">&lt;<span class="hljs-name">pre</span>&gt;</span></span>
<span class="code__line"> // Блочный код с введённым переносом строки и табуляцией перед строками</span>
<span class="code__line"> // Вторая строка</span>
<span class="code__line"><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span></span>
</code>
</pre>
</div>
</div>
</div>
</section>
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-right-arrow"></use></svg>
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-left-arrow"></use></svg>
<div class="temp-icon-right-arrow"></div>
<div class="temp-icon-left-arrow"></div>
<p><img src="img/joker.jpg" alt="" width="824" height="460"></p>
</div>
<style>
.components-demo {
padding: 1em;
margin: auto;
max-width: 1200px;
font-family: sans-serif;
}
</style>
@@include('_include/page_bottom.html')
</body>
</html>
src/blocks/blocks-library/blocks-library.less → src/blocks/blocks-library/blocks-library.scss
View file @ 7c578531
@import '../../less/variables.less'; // только для удобства обращения к переменным
.blocks-library { .blocks-library {
&__item { &__item {
position: relative; position: relative;
padding: 1rem; padding: 1rem;
border: 2px dashed @gray-lighter; border: 2px dashed $gray-lighter;
margin-bottom: 2.5em; margin-bottom: 2.5em;
@media (min-width: @screen-md) { @media (min-width: $screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem; padding: 1.5rem 2rem 1.5rem 5rem;
min-height: 18rem; min-height: 18rem;
margin-bottom: 5rem; margin-bottom: 5rem;
...@@ -27,9 +24,9 @@ ...@@ -27,9 +24,9 @@
height: 2rem; height: 2rem;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
color: @gray-light; color: $gray-light;
@media (min-width: @screen-md) { @media (min-width: $screen-md) {
left: 2.5rem; left: 2.5rem;
top: 20rem; top: 20rem;
width: 21rem; width: 21rem;
...@@ -58,7 +55,7 @@ ...@@ -58,7 +55,7 @@
cursor: pointer; cursor: pointer;
margin-bottom: 0.3em; margin-bottom: 0.3em;
@media (min-width: @screen-md) { @media (min-width: $screen-md) {
position: absolute; position: absolute;
top: -1.8rem; top: -1.8rem;
left: -4rem; left: -4rem;
...@@ -69,12 +66,12 @@ ...@@ -69,12 +66,12 @@
display: block; display: block;
width: 3rem; width: 3rem;
height: 2px; height: 2px;
background-color: @gray-light; background-color: $gray-light;
&:before, &:before,
&:after { &:after {
position: absolute; position: absolute;
background-color: @gray-light; background-color: $gray-light;
width: 3rem; width: 3rem;
height: 2px; height: 2px;
left: 0; left: 0;
...@@ -95,12 +92,12 @@ ...@@ -95,12 +92,12 @@
.js & { .js & {
max-height: 0; max-height: 0;
transition-duration: @transition-time; transition-duration: $transition-time;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
} }
.js &--shown { .js &--shown {
transition-duration: @transition-time; transition-duration: $transition-time;
transition-timing-function: ease-in; transition-timing-function: ease-in;
max-height: 1000px; max-height: 1000px;
} }
...@@ -114,7 +111,7 @@ ...@@ -114,7 +111,7 @@
.js-font-resizer { .js-font-resizer {
position: relative; position: relative;
@media (min-width: @screen-md) { @media (min-width: $screen-md) {
&:hover { &:hover {
...@@ -130,7 +127,7 @@ ...@@ -130,7 +127,7 @@
font-size: 2rem; font-size: 2rem;
transition: opacity 0.3s; transition: opacity 0.3s;
@media (min-width: @screen-md) { @media (min-width: $screen-md) {
opacity: 0.2; opacity: 0.2;
position: absolute; position: absolute;
top: 0; top: 0;
......
src/blocks/page/page.js 0 → 100644
View file @ 7c578531
// (function(){
// код
// }());
src/blocks/page/page.scss 0 → 100644
View file @ 7c578531
// Make viewport responsive
// http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root {
@-ms-viewport { /* stylelint-disable-line at-rule-no-vendor-prefix */
width: device-width;
}
}
.page {
box-sizing: border-box;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 1);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
min-width: 320px;
min-height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #fff;
margin: 0;
min-height: 100%;
}
[tabindex='-1']:focus {
outline: none !important;
}
// iOS 'clickable elements' fix for role='button'
[role='button'] {
cursor: pointer;
}
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
a,
// area,
button,
[role='button'],
input,
label,
select,
// summary,
textarea {
touch-action: manipulation;
}
src/blocks/typo/typo.scss 0 → 100644
View file @ 7c578531
$gray: hsl(0, 0%, 50%) !default;
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family--headings: $font-family !default;
$font-family--monospace: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !default;
$font-size: 14px !default;
$font-size--h1: 2.25em !default;
$font-size--h2: 1.875em !default;
$font-size--h3: 1.5em !default;
$font-size--h4: 1.25em !default;
$font-size--h5: 1em !default;
$font-size--h6: 1em !default;
$font-size--small: 0.75em !default;
$line-height: 1.375em !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$screen-sm: 480px !default;
$border-radius: 3px !default;
body {
font-family: $font-family;
font-size: $font-size;
line-height: $line-height;
color: $text-color;
}
// .h1,
h1 {
font-size: $font-size--h1;
}
// .h2,
h2 {
font-size: $font-size--h2;
}
// .h3,
h3 {
font-size: $font-size--h3;
}
// .h4,
h4 {
font-size: $font-size--h4;
}
// .h5,
h5 {
font-size: $font-size--h5;
}
// .h6,
h6 {
font-size: $font-size--h6;
}
// .h1,
// .h2,
// .h3,
// .h4,
// .h5,
// .h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family--headings;
font-weight: 700;
line-height: 1.4;
color: currentColor;
}
// .h1,
// .h2,
// .h3,
h1,
h2,
h3 {
margin-top: $line-height;
margin-bottom: ($line-height / 2);
}
// .h4,
// .h5,
// .h6,
h4,
h5,
h6 {
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
}
.p,
p,
ul,
ol,
dl,
blockquote,
pre,
address,
figure,
table {
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
}
address {
font-style: normal;
}
ul,
ol {
padding-left: 1.8em;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-top: 0;
margin-bottom: 0;
}
li {
line-height: $line-height;
}
dt {
font-weight: 700;
}
dd {
margin-left: 0;
@media (min-width: $screen-sm) {
margin-left: 1.8em;
}
& + dt {
margin-top: ($line-height / 2);
}
}
hr {
margin-top: $line-height;
margin-bottom: $line-height;
border: 0;
border-top: 1px solid $border-color;
}
// .small,
small {
font-size: $font-size--small;
}
sub,
sup {
font-size: 70%;
}
// .mark,
mark {
background: #fcf8e3;
padding: 0.1em 0.3em;
}
b,
strong {
font-weight: bolder;
}
abbr[title] {
border-bottom: 1px dotted;
}
blockquote {
padding: 0 0 0 0.5em;
margin-left: 0;
margin-right: 0;
border-left: 1px solid $border-color;
@media (min-width: $screen-sm) {
padding: 0 0 0 1.8em;
margin-left: 0;
border-left-width: 5px;
}
p,
ul,
ol {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
footer {
text-align: right;
color: $gray;
// &:before {
// content: '— ';
// }
}
}
code,
kbd,
pre,
samp {
font-family: $font-family--monospace;
}
code {
color: $text-color;
background-color: $gray-lighter;
padding: 0.06em 0.3em;
border-radius: $border-radius;
}
kbd {
padding: 0.06em 0.3em;
color: $text-color;
background-color: $gray-lighter;
border-radius: $border-radius;
kbd {
padding: 0;
}
}
pre {
display: block;
width: 100%;
overflow-x: auto;
background-color: $gray-lightest;
padding: 1em;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
white-space: normal;
tab-size: 2;
}
src/components-demo.html deleted 100644 → 0
View file @ 1cc2d5d0
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>NTH start project</title>
<meta name="description" content="">
@@include('_include/page_head.html')
</head>
<body>
<h1>Страница демонстрации блоков</h1>
<p>Если какой-либо блок отображен криво, вероятно его стилизация отсутствует в общем стилевом файле (блок не используется на проекте).</p>
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-right-arrow"></use></svg>
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-left-arrow"></use></svg>
<div class="temp-icon-right-arrow"></div>
<div class="temp-icon-left-arrow"></div>
<p><img src="img/joker.jpg" alt="" width="824" height="460"></p>
<input type="text" value ="qwerty">
@@include('_include/page_bottom.html')
</body>
</html>
src/index.html
View file @ 7c578531
<!DOCTYPE html> <!DOCTYPE html>
<html class="no-js" lang="ru"> <html class="no-js page" lang="ru">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
......
src/scss/blocks-library.scss 0 → 100644
View file @ 7c578531
@import "./src/scss/variables.scss";
@import "./src/scss/mixins.scss";
@import "./src/blocks/blocks-library/blocks-library.scss";
src/scss/variables.scss
View file @ 7c578531
...@@ -42,7 +42,7 @@ $font-size--h5: 1em; ...@@ -42,7 +42,7 @@ $font-size--h5: 1em;
$font-size--h6: 1em; $font-size--h6: 1em;
$font-size--small: 0.75em; $font-size--small: 0.75em;
$line-height: 1.375; $line-height: 1.375em;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif; $font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
$font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif; $font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment