Skip to content

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

library to sexy (wip)

parent 659df252
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 68 deletions
src/blocks/blocks-library/blocks-library.html 0 → 100644
View file @ 35595b49
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/blocks-library/blocks-library.html')
-->
<div class="blocks-library">content</div>
src/blocks/blocks-library/blocks-library.less 0 → 100644
View file @ 35595b49
@import "../../less/variables.less"; // только для удобства обращения к переменным
@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
.blocks-library {
&__item {
position: relative;
padding: 1.5rem 2rem 1.5rem 5rem;
border: 2px dashed @gray-lighter;
margin-bottom: 2rem;
min-height: 18rem;
&:before {
content: attr(data-name);
position: absolute;
text-transform: lowercase;
left: 2.5rem;
top: 14rem;
color: @gray;
display: block;
font-size: 1.7rem;
line-height: 2rem;
height: 2rem;
text-align: right;
white-space: nowrap;
width: 15rem;
transform: rotate(-90deg);
transform-origin: 0 100%;
}
}
&__title {
margin-top: 0;
}
}
src/blocks_library.html
View file @ 35595b49
......@@ -15,80 +15,75 @@
<h1>Библиотека блоков <a href="/">проекта</a></h1>
<p>Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки не работают, значит импорт их стилей отключен в файле диспетчера подключений.</p>
<p>Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки не работают, значит импорт их стилей отключен в файле диспетчера подключений (такие блоки не используются на этом проекте).</p>
<section class="blocks-library__item">
<section class="blocks-library__item" data-name="Текст">
<h2 class="blocks-library__title" id="typo">Типографика, код</h2>
<p>Стилизация: теги (см. глобальные стили)</p>
<h2 class="blocks-library__title" id="typo">Текст, теги</h2>
<p>Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<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 class="row">
<div class="col-md-6">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут <a href="/">рыбные ссылки</a>. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h1>Заголовок 1</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h2>Заголовок 2</h2>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h3>Заголовок 3</h4>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h4>Заголовок 4</h4>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h5>Заголовок 5</h5>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<h6>Заголовок 6</h6>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="row">
<div class="col-md-6">
<ul>
<li>Пункт 1
<ul>
<li>Пункт 1
<ul>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ul>
</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ul>
</div>
<div class="col-md-6">
</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>
<div class="col-md-6">
<ol>
<li>Пункт 1
<ol>
<li>Пункт 1
<ol>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ol>
</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
</ol>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, многострочное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p">Это <code>div</code> с классом <code>.p</code>. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
</div>
</div>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<dl>
<dt>Определяемая сущность 1</dt>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.</dd>
<dt>Определяемая сущность 2</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Некое, возможно, относительно длинное определение упомянутой сущности.</dd>
</dl>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<hr>
<p>Разделитель уровня параграфа. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
<div class="p"><code>div</code> с классом <code>.p</code>. <mark>Это единственный класс в этом разделе. Оставлен, в виду своей микроскопичности.</mark> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</div>
<div class="row">
<div class="col-md-6">
<p>
<img 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="">
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
</p>
<table>
<tr>
<td><code>&lt;a&gt;</code></td>
<td><a href="">ссылка, внешний вид</a></td>
<td><a href="">ссылка</a></td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
......@@ -118,6 +113,10 @@
<td><code>&lt;ins&gt;</code></td>
<td><ins>изменение, внесённое в документ (добавление)</ins></td>
</tr>
</table>
</div>
<div class="col-md-6">
<table>
<tr>
<td><code>&lt;mark&gt;</code></td>
<td><mark>акцент маркерным выделением</mark></td>
......@@ -143,21 +142,47 @@
<td>H<sub>2</sub>O</td>
</tr>
</table>
<address>
тег address
</address>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<p>Строчный код: <code>&lt;section&gt;</code></p>
<pre>// Блочный код<br>// Вторая строка</pre>
</div>
</div>
<address>
<strong>Имя Фамилия</strong> (тег <code>address</code>)
<br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:mail@mail.com">mail@mail.com</a>
</address>
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
<p>Строчный код: <code>&lt;section&gt;</code></p>
<pre>// Блочный код<br>// Вторая строка</pre>
</section>
<section class="blocks-library__item" data-name="Текст: дополнения">
<h2 class="blocks-library__title" id="typo-add">Текст, дополнительные классы</h2>
<p>TODO: гор. списки определений, правая цитата, акцентный текст, второстепенный текст.</p>
</section>
<p>
<img 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="">
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
</p>
<section class="blocks-library__item">
<h2 class="blocks-library__title" id="tables">Таблицы</h2>
......
src/less/global-scaffolding.less
View file @ 35595b49
......@@ -211,7 +211,7 @@ abbr[title] {
}
blockquote {
padding: .5em 0 .5em 1.8em;
padding: 0 0 0 1.8em;
margin-left: 0;
border-left: 5px solid @border-color;
......
src/less/style.less
View file @ 35595b49
......@@ -6,6 +6,7 @@
@import "./src/less/global-grid.less";
@import "./src/less/global-forms.less";
@import "./src/blocks/blocks-library/blocks-library.less";
@import "./src/blocks/btn/btn.less";
@import "./src/blocks/table-responsive/table-responsive.less";
@import "./src/blocks/field-text/field-text.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