Skip to content

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

Добавление библиотеки блоков

parent 1cc2d5d0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 47 deletions
README.md
View file @ 7c578531
......@@ -187,7 +187,7 @@ src/ # Исходные файлы
js/ # - можно положить добавочные js-файлы (нужно подключить в addJsBefore, addJsAfter или copiedJs, иначе игнорируются)
scss/ # - стили (style.scss скомпилируется, прочие нужно подключить в addCssBefore, addCssAfter или singleCompiled, иначе они будут проигнорированы)
index.html # - главная страница проекта
components-demo.html # - библиотека блоков
blocks-demo.html # - библиотека блоков
```
......
package.json
View file @ 7c578531
......@@ -10,6 +10,8 @@
},
"configProject": {
"blocks": {
"page": [],
"typo": [],
"page-header": [],
"page-footer": [],
"sprite-svg": [],
......@@ -25,7 +27,9 @@
"addCssAfter": [
"./src/scss/print.scss"
],
"singleCompiled": [],
"singleCompiled": [
"./src/scss/blocks-library.scss"
],
"addJsBefore": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-migrate/dist/jquery-migrate.min.js",
......
src/blocks-demo.html 0 → 100644
View file @ 7c578531
This diff is collapsed.
src/blocks/blocks-library/blocks-library.less → src/blocks/blocks-library/blocks-library.scss
View file @ 7c578531
@import '../../less/variables.less'; // только для удобства обращения к переменным
.blocks-library {
&__item {
position: relative;
padding: 1rem;
border: 2px dashed @gray-lighter;
border: 2px dashed $gray-lighter;
margin-bottom: 2.5em;
@media (min-width: @screen-md) {
@media (min-width: $screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem;
min-height: 18rem;
margin-bottom: 5rem;
......@@ -27,9 +24,9 @@
height: 2rem;
text-align: right;
white-space: nowrap;
color: @gray-light;
color: $gray-light;
@media (min-width: @screen-md) {
@media (min-width: $screen-md) {
left: 2.5rem;
top: 20rem;
width: 21rem;
......@@ -58,7 +55,7 @@
cursor: pointer;
margin-bottom: 0.3em;
@media (min-width: @screen-md) {
@media (min-width: $screen-md) {
position: absolute;
top: -1.8rem;
left: -4rem;
......@@ -69,12 +66,12 @@
display: block;
width: 3rem;
height: 2px;
background-color: @gray-light;
background-color: $gray-light;
&:before,
&:after {
position: absolute;
background-color: @gray-light;
background-color: $gray-light;
width: 3rem;
height: 2px;
left: 0;
......@@ -95,12 +92,12 @@
.js & {
max-height: 0;
transition-duration: @transition-time;
transition-duration: $transition-time;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.js &--shown {
transition-duration: @transition-time;
transition-duration: $transition-time;
transition-timing-function: ease-in;
max-height: 1000px;
}
......@@ -114,7 +111,7 @@
.js-font-resizer {
position: relative;
@media (min-width: @screen-md) {
@media (min-width: $screen-md) {
&:hover {
......@@ -130,7 +127,7 @@
font-size: 2rem;
transition: opacity 0.3s;
@media (min-width: @screen-md) {
@media (min-width: $screen-md) {
opacity: 0.2;
position: absolute;
top: 0;
......
src/blocks/page/page.js 0 → 100644
View file @ 7c578531
// (function(){
// код
// }());
src/blocks/page/page.scss 0 → 100644
View file @ 7c578531
// Make viewport responsive
// http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@at-root {
@-ms-viewport { /* stylelint-disable-line at-rule-no-vendor-prefix */
width: device-width;
}
}
.page {
box-sizing: border-box;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 1);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
min-width: 320px;
min-height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #fff;
margin: 0;
min-height: 100%;
}
[tabindex='-1']:focus {
outline: none !important;
}
// iOS 'clickable elements' fix for role='button'
[role='button'] {
cursor: pointer;
}
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
a,
// area,
button,
[role='button'],
input,
label,
select,
// summary,
textarea {
touch-action: manipulation;
}
src/blocks/typo/typo.scss 0 → 100644
View file @ 7c578531
$gray: hsl(0, 0%, 50%) !default;
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family--headings: $font-family !default;
$font-family--monospace: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !default;
$font-size: 14px !default;
$font-size--h1: 2.25em !default;
$font-size--h2: 1.875em !default;
$font-size--h3: 1.5em !default;
$font-size--h4: 1.25em !default;
$font-size--h5: 1em !default;
$font-size--h6: 1em !default;
$font-size--small: 0.75em !default;
$line-height: 1.375em !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$screen-sm: 480px !default;
$border-radius: 3px !default;
body {
font-family: $font-family;
font-size: $font-size;
line-height: $line-height;
color: $text-color;
}
// .h1,
h1 {
font-size: $font-size--h1;
}
// .h2,
h2 {
font-size: $font-size--h2;
}
// .h3,
h3 {
font-size: $font-size--h3;
}
// .h4,
h4 {
font-size: $font-size--h4;
}
// .h5,
h5 {
font-size: $font-size--h5;
}
// .h6,
h6 {
font-size: $font-size--h6;
}
// .h1,
// .h2,
// .h3,
// .h4,
// .h5,
// .h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family--headings;
font-weight: 700;
line-height: 1.4;
color: currentColor;
}
// .h1,
// .h2,
// .h3,
h1,
h2,
h3 {
margin-top: $line-height;
margin-bottom: ($line-height / 2);
}
// .h4,
// .h5,
// .h6,
h4,
h5,
h6 {
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
}
.p,
p,
ul,
ol,
dl,
blockquote,
pre,
address,
figure,
table {
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
}
address {
font-style: normal;
}
ul,
ol {
padding-left: 1.8em;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-top: 0;
margin-bottom: 0;
}
li {
line-height: $line-height;
}
dt {
font-weight: 700;
}
dd {
margin-left: 0;
@media (min-width: $screen-sm) {
margin-left: 1.8em;
}
& + dt {
margin-top: ($line-height / 2);
}
}
hr {
margin-top: $line-height;
margin-bottom: $line-height;
border: 0;
border-top: 1px solid $border-color;
}
// .small,
small {
font-size: $font-size--small;
}
sub,
sup {
font-size: 70%;
}
// .mark,
mark {
background: #fcf8e3;
padding: 0.1em 0.3em;
}
b,
strong {
font-weight: bolder;
}
abbr[title] {
border-bottom: 1px dotted;
}
blockquote {
padding: 0 0 0 0.5em;
margin-left: 0;
margin-right: 0;
border-left: 1px solid $border-color;
@media (min-width: $screen-sm) {
padding: 0 0 0 1.8em;
margin-left: 0;
border-left-width: 5px;
}
p,
ul,
ol {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
footer {
text-align: right;
color: $gray;
// &:before {
// content: '— ';
// }
}
}
code,
kbd,
pre,
samp {
font-family: $font-family--monospace;
}
code {
color: $text-color;
background-color: $gray-lighter;
padding: 0.06em 0.3em;
border-radius: $border-radius;
}
kbd {
padding: 0.06em 0.3em;
color: $text-color;
background-color: $gray-lighter;
border-radius: $border-radius;
kbd {
padding: 0;
}
}
pre {
display: block;
width: 100%;
overflow-x: auto;
background-color: $gray-lightest;
padding: 1em;
border-radius: $border-radius;
border: 1px solid $gray-lighter;
white-space: normal;
tab-size: 2;
}
src/components-demo.html deleted 100644 → 0
View file @ 1cc2d5d0
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8">
<title>NTH start project</title>
<meta name="description" content="">
@@include('_include/page_head.html')
</head>
<body>
<h1>Страница демонстрации блоков</h1>
<p>Если какой-либо блок отображен криво, вероятно его стилизация отсутствует в общем стилевом файле (блок не используется на проекте).</p>
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-right-arrow"></use></svg>
<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-left-arrow"></use></svg>
<div class="temp-icon-right-arrow"></div>
<div class="temp-icon-left-arrow"></div>
<p><img src="img/joker.jpg" alt="" width="824" height="460"></p>
<input type="text" value ="qwerty">
@@include('_include/page_bottom.html')
</body>
</html>
src/index.html
View file @ 7c578531
<!DOCTYPE html>
<html class="no-js" lang="ru">
<html class="no-js page" lang="ru">
<head>
<meta charset="utf-8">
......
src/scss/blocks-library.scss 0 → 100644
View file @ 7c578531
@import "./src/scss/variables.scss";
@import "./src/scss/mixins.scss";
@import "./src/blocks/blocks-library/blocks-library.scss";
src/scss/variables.scss
View file @ 7c578531
......@@ -42,7 +42,7 @@ $font-size--h5: 1em;
$font-size--h6: 1em;
$font-size--small: 0.75em;
$line-height: 1.375;
$line-height: 1.375em;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
$font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;
......
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