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

README.md

@@ -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

@@ -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/blocks-library/blocks-library.less → src/blocks/blocks-library/blocks-library.scss

-@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

+// (function(){
+// код
+// }());

src/blocks/page/page.scss

+
+// 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

+$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

-<!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

 <!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

+@import "./src/scss/variables.scss";
+@import "./src/scss/mixins.scss";
+@import "./src/blocks/blocks-library/blocks-library.scss";

src/scss/variables.scss

@@ -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;