Skip to content

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

add

parent ec81e28b
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 51 deletions
gulpfile.js
View file @ 478fb37d
...@@ -23,6 +23,7 @@ const notify = require('gulp-notify'); ...@@ -23,6 +23,7 @@ const notify = require('gulp-notify');
const uglify = require('gulp-uglify'); const uglify = require('gulp-uglify');
const concat = require('gulp-concat'); const concat = require('gulp-concat');
const browserSync = require('browser-sync').create(); const browserSync = require('browser-sync').create();
const replace = require('gulp-replace');
// Запуск `NODE_ENV=production gulp [задача]` приведет к сборке без sourcemaps // Запуск `NODE_ENV=production gulp [задача]` приведет к сборке без sourcemaps
const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev'; const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
...@@ -48,7 +49,6 @@ gulp.task('less', function () { ...@@ -48,7 +49,6 @@ gulp.task('less', function () {
.pipe(rename('style.min.css')) .pipe(rename('style.min.css'))
.pipe(debug({title: "RENAME:"})) .pipe(debug({title: "RENAME:"}))
.pipe(gulpIf(isDev, sourcemaps.write('.'))) .pipe(gulpIf(isDev, sourcemaps.write('.')))
.pipe(gulpIf(isDev, debug({title: "LESS SOURCEMAPS:"})))
.pipe(gulp.dest('build/css')); .pipe(gulp.dest('build/css'));
}); });
...@@ -109,6 +109,7 @@ gulp.task('html', function() { ...@@ -109,6 +109,7 @@ gulp.task('html', function() {
prefix: '@@', prefix: '@@',
basepath: '@file' basepath: '@file'
})) }))
.pipe(replace(/\n<!--DEVCOMMENT[\s\S]+?-->/gm, ''))
.pipe(gulp.dest('build/')); .pipe(gulp.dest('build/'));
}); });
...@@ -167,7 +168,9 @@ gulp.task('watch', function () { ...@@ -167,7 +168,9 @@ gulp.task('watch', function () {
gulp.task('serve', function () { gulp.task('serve', function () {
gulp.series('build'); gulp.series('build');
browserSync.init({ browserSync.init({
server: 'build' server: 'build',
notify: false,
startPath: '_components_library.html'
}); });
browserSync.watch('build/**/*.*').on('change', browserSync.reload); browserSync.watch('build/**/*.*').on('change', browserSync.reload);
}); });
......
src/_components_library.html 0 → 100644
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/_include/page_bottom.html
View file @ 478fb37d
<!-- <!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.2.2.0.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="js/jquery.2.2.0.min.js"><\/script>')</script>
--> -->
......
src/_include/page_footer.html
View file @ 478fb37d
<footer class="page-footer"> <footer class="page-footer">
<div class="container"> Копирайт
<div class="row"> </footer>
<div class="col-xs-4">
Копирайт
</div>
<div class="col-xs-8">
Информация к размышлению над судьбой хомяка в вакууме.
</div>
</div>
</div>
</footer>
\ No newline at end of file
src/_include/page_head.html
View file @ 478fb37d
<!-- <meta name="viewport" content="width=1000"> --> <!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
<meta name="viewport" content="width=1000">
-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/style.min.css" rel="stylesheet" media="screen"> <link href="css/style.min.css" rel="stylesheet" media="screen">
<script> <script>
// Маркер работающего javascript
document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script> </script>
<!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
<link href="/favicon.ico" rel="icon" type="image/x-icon"> <link href="/favicon.ico" rel="icon" type="image/x-icon">
<link rel="icon" sizes="192x192" href="img/favicons/favicon-192x192.png"> <link rel="icon" sizes="192x192" href="img/favicons/favicon-192x192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png"> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">
...@@ -20,3 +24,4 @@ ...@@ -20,3 +24,4 @@
<meta name="theme-color" content="#2b2f38"> <meta name="theme-color" content="#2b2f38">
<meta name="msapplication-TileColor" content="#2b2f38"> <meta name="msapplication-TileColor" content="#2b2f38">
<meta name="msapplication-TileImage" content="img/favicons/mstile-144x144.png"> <meta name="msapplication-TileImage" content="img/favicons/mstile-144x144.png">
-->
src/_include/page_header.html
View file @ 478fb37d
<header class="page-header"> <header class="page-header">
<div class="container"> Логотип
<div class="row"> </header>
<div class="col-xs-4">
Логотип
</div>
<div class="col-xs-8">
Навигация
</div>
</div>
</div>
</header>
\ No newline at end of file
src/less/global_grid.less
View file @ 478fb37d
.container {
.container();
}
.row { .row {
.row(); .row();
} }
......
src/less/global_scaffolding.less
View file @ 478fb37d
...@@ -40,7 +40,7 @@ textarea { ...@@ -40,7 +40,7 @@ textarea {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Теги: общее и типографика // Базис
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
*, *:before, *:after { *, *:before, *:after {
...@@ -52,6 +52,7 @@ html { ...@@ -52,6 +52,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;
min-width: 320px;
} }
body { body {
...@@ -60,6 +61,7 @@ body { ...@@ -60,6 +61,7 @@ body {
line-height: @line-height; line-height: @line-height;
color: @text-color; color: @text-color;
background: @body-bg; background: @body-bg;
margin: 0;
} }
a { a {
...@@ -79,6 +81,10 @@ img { ...@@ -79,6 +81,10 @@ img {
//------------------------------------------------------------------------------
// Типографика
//------------------------------------------------------------------------------
// .h1, // .h1,
h1 { font-size: @font-size--h1; } h1 { font-size: @font-size--h1; }
// .h2, // .h2,
...@@ -93,24 +99,21 @@ h5 { font-size: @font-size--h5; } ...@@ -93,24 +99,21 @@ h5 { font-size: @font-size--h5; }
h6 { font-size: @font-size--h6; } h6 { font-size: @font-size--h6; }
// .h1, .h2, .h3, .h4, .h5, .h6, // .h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6 {
{
font-family: @font-family--headings; font-family: @font-family--headings;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.4;
color: currentColor; color: currentColor;
} }
// .h1, .h2, .h3, // .h1, .h2, .h3,
h1, h2, h3 h1, h2, h3 {
{
margin-top: @line-height; margin-top: @line-height;
margin-bottom: (@line-height / 2); margin-bottom: (@line-height / 2);
} }
// .h4, .h5, .h6, // .h4, .h5, .h6,
h4, h5, h6 h4, h5, h6 {
{
margin-top: (@line-height / 2); margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2); margin-bottom: (@line-height / 2);
} }
...@@ -118,8 +121,24 @@ h4, h5, h6 ...@@ -118,8 +121,24 @@ h4, h5, h6
p, p,
ul, ul,
ol, ol,
blockquote { dl,
margin: 0 0 (@line-height / 2); blockquote,
address,
pre,
figure {
margin-top: 0;
margin-bottom: (@line-height / 2);
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
} }
hr { hr {
...@@ -131,12 +150,12 @@ hr { ...@@ -131,12 +150,12 @@ hr {
// .small, // .small,
small { small {
font-size: @font-size--small; font-size: 80%;
} }
// .mark, // .mark,
mark { mark {
background-color: #ff0; background: #ff0;
padding: .2em; padding: .2em;
} }
...@@ -152,3 +171,29 @@ blockquote { ...@@ -152,3 +171,29 @@ blockquote {
} }
} }
} }
//------------------------------------------------------------------------------
// Таблицы
//------------------------------------------------------------------------------
table {
border: none;
}
caption {
padding-top: .3em;
padding-bottom: .3em;
color: @text-color--muted;
text-align: left;
}
th {
text-align: left;
padding: .3em;
}
td {
padding: .3em;
}
src/less/mixins/mixins.less
View file @ 478fb37d
//------------------------------------------------------------------------------
// Генератор правил для контейнера
//------------------------------------------------------------------------------
.container() {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
@media (min-width: @screen-sm) {
width: @container-sm;
}
@media (min-width: @screen-md) {
width: @container-md;
}
@media (min-width: @screen-lg) {
width: @container-lg;
}
@media (min-width: @screen-xl) {
width: @container-xl;
}
@media (min-width: @screen-xxl) {
width: @container-xxl;
}
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Генератор правил для прямого родителя модульной сетки // Генератор правил для прямого родителя модульной сетки
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
......
src/less/variables.less
View file @ 478fb37d
...@@ -14,6 +14,19 @@ ...@@ -14,6 +14,19 @@
// Семантические вета
@text-color: @gray-darkest;
@text-color--muted: @gray-dark;
@body-bg: #fff;
@link-color: @color-main;
@link-color--hover: darken(@color-main, 15%);
@border-color: @gray-light;
// Базовая типографика (Mobile: 1 rem = 10px) // Базовая типографика (Mobile: 1 rem = 10px)
@font-size: 1.6rem; @font-size: 1.6rem;
...@@ -33,22 +46,10 @@ ...@@ -33,22 +46,10 @@
// Цвета
@text-color: @gray-darkest;
@body-bg: #fff;
@link-color: @color-main;
@link-color--hover: darken(@color-main, 15%);
@border-color: @gray-light;
// Модульная сетка // Модульная сетка
@grid-columns: 12; @grid-columns: 12;
@grid-gutter-width: 30px; @grid-gutter-width: 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