Add block generator logic.

Now we are able to generate new blocks with yeoman.
2022-04-30 01:04:36 +03:00
parent d3b25e2ef5
commit 82362b3ab2
23 changed files with 26579 additions and 12478 deletions
@@ -0,0 +1,7 @@
+(function ($) {
+
+  console.log('Ready!');
+  console.log('jQuery =', $);
+  console.log('Swiper =', window.Swiper);
+
+})(window.jQuery);
@@ -0,0 +1,40 @@
+/**
+ * Use "rem" instead of pixels. 1rem = 16pixels
+ *    No need to use rem in situations of "1px". (usually used for borders width).
+ *
+ * Use BEM naming system for class names: http://getbem.com/naming/
+ *
+ * Use Mobile First approach.
+ *    Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
+ *
+ */
+
+.<%= blockClassName %> {
+
+  &__header {
+    // Header Mobile.
+
+    @media (min-width: 1024px) {
+      // Header Desktop.
+    }
+
+    &-heading {
+      // Child Element.
+    }
+  }
+
+  &__visual {
+    &-image {
+      // Example of BEM usage.
+    }
+  }
+
+  &__content {
+
+  }
+
+  &__footer {
+
+  }
+
+}
@@ -0,0 +1,70 @@
+<section class="<%= blockClassName %>">
+
+  {{!
+  Remove Everything Below:
+  }}
+
+  <style>
+    code {
+      background-color: #eee;
+      color: #333;
+      padding: 1rem 1.5rem;
+      border: 2px solid #d8d8d8;
+      display: inline-block;
+      border-radius: 2px;
+      font-size: 14px;
+    }
+  </style>
+
+  <header class="<%= blockClassName %>__header">
+    <h1 class="<%= blockClassName %>__header-heading">Ready!</h1>
+  </header>
+
+  <div class="<%= blockClassName %>__content">
+    <p>
+      Review the `/data` folder with JSON data files.<br>
+      Don't change data JSON files - use the data as it is.
+    </p>
+    <p>Build the layout based on provided data structure.</p>
+
+    <br><br>
+    <hr>
+
+    <h2>Image Example</h2>
+    <div>
+      <img src="images/demo.jpeg" alt="">
+      <br>
+      <code>
+        &lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt;
+      </code>
+    </div>
+
+    <br><br>
+    <hr>
+
+    <h2>Available Buttons Styling</h2>
+
+    <div>
+      <a href="#" class="btn btn--primary">Primary</a>
+      <br>
+      <code>
+        &lt;a href=&quot;#&quot; class=&quot;btn btn--primary&quot;&gt;Primary&lt;/a&gt;
+      </code>
+    </div>
+
+    <br>
+
+    <div>
+      <a href="#" class="btn btn--secondary">Secondary</a>
+      <br>
+      <code>
+        &lt;a href=&quot;#&quot; class=&quot;btn btn--secondary&quot;&gt;Secondary&lt;/a&gt;
+      </code>
+    </div>
+  </div>
+
+  {{!
+  Remove END
+  }}
+
+</section>