Skip to content

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

components fin

parent 51b1ff35
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 100 deletions
README.md
View file @ e2eac246
...@@ -86,8 +86,8 @@ node createBlock.js new-block js jade # создаст папку, new-block.htm ...@@ -86,8 +86,8 @@ node createBlock.js new-block js jade # создаст папку, new-block.htm
```bash ```bash
build/ # Сюда собирается проект, здесь работает сервер автообновлений. build/ # Сюда собирается проект, здесь работает сервер автообновлений.
src/ # Исходные файлы src/ # Исходные файлы
_include/ # - фрагменты html, обще для всех страниц _include/ # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы
blocks/ # - блоки (компоненты) проекта blocks/ # - блоки (компоненты) проекта
css/ # - глобальный css-файл (будет скопирован только если существует и не пустой) css/ # - глобальный css-файл (будет скопирован только если существует и не пустой)
fonts/ # - шрифты проекта (никак не обрабатываются, см. http://jaicab.com/localFont/) fonts/ # - шрифты проекта (никак не обрабатываются, см. http://jaicab.com/localFont/)
img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются) img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются)
......
TODO
View file @ e2eac246
☐ Разместить файлы покомпонентно, импортировать less в диспетчере подключений, парсить его и брать в сборку JS-файлы импортированных компонент ☐ Вынести SVG-спрайты в отдельный компонент
☐ Тестировать: сборку и обновление JS при изменении файлов
☐ Тестировать: сборку и обновление JS при изменении диспетчера подключений
☐ Тестировать: копирование добавочных CSS при изменении файлов
☐ Тестировать: копирование добавочных CSS при изменении диспетчера подключений
☐ Тестировать: копирование изображений при изменении файлов
☐ Тестировать: копирование изображений при изменении диспетчера подключений
☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
☐ Сделать: Селект с идентичными везде уголками ☐ Сделать: Селект с идентичными везде уголками
☐ Сделать: Флажок-свитчер, радиокнопку-свитчер ☐ Сделать: Флажок-свитчер, радиокнопку-свитчер
...@@ -38,9 +31,11 @@ ...@@ -38,9 +31,11 @@
☐ Сделать: Компонент для лёгкой интеграции Owl Carousel 2 ☐ Сделать: Компонент для лёгкой интеграции Owl Carousel 2
☐ Сделать: Компонент для лёгкой интеграции к-л валидатора форм ☐ Сделать: Компонент для лёгкой интеграции к-л валидатора форм
☐ Тестировать: корректно ли кастомный input[type=range] отправляет на сервер данные
✔ Потестировать условия в микро-шаблонизаторе: https://www.npmjs.com/package/gulp-file-include#if-statement @done (27.02.2016 15:12) ✔ Потестировать условия в микро-шаблонизаторе: https://www.npmjs.com/package/gulp-file-include#if-statement @done (27.02.2016 15:12)
✔ ФОРМЫ: вынести стили хелп-текста в примесь @done (27.02.2016 20:26) ✔ ФОРМЫ: вынести стили хелп-текста в примесь @done (27.02.2016 20:26)
✔ Разместить файлы покомпонентно, импортировать less в диспетчере подключений, парсить его и брать в сборку JS-файлы импортированных компонент @done (28.02.2016 00:07)
✔ Тестировать: сборку и обновление JS при изменении файлов @done (27.02.2016 23:02)
✔ Тестировать: копирование добавочных CSS при изменении файлов @done (28.02.2016 00:07)
✔ Тестировать: копирование изображений при изменении файлов @done (28.02.2016 00:07)
gulpfile.js
View file @ e2eac246
This diff is collapsed.
src/_blocks_library.html
View file @ e2eac246
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
@@include('_include/page_header.html') @@include('blocks/page-header/page-header.html')
<section class="container blocks-library"> <section class="container blocks-library">
<h1>Библиотека блоков <a href="/">проекта</a></h1> <h1>Библиотека блоков <a href="/">проекта</a></h1>
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<p><img src="img/TEMP_DavidBlaine.jpg" alt=""></p> <p><img src="img/TEMP-DavidBlaine.jpg" alt=""></p>
<table> <table>
<tr> <tr>
<td><code>&lt;a&gt;</code></td> <td><code>&lt;a&gt;</code></td>
...@@ -425,7 +425,6 @@ ...@@ -425,7 +425,6 @@
<h2 id="btn">Кнопки</h2> <h2 id="btn">Кнопки</h2>
<p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p> <p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p>
<p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code>, <code>.btn-color(цвет_текста; цвет_фона; цвет_бордюра)</code> и <code>.btn-size([sm|md|lg])</code>.</p> <p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code>, <code>.btn-color(цвет_текста; цвет_фона; цвет_бордюра)</code> и <code>.btn-size([sm|md|lg])</code>.</p>
<p class="alert alert--success">Все кнопки — <code>display: inline-flex;</code>.</p>
<p> <p>
<input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px"> <input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
<a href="" class="btn">Cсылка</a> <a href="" class="btn">Cсылка</a>
...@@ -550,7 +549,7 @@ ...@@ -550,7 +549,7 @@
</section> </section>
@@include('_include/page_footer.html') @@include('blocks/page-footer/page-footer.html')
@@include('_include/page_bottom.html') @@include('_include/page_bottom.html')
</body> </body>
</html> </html>
src/_include/page_footer.html deleted 100644 → 0
View file @ 51b1ff35
<footer class="page-footer">
Копирайт
</footer>
src/_include/page_header.html deleted 100644 → 0
View file @ 51b1ff35
<header class="page-header">
Логотип
</header>
src/blocks/btn/btn.html 0 → 100644
View file @ e2eac246
<!--DEV
<a class="btn" href="">Cсылка</a>
<input class="btn" type="submit" value="Input">
<button class="btn">Button</button>
-->
src/less/blocks/btn.less → src/blocks/btn/btn.less
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.btn { .btn {
.btn(); .btn();
.btn-color(@text-color; @gray-lighter; @gray-lighter); .btn-color(@text-color; @gray-lighter; @gray-lighter);
......
src/blocks/form/form--horizontal.html 0 → 100644
View file @ e2eac246
<!--DEV
<form action="" class="form form--horizontal">
<fieldset>
<legend>Название формы</legend>
<label class="field-text">...</label>
<div class="field-actions">...</div>
</fieldset>
</form>
-->
src/less/blocks/form.less → src/blocks/form/form--horizontal.less
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.form { .form {
&:not(:last-child) {
margin-bottom: @line-height;
}
&--horizontal { &--horizontal {
...@@ -53,3 +54,4 @@ ...@@ -53,3 +54,4 @@
} }
} }
} }
src/blocks/form/form.html 0 → 100644
View file @ e2eac246
<!--DEV
<form action="" class="form">
<fieldset>
<legend>Название формы</legend>
<label class="field-text">...</label>
<div class="field-actions">...</div>
</fieldset>
</form>
-->
src/blocks/form/form.less 0 → 100644
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.form {
&:not(:last-child) {
margin-bottom: @line-height;
}
}
src/blocks/page-footer/page-footer.html 0 → 100644
View file @ e2eac246
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/page-footer/page-footer.html')
-->
<footer class="page-footer">
page-footer
</footer>
src/blocks/page-footer/page-footer.less 0 → 100644
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.page-footer {
}
src/blocks/page-header/page-header.html 0 → 100644
View file @ e2eac246
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/page-header/page-header.html')
-->
<header class="page-header">
page-header
</header>
src/blocks/page-header/page-header.less 0 → 100644
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.page-header {
}
src/img/form_field_bg/check.svg deleted 100644 → 0
View file @ 51b1ff35
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18"><path d="M24 3.516q0 .606-.436 1.03L10.25 17.576Q9.814 18 9.195 18q-.618 0-1.05-.425L.434 10.032Q0 9.605 0 9.002q0-.605.434-1.03l2.106-2.06q.434-.424 1.052-.424.62 0 1.053.425l4.55 4.47L19.353.423Q19.788 0 20.406 0q.617 0 1.052.424l2.106 2.06q.434.424.434 1.03z" fill="#5cb85c"/></svg>
\ No newline at end of file
src/img/form_field_bg/close.svg deleted 100644 → 0
View file @ 51b1ff35
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M18 14.485q0 .606-.425 1.03l-2.06 2.06q-.425.425-1.03.425t-1.03-.423L9 13.12l-4.455 4.455Q4.12 18 3.515 18t-1.03-.423l-2.06-2.06Q0 15.09 0 14.487q0-.605.423-1.03L4.88 9 .424 4.545Q0 4.12 0 3.515t.423-1.03l2.06-2.06Q2.91 0 3.513 0q.605 0 1.03.423L9 4.88 13.455.424Q13.88 0 14.485 0t1.03.423l2.06 2.06Q18 2.91 18 3.513q0 .605-.423 1.03L13.12 9l4.455 4.455q.425.425.425 1.03z" fill="#d9534f"/></svg>
\ No newline at end of file
src/img/svg_sprite/readme.md → src/img/svg-sprite/readme.md
View file @ e2eac246
Из SVG-файлов этой папки будет собран спрайт — файл svg_sprite.svg в папке сборки, подпапке с изображениями. Из SVG-файлов этой папки будет собран спрайт — файл svg-sprite.svg в папке сборки, подпапке с изображениями.
src/index.html
View file @ e2eac246
...@@ -9,12 +9,11 @@ ...@@ -9,12 +9,11 @@
</head> </head>
<body> <body>
@@include('_include/page_header.html') @@include('blocks/page-header/page-header.html')
<h1>Заголовок h1</h1> <h1>Содержимое</h1>
<img src="img/TEMP_DavidBlaine.jpg" alt="">
@@include('_include/page_footer.html') @@include('blocks/page-footer/page-footer.html')
@@include('_include/page_bottom.html') @@include('_include/page_bottom.html')
</body> </body>
</html> </html>
src/less/blocks/field-actions.less deleted 100644 → 0
View file @ 51b1ff35
.field-actions {
display: block;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
src/less/readme.md 0 → 100644
View file @ e2eac246
Глобальные стилевые файлы и диспетчер подключений. Стилизация блоков — в папках блоков.
src/less/style.less
View file @ e2eac246
@import "./src/less/variables.less"; @import "./src/less/variables.less";
@import "./src/less/mixins/mixins.less"; @import "./src/less/mixins/mixins.less";
@import "./src/less/global_scaffolding.less"; @import "./src/less/global-scaffolding.less";
@import "./src/less/global_print.less"; @import "./src/less/global-print.less";
@import "./src/less/global_grid.less"; @import "./src/less/global-grid.less";
@import "./src/blocks/btn/btn.less";
@import "./src/blocks/table-responsive/table-responsive.less"; @import "./src/blocks/table-responsive/table-responsive.less";
@import "./src/blocks/field-text/field-text.less"; @import "./src/blocks/field-text/field-text.less";
@import "./src/blocks/field-checkbox/field-checkbox.less"; @import "./src/blocks/field-checkbox/field-checkbox.less";
...@@ -15,13 +16,5 @@ ...@@ -15,13 +16,5 @@
@import "./src/blocks/field-range/field-range.less"; @import "./src/blocks/field-range/field-range.less";
@import "./src/blocks/field-file/field-file.less"; @import "./src/blocks/field-file/field-file.less";
@import "./src/blocks/field-actions/field-actions.less"; @import "./src/blocks/field-actions/field-actions.less";
@import "./src/blocks/form/form.less";
// @import "blocks/btn.less"; @import "./src/blocks/form/form--horizontal.less";
// @import "blocks/form.less";
// @import "blocks/field-text.less";
// @import "blocks/field-radio.less";
// @import "blocks/field-radio--custom.less";
// @import "blocks/field-select.less";
// @import "blocks/field-file.less";
// @import "blocks/field-range.less";
// @import "blocks/field-actions.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