Skip to content

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

library

parent 478fb37d
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 39 deletions
gulpfile.js
View file @ f9c71c23
...@@ -170,7 +170,7 @@ gulp.task('serve', function () { ...@@ -170,7 +170,7 @@ gulp.task('serve', function () {
browserSync.init({ browserSync.init({
server: 'build', server: 'build',
notify: false, notify: false,
startPath: '_components_library.html' startPath: '_blocks_library.html'
}); });
browserSync.watch('build/**/*.*').on('change', browserSync.reload); browserSync.watch('build/**/*.*').on('change', browserSync.reload);
}); });
......
src/_blocks_library.html 0 → 100644
View file @ f9c71c23
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок</title>
<meta name="description" content="">
@@include('_include/page_head.html')
</head>
<body>
@@include('_include/page_header.html')
<section class="container blocks-library">
<h1>Библиотека блоков <a href="/">проекта</a></h1>
<p>ДРасположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.</p>
<p><strong>Проектные блоки</strong> — те, что cозданы специально для этого проекта (по умолчанию их нет вовсе).</p>
<p><strong>Исходные блоки</strong> — те, что есть в стартовом наборе блоков проекта (все они отключены по умолчанию).</p>
<section>
<h2>Формы по умолчанию</h2>
</section>
<section>
<h2>Исходный блок: Модульная сетка на flexbox</h2>
<p>Почти как в bootstrap 4.</p>
<p>Классы <code>.container</code>, <code>.row</code>, <code>.col-[xs|sm|md|lg|xl|xxl]-[1 - @grid-columns]</code>. См. глобальную сетку и примеси.</p>
<p><code>.col-[xxl]-[1 - @grid-columns]</code> по умолчанию закомментированы.</p>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
<code>.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3</code>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
<code>.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3</code>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
<code>.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3</code>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
<code>.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3</code>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-lg-3">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
<code>.col-md-2 <br>.col-lg-3</code>
</div>
</div>
<div class="col-md-10 col-lg-9">
<div style="background: #eceeef; border: 1px solid #B1B1B1; padding: .5em;">
<code>.col-md-10 <br>.col-lg-9</code>
</div>
</div>
</div>
<h3>LESS-примеси</h3>
<p>Приоритетным является подход, в котором вместо упомянутых выше классов модульной сетки используются семантические БЭМ-овские классы и less-примеси (см. файл с примесями).</p>
<div class="row">
<div class="col-lg-6">
<pre>
.block-name {
.row(); // БЭМ-блок — обёртка элементов модульной сетки
&__element {
// Разные ширины элемента на разных вьюпортах
.col(xs, 6);
.col(sm, 5);
.col(md, 4);
.col(lg, 3);
.col(xl, 2);
.col(xxl, 1);
}
}
</pre>
111
</div>
<div class="col-lg-6">
<pre>
.block-name {
// в примесь можно передать ширину промежутка между ячейками
.row(10px);
&__first-element {
// в примесь можно передать много данных
.col(xs, 6, @grid-columns, 10px);
}
}
</pre>
</div>
</div>
<hr>
</section>
</section>
@@include('_include/page_footer.html')
@@include('_include/page_bottom.html')
</body>
</html>
src/_components_library.html deleted 100644 → 0
View file @ 478fb37d
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок</title>
<meta name="description" content="">
@@include('_include/page_head.html')
</head>
<body>
@@include('_include/page_header.html')
<section class="container">
<h1>Библиотека компонентов <a href="/">проекта</a></h1>
<p>Демонстрация внешнего вида компонентов, из которых собран проект. Расположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.</p>
<p><strong>Проектные блоки</strong> — те, что cозданы специально для этого проекта (по умолчанию их нет вовсе).</p>
<p><strong>Исходные блоки</strong> — те, что есть в стартовом наборе блоков проекта (все они отключены по умолчанию).</p>
<section>
<h2>Исходный блок: Модульная сетка</h2>
<p>Классы <code>.container</code>, <code>.row</code>, <code>.col-[xs|sm|md|lg|xl|xxl]-[1 - @grid-columns]</code>. См. глобальную сетку и примеси.</p>
<hr>
</section>
</section>
@@include('_include/page_footer.html')
@@include('_include/page_bottom.html')
</body>
</html>
src/less/global_scaffolding.less
View file @ f9c71c23
//------------------------------------------------------------------------------
// Базовая стилизация. Одновременно и аналог CSS-normalize, и стилизация тегов:
// базис, типографика, код, таблицы, формы...
// Но только тегов. Блоки описываются в индивидуальных файлах.
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Общие правила // Общие правила
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
...@@ -52,6 +60,7 @@ html { ...@@ -52,6 +60,7 @@ html {
font-size: 10px; font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
-ms-overflow-style: scrollbar; -ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%;
min-width: 320px; min-width: 320px;
} }
...@@ -67,6 +76,7 @@ body { ...@@ -67,6 +76,7 @@ body {
a { a {
color: @link-color; color: @link-color;
text-decoration: none; text-decoration: none;
background-color: transparent;
&:hover, &:hover,
&:focus { &:focus {
...@@ -77,6 +87,7 @@ a { ...@@ -77,6 +87,7 @@ a {
img { img {
max-width: 100%; max-width: 100%;
border: 0;
} }
...@@ -124,9 +135,8 @@ ol, ...@@ -124,9 +135,8 @@ ol,
dl, dl,
blockquote, blockquote,
address, address,
pre,
figure { figure {
margin-top: 0; margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2); margin-bottom: (@line-height / 2);
} }
...@@ -134,6 +144,7 @@ ol ol, ...@@ -134,6 +144,7 @@ ol ol,
ul ul, ul ul,
ol ul, ol ul,
ul ol { ul ol {
margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -159,6 +170,11 @@ mark { ...@@ -159,6 +170,11 @@ mark {
padding: .2em; padding: .2em;
} }
b,
strong {
font-weight: bolder;
}
blockquote { blockquote {
padding: @line-height; padding: @line-height;
border-left: 5px solid @border-color; border-left: 5px solid @border-color;
...@@ -172,6 +188,43 @@ blockquote { ...@@ -172,6 +188,43 @@ blockquote {
} }
} }
code,
kbd,
pre,
samp {
font-family: @font-family--monospace;
}
code {
color: @text-color;
background-color: @gray-lightest;
padding: .2em .4em;
border-radius: @border-radius;
}
kbd {
padding: .2em .4em;
color: @text-color;
background-color: @gray-light;
border-radius: @border-radius;
kbd {
padding: 0;
}
}
pre {
display: block;
width: 100%;
margin-top: @line-height;
margin-bottom: @line-height;
overflow-x: scroll;
background-color: @gray-lightest;
padding: .5em;
border-radius: @border-radius;
border: 1px solid @border-color;
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
...@@ -197,3 +250,82 @@ th { ...@@ -197,3 +250,82 @@ th {
td { td {
padding: .3em; padding: .3em;
} }
//------------------------------------------------------------------------------
// Формы
//------------------------------------------------------------------------------
label {
display: inline-block;
}
button {
overflow: visible;
&:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
line-height: inherit;
font: inherit;
border-radius: 0;
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="search"] {
-webkit-appearance: none;
}
input[type="checkbox"],
input[type="radio"] {
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
border: 0;
margin-bottom: .5em;
font-size: 1em;
line-height: inherit;
}
src/less/variables.less
View file @ f9c71c23
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
// Семантические вета // Семантические цвета
@text-color: @gray-darkest; @text-color: @gray-darkest;
@text-color--muted: @gray-dark; @text-color--muted: @gray-dark;
...@@ -38,10 +38,11 @@ ...@@ -38,10 +38,11 @@
@font-size--h6: 1.6rem; @font-size--h6: 1.6rem;
@font-size--small: 1.1rem; @font-size--small: 1.1rem;
@line-height: 1.4; @line-height: 1.4em;
@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;
@font-family--monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@font-family--headings: @font-family; @font-family--headings: @font-family;
...@@ -60,10 +61,15 @@ ...@@ -60,10 +61,15 @@
@screen-md: 768px; @screen-md: 768px;
@screen-lg: 992px; @screen-lg: 992px;
@screen-xl: 1200px; @screen-xl: 1200px;
@screen-xxl: 1890px; @screen-xxl: 1800px;
@container-sm: 100%; @container-sm: 100%;
@container-md: 100%; @container-md: 100%;
@container-lg: @screen-lg; @container-lg: @screen-lg - 30;
@container-xl: @screen-xl; @container-xl: @screen-xl - 30;
@container-xxl: @screen-xxl; @container-xxl: @screen-xxl - 30;
// Разное
@border-radius: .3rem;
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