Skip to content

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

library to sexy (wip)

parent 35595b49
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 75 deletions
TODO
View file @ b2240f0d
☐ Сделать: Текстовые поля: группа (в т.ч. с кнопками) ☐ Сделать: Текстовые поля: группа (в т.ч. с кнопками)
☐ Добавить заглушки пустых картинок и тестировать! http://bitsofco.de/styling-broken-images/
☐ Добавить сексуальную стилизацию страницы библиотеки компонентов ☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой... ☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой...
☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
......
src/blocks/blocks-library/blocks-library.html
View file @ b2240f0d
<!--DEV <!--DEV
Нужно убрать пробел между @-ами: <section class="blocks-library__item" data-name="Пояснение сбоку">
@ @include('blocks/blocks-library/blocks-library.html') <h2 class="blocks-library__title" id="">Заголовок</h2>
Контентю
</section>
--> -->
<div class="blocks-library">content</div>
src/blocks/dl-horizontal/dl-horizontal.html 0 → 100644
View file @ b2240f0d
<!--DEV
<dl class="dl-horizontal">
<dt>Ассоциативный список</dt>
<dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
<dt>Второй термин</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Второе определение подряд.</dd>
<dt>Конституционально-эзотерический концептуализм</dt>
<dd>Некое определение.</dd>
</dl>
-->
src/blocks/dl-horizontal/dl-horizontal.less 0 → 100644
View file @ b2240f0d
@import "../../less/variables.less"; // только для удобства обращения к переменным
@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
.dl-horizontal {
@media (min-width: @screen-md) {
& > dt {
width: 19rem;
float: left;
margin: 0;
word-wrap: break-word;
text-align: right;
clear: both;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > dd {
margin-left: 20.5rem;
}
}
}
src/blocks_library.html
View file @ b2240f0d
...@@ -19,65 +19,67 @@ ...@@ -19,65 +19,67 @@
<section class="blocks-library__item" data-name="Текст"> <h2 class="blocks-library__title" id="typo">Текст, теги</h2>
<h2 class="blocks-library__title" id="typo">Текст, теги</h2> <div class="blocks-library__item" id="text" data-name="Текст">
<p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h1>Заголовок 1</h1> <h1>Заголовок 1</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h2>Заголовок 2</h2> <h2>Заголовок 2</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h3>Заголовок 3</h3> <h3>Заголовок 3</h3>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h4>Заголовок 4</h4> <h4>Заголовок 4</h4>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h5>Заголовок 5</h5> <h5>Заголовок 5</h5>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6</h6> <h6>Заголовок 6</h6>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<ul> <ul>
<li>Пункт 1 <li>Пункт 1
<ul> <ul>
<li>Подпункт 1</li> <li>Подпункт 1</li>
<li>Подпункт 2</li> <li>Подпункт 2</li>
</ul> </ul>
</li> </li>
<li>Пункт 2</li> <li>Пункт 2</li>
<li>Пункт 3</li> <li>Пункт 3</li>
</ul> </ul>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<ol> <ol>
<li>Пункт 1 <li>Пункт 1
<ol> <ol>
<li>Подпункт 1</li> <li>Подпункт 1</li>
<li>Подпункт 2</li> <li>Подпункт 2</li>
</ol> </ol>
</li> </li>
<li>Пункт 2</li> <li>Пункт 2</li>
<li>Пункт 3</li> <li>Пункт 3</li>
</ol> </ol>
</div> </div>
</div> </div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl> <dl>
<dt>Определяемая сущность 1</dt> <dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd> <dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt> <dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd> <dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd> <dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl> </dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr> <hr>
<p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div> <div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
</div>
<div class="blocks-library__item" id="inline-tags" data-name="Строчные теги">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<table> <table>
...@@ -141,34 +143,61 @@ ...@@ -141,34 +143,61 @@
<td><code>&lt;sub&gt;</code></td> <td><code>&lt;sub&gt;</code></td>
<td>H<sub>2</sub>O</td> <td>H<sub>2</sub>O</td>
</tr> </tr>
<tr>
<td><code>&lt;code&gt;</code></td>
<td><code>code</code></td>
</tr>
</table> </table>
</div> </div>
</div> </div>
</div>
<div class="blocks-library__item" id="address" data-name="address">
<address> <address>
<strong>Имя Фамилия</strong> (тег <code>address</code>) <strong>Имя Фамилия</strong>
<br> <br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:mail@mail.com">mail@mail.com</a> <a href="mailto:imya@mail.com">imya@mail.com</a>
</address> </address>
</div>
<div class="blocks-library__item" id="blockquote" data-name="blockquote">
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
</blockquote>
<blockquote> <blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p> <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer> <footer>Emmet</footer>
</blockquote> </blockquote>
<p>Строчный код: <code>&lt;section&gt;</code></p> <blockquote>
<pre>// Блочный код<br>// Вторая строка</pre> <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</section> </blockquote>
</div>
<section class="blocks-library__item" data-name="Текст: дополнения"> <div class="blocks-library__item" id="pre" data-name="pre">
<pre>// Блочный код<br>// Вторая строка</pre>
<pre>
// Блочный код
// Вторая строка</pre>
</div>
<h3 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h3>
<div class="blocks-library__item" id="dl-horizontal" data-name=".dl-horizontal">
<dl class="dl-horizontal">
<dt>Ассоциативный список</dt>
<dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
<dt>Второй термин</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Второе определение подряд.</dd>
<dt>Конституционально-эзотерический концептуализм</dt>
<dd>Некое определение.</dd>
</dl>
</div>
<h2 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h2>
<p>TODO: гор. списки определений, правая цитата, акцентный текст, второстепенный текст.</p>
</section>
......
src/less/global-scaffolding.less
View file @ b2240f0d
...@@ -265,7 +265,7 @@ pre { ...@@ -265,7 +265,7 @@ pre {
width: 100%; width: 100%;
margin-top: @line-height; margin-top: @line-height;
margin-bottom: @line-height; margin-bottom: @line-height;
overflow-x: scroll; overflow-x: auto;
background-color: @gray-lighter; background-color: @gray-lighter;
padding: .5em; padding: .5em;
border-radius: @border-radius; border-radius: @border-radius;
......
src/less/style.less
View file @ b2240f0d
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
@import "./src/less/global-grid.less"; @import "./src/less/global-grid.less";
@import "./src/less/global-forms.less"; @import "./src/less/global-forms.less";
@import "./src/blocks/dl-horizontal/dl-horizontal.less";
@import "./src/blocks/blocks-library/blocks-library.less"; @import "./src/blocks/blocks-library/blocks-library.less";
@import "./src/blocks/btn/btn.less"; @import "./src/blocks/btn/btn.less";
@import "./src/blocks/table-responsive/table-responsive.less"; @import "./src/blocks/table-responsive/table-responsive.less";
......
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