Skip to content

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

Хрень какая-то

parent 3ca4c539
Show whitespace changes
Inline Side-by-side
Showing with 2 additions and 5124 deletions
gulpfile.js
View file @ 737d41b3
...@@ -287,7 +287,7 @@ gulp.task('serve', gulp.series('build', function() { ...@@ -287,7 +287,7 @@ gulp.task('serve', gulp.series('build', function() {
browserSync.init({ browserSync.init({
server: dirs.build, server: dirs.build,
port: port, port: port,
startPath: 'blocks_library.html' startPath: 'index.html'
}); });
gulp.watch([ gulp.watch([
dirs.source + '/*.html', dirs.source + '/*.html',
......
src/blocks_library.html deleted 100644 → 0
View file @ 3ca4c539
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/readme.md deleted 100644 → 0
View file @ 3ca4c539
Это добавочный CSS-файл, которые нужно взять в сборку как отдельный файл.
При при копировании файлы минимизируются и перед расширением файла добавляется `.min`.
Вложенные папки и файлы в них — игнорируются.
src/docs-files/docs.html deleted 100644 → 0
View file @ 3ca4c539
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Библиотека</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="docs.css">
</head>
<body>
<header class="docs-header">
<div class="docs-header__inner">
<h1 class="docs-logo">
<a href="/">Библиотека</a>
</h1>
<form action="" class="docs-search">
<input type="text" placeholder="Найти блок" />
</form>
<nav class="docs-nav">
<ul class="docs-nav__list">
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Главная</a>
</li>
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Github</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="docs-content">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Встретил они которой послушавшись всеми себя заголовок путь единственное одна, гор коварный правилами проектах текст если семь вопрос буквоград образ.</p>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>
src/docs-files/docs.js deleted 100644 → 0
View file @ 3ca4c539
$(document).ready(function(){
// Заполняем блоки, демонстрирующие код
$('.docs-demo').each(function() {
var codeHtml =$(this).find('.docs-demo__demo').html();
var codeArray = $("<div>").text(codeHtml).html().split('\n');
if(!codeArray[codeArray.length]) {
codeArray.splice((codeArray.length - 1), 1); // убираем последний элемент
}
if(!codeArray[0]) {
codeArray.splice(0, 1); // убираем первый элемент
}
var tab = codeArray[0].match( /^\s*/ );
codeArray.forEach(function(item, i) {
codeArray[i] = '<span class="code__line">'+codeArray[i].replace( tab, '' )+'</span>';
});
$(this).find('.code__syntax').append(codeArray);
// console.log(codeArray);
});
// Обрабатываем клик показа/сокрытия блока с кодом
$('.docs-content__code-trigger').on('click', function() {
$(this).closest('.docs-content__code-wrapper').find('.docs-content__code-demo').slideToggle(150);
});
});
src/docs-files/docs.less deleted 100644 → 0
View file @ 3ca4c539
* {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
line-height: 1.3;
min-width: 320px;
color: #333;
}
a {
color: #0000ee;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.docs-header {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 50px;
background-color: rgba(0, 0, 0, 1);
color: #fff;
&__inner {
padding: 0 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
.docs-logo {
margin: 0 0.5em 0 0;
font-size: 24px;
padding: 0.35em 0;
font-weight: 400;
a {
text-decoration: none;
color: #fff;
}
}
.docs-search {
margin-right: 0.5em;
input[type='text'] {
border: 1px solid #555;
padding: 0.5em;
margin: 0;
background-color: transparent;
color: #fff;
&::placeholder {
color: #808080;
opacity: 1;
}
}
}
.docs-nav {
margin-left: auto;
&__list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
&__item {
margin-left: 0.5em;
}
&__link {
display: block;
padding: 0 0.5em;
line-height: 50px;
color: #fff;
}
}
.docs-content {
padding: 50px 1em 1em;
&__title {
font-size: 36px;
font-weight: 400;
margin: 1em 0 0.5em;
}
&__subtitle {
font-size: 24px;
font-weight: 400;
margin: 1em 0 0.5em;
}
&__code-demo {
display: none;
.docs-content__subtitle {
margin-top: 0;
}
}
&__code-trigger {
position: relative;
font-size: 0.8em;
text-align: center;
cursor: pointer;
color: #0000ee;
margin: 0;
padding: 1em 0;
span {
display: inline-block;
position: relative;
z-index: 1;
background-color: #fff;
padding: 0 1em;
}
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #ddd;
}
}
}
.docs-demo {
&__demo {
display: block;
background-color: #f4f4f4;
padding: 1em;
border: 1px solid #ddd;
}
}
.code {
display: block;
width: 100%;
margin: 0;
overflow-x: auto;
background-color: #f4f4f4;
padding: 1em;
border: 1px solid #ddd;
white-space: normal;
tab-size: 2;
max-height: 50rem;
&__line {
display: block;
white-space: pre;
}
}
src/docs-files/docs__block.html deleted 100644 → 0
View file @ 3ca4c539
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Библиотека</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="docs.css">
</head>
<body>
<header class="docs-header">
<div class="docs-header__inner">
<h1 class="docs-logo">
<a href="/">Библиотека</a>
</h1>
<form action="" class="docs-search">
<input type="text" placeholder="Найти блок" />
</form>
<nav class="docs-nav">
<ul class="docs-nav__list">
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Главная</a>
</li>
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Github</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="docs-content">
<h1 class="docs-content__title">Название этого блока</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi sit voluptatem assumenda officiis, porro ullam praesentium aliquid fuga nulla in repellat, sed facere, iusto hic architecto dolores ex alias.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi sit voluptatem assumenda officiis, porro ullam praesentium aliquid fuga nulla in repellat, <a href="asrfg">sed facere</a>, iusto hic architecto dolores ex alias.</p>
<div class="docs-demo">
<div class="docs-demo__demo">
<button>qwerty</button>
</div>
<div class="docs-content__code-wrapper">
<p class="docs-content__code-trigger"><span>Показать/скрыть код</span></p>
<div class="docs-content__code-demo">
<pre class="code"><code class="code__syntax html"></code></pre>
</div>
</div>
</div>
<div class="docs-demo">
<h2 class="docs-content__subtitle">Какая то вариация блока</h2>
<div class="docs-demo__demo">
<button>
<i class="icon-foo"></i>
qwerty
</button>
</div>
<div class="docs-content__code-wrapper">
<p class="docs-content__code-trigger"><span>Показать/скрыть код</span></p>
<div class="docs-content__code-demo">
<pre class="code"><code class="code__syntax html"></code></pre>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>
src/js/global-script.js
View file @ 737d41b3
/*
Поиск ближайшего родителя по селектору
https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ru.md#1.6
*/
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
/*
Запуск по готовности DOM
http://youmightnotneedjquery.com/#ready
Применение: ready(function(){ console.log('ddd'); });
*/
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
// Свой код с jQuery // Свой код с jQuery
// $( document ).ready(function() { // $( document ).ready(function() {
......
src/less/global/global-grid.less deleted 100644 → 0
View file @ 3ca4c539
@import './src/less/variables.less'; // только для удобства обращения к переменным
.container {
.container();
}
.row {
.row();
}
// Классы модульной сетки для XS — срабатывают на всех ширинах
.make-column-list-general-rules(xs); // список всех селекторов .col-xs-... и их обще свойства
.make-columns(@grid-columns, xs); // ширины для каждого селектора .col-xs-... отдельно
.make-offsets(@grid-columns, xs); // левые отступы для каждого селектора .col-xs-offset-...
// Классы модульной сетки для SM — срабатывают на ширине @screen-sm (по умолчанию: 480px)
.make-column-list-general-rules(sm); // список всех селекторов .col-sm-... и их обще свойства
@media (min-width: @screen-sm) {
.make-columns(@grid-columns, sm); // ширины для каждого селектора .col-sm-... отдельно
.make-offsets(@grid-columns, sm); // левые отступы для каждого селектора .col-sm-offset-...
}
// Классы модульной сетки для MD — срабатывают на ширине @screen-md (по умолчанию: 768px)
.make-column-list-general-rules(md); // список всех селекторов .col-md-... и их обще свойства
@media (min-width: @screen-md) {
.make-columns(@grid-columns, md); // ширины для каждого селектора .col-md-... отдельно
.make-offsets(@grid-columns, md); // левые отступы для каждого селектора .col-md-offset-...
}
// Классы модульной сетки для LG — срабатывают на ширине @screen-lg (по умолчанию: 992px)
.make-column-list-general-rules(lg); // список всех селекторов .col-lg-... и их обще свойства
@media (min-width: @screen-lg) {
.make-columns(@grid-columns, lg); // ширины для каждого селектора .col-lg-... отдельно
.make-offsets(@grid-columns, lg); // левые отступы для каждого селектора .col-lg-offset-...
}
// Классы модульной сетки для XL — срабатывают на ширине @screen-xl (по умолчанию: 1200px)
.make-column-list-general-rules(xl); // список всех селекторов .col-xl-... и их обще свойства
@media (min-width: @screen-xl) {
.make-columns(@grid-columns, xl); // ширины для каждого селектора .col-xl-... отдельно
.make-offsets(@grid-columns, xl); // левые отступы для каждого селектора .col-xl-offset-...
}
// Классы модульной сетки для XXL — срабатывают на ширине @screen-xxl (по умолчанию: 1890px)
// .make-column-list-general-rules(xxl); // список всех селекторов .col-xxl-... и их обще свойства
//
// @media (min-width: @screen-xxl) {
// .make-columns(@grid-columns, xxl); // ширины для каждого селектора .col-xxl-... отдельно
// .make-offsets(@grid-columns, xxl); // левые отступы для каждого селектора .col-xxl-offset-...
// }
src/less/global/global-scaffolding.less
View file @ 737d41b3
...@@ -66,7 +66,7 @@ textarea { ...@@ -66,7 +66,7 @@ textarea {
html { html {
box-sizing: border-box; box-sizing: border-box;
font-size: 8px; font-size: 8px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 1);
-ms-overflow-style: scrollbar; -ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */ -ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
min-width: 320px; min-width: 320px;
......
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