Skip to content

K
kpp
Commit 39f4f470 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

library

parent faf48754
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 15 deletions
src/blocks_library.html
View file @ 39f4f470
......@@ -30,7 +30,7 @@
<section class="blocks-library__item" id="text" data-name="Текст">
<section class="blocks-library__item" id="text">
<h1 class="blocks-library__item-title">Текст, теги</h1>
......@@ -225,19 +225,60 @@
<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>
<code class="html">&lt;blockquote&gt;</code>
<code class="html"> &lt;p&gt;Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.&lt;/p&gt;</code>
<code class="html"> &lt;footer&gt;Emmet&lt;/footer&gt;</code>
<code class="html">&lt;/blockquote&gt;</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>
<code class="html">&lt;blockquote></code>
<code class="html"> &lt;p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.&lt;/p></code>
<code class="html"> &lt;footer>&lt;cite>Emmet&lt;/cite>&lt;/footer></code>
<code class="html">&lt;/blockquote></code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Форматированный текст</h2>
<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>
<code class="html">&lt;pre>// Блочный код с тегом переноса строки&lt;br>// Вторая строка&lt;/pre></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>
<code class="html">&lt;pre></code>
<code class="html"> // Блочный код с введённым переносом строки и табуляцией перед строками</code>
<code class="html"> // Вторая строка</code>
<code class="html">&lt;/pre></code>
</pre>
</div>
</div>
</div>
</section>
......@@ -257,6 +298,22 @@
<dt>Конституционально-эзотерический концептуализм</dt>
<dd>Некое определение многословного термина.</dd>
</dl>
<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>
<code class="html">&lt;dl class="dl-horizontal"></code>
<code class="html"> &lt;dt>Ассоциативный список&lt;/dt></code>
<code class="html"> &lt;dd>&lt;code>dl&lt;/code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.&lt;/dd></code>
<code class="html"> &lt;dt>Второй термин&lt;/dt></code>
<code class="html"> &lt;dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.&lt;/dd></code>
<code class="html"> &lt;dd>Второе определение подряд.&lt;/dd></code>
<code class="html"> &lt;dt>Конституционально-эзотерический концептуализм&lt;/dt></code>
<code class="html"> &lt;dd>Некое определение многословного термина.&lt;/dd></code>
<code class="html">&lt;/dl></code>
</pre>
</div>
</div>
</section>
......@@ -272,10 +329,32 @@
<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>
<code class="html">&lt;blockquote class="blockquote-right"></code>
<code class="html"> &lt;p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.&lt;/p></code>
<code class="html"> &lt;footer>Emmet&lt;/footer></code>
<code class="html">&lt;/blockquote></code>
</pre>
</div>
</div>
<blockquote class="blockquote-right">
<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>
<code class="html">&lt;blockquote class="blockquote-right"></code>
<code class="html"> &lt;p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.&lt;/p></code>
<code class="html"> &lt;footer>&lt;cite>Emmet&lt;/cite>&lt;/footer></code>
<code class="html">&lt;/blockquote></code>
</pre>
</div>
</div>
</section>
......@@ -347,7 +426,7 @@
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Подсветка всех маркеров списка модификатором</h2>
<p class="blocks-library__sub-item-title">Подсветка всех маркеров списка модификатором блока<code>.list-nums.list-nums--main</code> (отдельный LESS-файл). Распространяется только на тот список, которому дан модификатор.</p>
<p class="blocks-library__sub-item-title">Подсветка всех маркеров списка модификатором блока <code>.list-nums.list-nums--main</code> (отдельный LESS-файл). Распространяется только на тот список, которому дан модификатор.</p>
<div class="row">
<div class="col-md-6">
<ol class="list-nums list-nums--main">
......@@ -445,34 +524,51 @@
<section class="alert alert--danger" id="text-helpers">
<h2>Текстовые хелперы</h2>
<h1>Текстовые хелперы</h1>
<p>Классов, вроде <code>.test-accent</code> (увеличенный текст), <code>.test-secondary</code> (уменьшенный текст), <code>.test-muted</code> («приглушенный» текст), <code>.align-center</code> (выравнивание текста по центру), <code>.bg-primary</code> (заданный цвет фона) и т.п. тут не будет. Это не фреймворк, это стартовая библиотека блоков. Предполагается, что пользователь в состоянии прицельно применить любую стилизацию по семантическому классу уровня блока/элемента/модификатора.</p>
</section>
<h2 class="blocks-library__title" id="img">Изображения</h2>
<section class="blocks-library__item" id="thumb" data-name=".thumb">
<h1 class="blocks-library__item-title">Изображения с рамкой</h1>
<section class="blocks-library__item" id="thumb" data-name=".thumb">
Без ссылок:
<img class="thumb" src="img/TEMP-DavidBlaine.jpg" height="331" width="382" alt="">
<img class="thumb" src="img/TEMP-DavidBlaine.jpg" height="331" width="382" alt="">
Без ссылок: <br>
<img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
<img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
<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>
<code class="html">&lt;img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></code>
<code class="html">&lt;img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></code>
</pre>
</div>
</div>
<hr>
Ссылками:
Ссылками:<br>
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
<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>
<code class="html">&lt;a href="">&lt;img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">&lt;/a></code>
<code class="html">&lt;a href="">&lt;img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">&lt;/a></code>
<code class="html">&lt;a href="">&lt;img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">&lt;/a></code>
</pre>
</div>
</div>
</section>
<h2 class="blocks-library__title" id="table">Таблицы</h2>
<section class="blocks-library__item" id="table" data-name="Таблицы">
<h1 class="blocks-library__item-title">Таблицы</h1>
<section class="blocks-library__item" id="table" data-name="Таблицы">
<div class="row">
<div class="col-md-6">
<table>
......@@ -507,11 +603,50 @@
</table>
</div>
</div>
<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>
<code class="html">&lt;table></code>
<code class="html"> &lt;caption>Таблица 1&lt;/caption></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Имя&lt;/th></code>
<code class="html"> &lt;td>Поросёнок&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Фамилия&lt;/th></code>
<code class="html"> &lt;td>Пётр&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Отчество&lt;/th></code>
<code class="html"> &lt;td>Баракович&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html">&lt;/table></code>
<code class="html"> </code>
<code class="html">&lt;table></code>
<code class="html"> &lt;caption>Таблица 2&lt;/caption></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Имя&lt;/th></code>
<code class="html"> &lt;th>Фамилия&lt;/th></code>
<code class="html"> &lt;th>Отчество&lt;/th></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td>Поросёнок&lt;/td></code>
<code class="html"> &lt;td>Пётр&lt;/td></code>
<code class="html"> &lt;td>Баракович&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html">&lt;/table></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="table-responsive" data-name=".table-responsive">
<h1 class="blocks-library__item-title">Адаптивные таблицы с повторяющимися названиями ячеек</h1>
<p class="alert alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается индивидуально).</p>
<p class="alert alert--success">Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
......@@ -540,6 +675,31 @@
</tr>
</tbody>
</table>
<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>
<code class="html">&lt;table class="table-responsive"></code>
<code class="html"> &lt;thead></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;th>Имя и фамилия&lt;/th></code>
<code class="html"> &lt;th>Тип мироощущения&lt;/th></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;/thead></code>
<code class="html"> &lt;tbody></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td data-label="Имя и фамилия">Анатоле Вассерман&lt;/td></code>
<code class="html"> &lt;td data-label="Тип мироощущения">Девственность&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;tr></code>
<code class="html"> &lt;td data-label="Имя и фамилия">Джакомо Казанова&lt;/td></code>
<code class="html"> &lt;td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.&lt;/td></code>
<code class="html"> &lt;/tr></code>
<code class="html"> &lt;/tbody></code>
<code class="html">&lt;/table></code>
</pre>
</div>
</div>
</section>
......
src/less/global/global-scaffolding.less
View file @ 39f4f470
......@@ -162,6 +162,7 @@ ul,
ol,
dl,
blockquote,
pre,
address,
figure,
table {
......@@ -299,8 +300,6 @@ kbd {
pre {
display: block;
width: 100%;
margin-top: @line-height;
margin-bottom: @line-height;
overflow-x: auto;
background-color: @gray-lightest;
padding: 1em;
......
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