Skip to content

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

add

parent ec81e28b
Show 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');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const replace = require('gulp-replace');
// Запуск `NODE_ENV=production gulp [задача]` приведет к сборке без sourcemaps
const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
......@@ -48,7 +49,6 @@ gulp.task('less', function () {
.pipe(rename('style.min.css'))
.pipe(debug({title: "RENAME:"}))
.pipe(gulpIf(isDev, sourcemaps.write('.')))
.pipe(gulpIf(isDev, debug({title: "LESS SOURCEMAPS:"})))
.pipe(gulp.dest('build/css'));
});
......@@ -109,6 +109,7 @@ gulp.task('html', function() {
prefix: '@@',
basepath: '@file'
}))
.pipe(replace(/\n<!--DEVCOMMENT[\s\S]+?-->/gm, ''))
.pipe(gulp.dest('build/'));
});
......@@ -167,7 +168,9 @@ gulp.task('watch', function () {
gulp.task('serve', function () {
gulp.series('build');
browserSync.init({
server: 'build'
server: 'build',
notify: false,
startPath: '_components_library.html'
});
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>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">
<div class="container">
<div class="row">
<div class="col-xs-4">
Копирайт
</div>
<div class="col-xs-8">
Информация к размышлению над судьбой хомяка в вакууме.
</div>
</div>
</div>
</footer>
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">
<link href="css/style.min.css" rel="stylesheet" media="screen">
<script>
// Маркер работающего javascript
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
<link href="/favicon.ico" rel="icon" type="image/x-icon">
<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">
......@@ -20,3 +24,4 @@
<meta name="theme-color" content="#2b2f38">
<meta name="msapplication-TileColor" content="#2b2f38">
<meta name="msapplication-TileImage" content="img/favicons/mstile-144x144.png">
-->
src/_include/page_header.html
View file @ 478fb37d
<header class="page-header">
<div class="container">
<div class="row">
<div class="col-xs-4">
Логотип
</div>
<div class="col-xs-8">
Навигация
</div>
</div>
</div>
</header>
src/less/global_grid.less
View file @ 478fb37d
.container {
.container();
}
.row {
.row();
}
......
src/less/global_scaffolding.less
View file @ 478fb37d
......@@ -40,7 +40,7 @@ textarea {
//------------------------------------------------------------------------------
// Теги: общее и типографика
// Базис
//------------------------------------------------------------------------------
*, *:before, *:after {
......@@ -52,6 +52,7 @@ html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-ms-overflow-style: scrollbar;
min-width: 320px;
}
body {
......@@ -60,6 +61,7 @@ body {
line-height: @line-height;
color: @text-color;
background: @body-bg;
margin: 0;
}
a {
......@@ -79,6 +81,10 @@ img {
//------------------------------------------------------------------------------
// Типографика
//------------------------------------------------------------------------------
// .h1,
h1 { font-size: @font-size--h1; }
// .h2,
......@@ -93,24 +99,21 @@ h5 { font-size: @font-size--h5; }
h6 { font-size: @font-size--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-weight: 700;
line-height: 1.2;
line-height: 1.4;
color: currentColor;
}
// .h1, .h2, .h3,
h1, h2, h3
{
h1, h2, h3 {
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
// .h4, .h5, .h6,
h4, h5, h6
{
h4, h5, h6 {
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
}
......@@ -118,8 +121,24 @@ h4, h5, h6
p,
ul,
ol,
blockquote {
margin: 0 0 (@line-height / 2);
dl,
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 {
......@@ -131,12 +150,12 @@ hr {
// .small,
small {
font-size: @font-size--small;
font-size: 80%;
}
// .mark,
mark {
background-color: #ff0;
background: #ff0;
padding: .2em;
}
......@@ -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 @@
// Семантические вета
@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)
@font-size: 1.6rem;
......@@ -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-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