v4.0.4

Author: SimonPadbury

.eleventyignore

@@ -1,3 +1 @@
-README.md
-_drafts/
-_src/
+README.md

LOG.md

@@ -1,5 +1,13 @@
 # Log
 
+## 6 March 2021 – Codebase 4.0.4
+
+* Minor improvements to typography: 
+    * slightly reducing H3 and H4 heading sizes, so that there is more difference between couplets of H2/H3 and H3/H4;
+    * Adding margin below OL and UL, so that it is the same as for paragraphs and headings (instead of the space between each LI).
+* Downloadable zipped `dist` folder, prepared using `gulp-zip`.
+* Improvements to the docs.
+
 ## 27 February 2021 - Codebase 4.0.3
 
 * Added the `.panel-responsive component.

README.md

@@ -2,7 +2,7 @@
 
 The super tiny website frontend library.
 
-_Version 4.0.3_
+_Version 4.0.4_
 
 ## Features
 

docs/dist.zip

@@ -1,9 +1,9 @@
 /*!
- * CODEBASE v.4 ACTIVATOR  (jQuery version)
+ * CODEBASE ACTIVATOR  (jQuery version)
  * Use only if you want to support Internet Explorer 11
  * Use with =< jQuery 2.2.4 (do not use with jQuery 3.x)
  * MIT Licence
- * v4.0.2
+ * Unchanged since v.4.0.2
  */
 
 (function ($) {

docs/dist/activator.jquery.js

@@ -178,10 +178,10 @@
       <a href="/codebase-4/">Home</a>
     </li>
     <li class="hide-below-md">
-      <a href="/codebase-4/docs/1-getting-started/simple-html-setup/">Documentation</a>
+      <a href="/codebase-4/docs/1-getting-started/introduction/">Documentation</a>
     </li>
     <li class="hide-below-md">
-      <a href="https://github.com/codebase-frontend-library/codebase-4/archive/master.zip">Download</a>
+      <a href="/codebase-4/dist.zip">Download</a>
     </li>
     <li class="hide-below-md">
       <a href="https://github.com/codebase-frontend-library/codebase-4">GitHub</a>
@@ -263,7 +263,7 @@
               <a href="/codebase-4/">Home</a>
             </li>
             <li>
-              <a href="https://github.com/codebase-frontend-library/codebase-4/archive/master.zip">Download</a>
+              <a href="/codebase-4/dist.zip">Download</a>
             </li>
             <li>
               <a href="https://github.com/codebase-frontend-library/codebase-4">GitHub</a>
@@ -293,7 +293,7 @@ <h4 class="mt-3 px-2 t-thin t-loose">Documentation</h4>
             x-bind:style="revealed == true ? 'max-height: ' + $refs.panel.scrollHeight + 'px' : ''">
             <div class="px-2">
               <ul class="menu">
-                <li><a href="/codebase-4/docs/1-getting-started/simple-html-setup">Simple HTML setup</a></li>
+                <li><a href="/codebase-4/docs/1-getting-started/introduction/">Introduction</a></li>
                 <li><a href="/codebase-4/docs/1-getting-started/codebase-scss-library">The Codebase SCSS library</a></li>
                 <li><a href="/codebase-4/docs/1-getting-started/alpinejs-or-activator">AlpineJS or Activator components</a></li>
                 <li><a href="/codebase-4/docs/1-getting-started/responsive-design">Responsive design</a></li>
@@ -566,17 +566,17 @@ <h4 class="mt-3 px-2 t-thin t-loose">Documentation</h4>
   </div>
 </div>
 
-  <article class="flex-item-grow-1">
+  <article class="w-full">
 
     <header class="mb-3 pt-responsive pb-3">
-        <div class="container-grid container-grid-sm py-3">
-          <div class="t-lg">
-            
-            <div class="mb-1 bb-thin pb-2 t-uppercase t-thin t-loose">Getting Started</div>
-            
-            <h1 class="mb-0">Using AlpineJS or Activator in Codebase</h1>    
-          </div>
+      <div class="container-grid container-grid-sm py-3">
+        <div class="t-lg">
+          
+          <div class="mb-1 bb-thin pb-2 t-uppercase t-thin t-loose">Getting Started</div>
+          
+          <h1 class="mb-0">Using AlpineJS or Activator in Codebase</h1>    
         </div>
+      </div>
     </header>
 
     <section id="docs-mainbody" class="container-grid container-grid-sm mb-6">
@@ -587,8 +587,8 @@ <h1 class="mb-0">Using AlpineJS or Activator in Codebase</h1>
 <p>Veteran web designers may still prefer the way <code>activator.js</code> does things. But do try to discover for yourself that AlpineJS is more powerful, because of its declarative approach to DOM manipulation. I recommend Alpine over <code>activator.js</code> for most use cases. It really is worth you taking time to learn something new.</p>
 <p>Besides the Codebase-based AlpineJS demos in these docs, there are plenty of tutorials and videos out there showing you how to use Alpine.</p>
 <div class="grid-sm-2-cols grid-gap my-6 t-center">
-  <a class="mb-3 btn btn-primary rounded-pill" href="/codebase-4/docs/8-alpinejs-components/about-alpinejs-components">Codebase with AlpineJS</a>
-  <a class="mb-3 btn btn-secondary rounded-pill" href="/codebase-4/docs/9-activator-components/about-activator-components">Codebase with Activator</a>
+  <a class="mb-3 btn btn-primary btn-lg rounded-pill" href="/codebase-4/docs/8-alpinejs-components/about-alpinejs-components">Codebase with AlpineJS</a>
+  <a class="mb-3 btn btn-secondary btn-lg rounded-pill" href="/codebase-4/docs/9-activator-components/about-activator-components">Codebase with Activator</a>
 </div>
 <p><strong>Note:</strong> Converting Codebase components from Activator to AlpineJS, or <em>vise versa</em>, involves more than simply swapping out one script for the other. The HTML also needs to be reconfigured. AlpineJS uses its own <em>declarations</em> as HTML attributes. The way that the Codebase <code>activator.js</code> works is completely different – it uses <code>id</code>, <code>aria</code> attributes, <code>data</code> attributes.</p>
 
@@ -615,7 +615,7 @@ <h1 class="mb-0">Using AlpineJS or Activator in Codebase</h1>
       <!-- Codebase logo-->
       <svg  style="height: 4rem; margin-bottom: 1rem;" viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2"><path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"/></svg>
       <span>
-        Codebase <span class="t-thin">4.0.3</span>
+        Codebase <span class="t-thin">4.0.4</span>
       </span>
 
       </span>

docs/dist/activator.js.map

@@ -178,10 +178,10 @@
       <a href="/codebase-4/">Home</a>
     </li>
     <li class="hide-below-md">
-      <a href="/codebase-4/docs/1-getting-started/simple-html-setup/">Documentation</a>
+      <a href="/codebase-4/docs/1-getting-started/introduction/">Documentation</a>
     </li>
     <li class="hide-below-md">
-      <a href="https://github.com/codebase-frontend-library/codebase-4/archive/master.zip">Download</a>
+      <a href="/codebase-4/dist.zip">Download</a>
     </li>
     <li class="hide-below-md">
       <a href="https://github.com/codebase-frontend-library/codebase-4">GitHub</a>
@@ -263,7 +263,7 @@
               <a href="/codebase-4/">Home</a>
             </li>
             <li>
-              <a href="https://github.com/codebase-frontend-library/codebase-4/archive/master.zip">Download</a>
+              <a href="/codebase-4/dist.zip">Download</a>
             </li>
             <li>
               <a href="https://github.com/codebase-frontend-library/codebase-4">GitHub</a>
@@ -293,7 +293,7 @@ <h4 class="mt-3 px-2 t-thin t-loose">Documentation</h4>
             x-bind:style="revealed == true ? 'max-height: ' + $refs.panel.scrollHeight + 'px' : ''">
             <div class="px-2">
               <ul class="menu">
-                <li><a href="/codebase-4/docs/1-getting-started/simple-html-setup">Simple HTML setup</a></li>
+                <li><a href="/codebase-4/docs/1-getting-started/introduction/">Introduction</a></li>
                 <li><a href="/codebase-4/docs/1-getting-started/codebase-scss-library">The Codebase SCSS library</a></li>
                 <li><a href="/codebase-4/docs/1-getting-started/alpinejs-or-activator">AlpineJS or Activator components</a></li>
                 <li><a href="/codebase-4/docs/1-getting-started/responsive-design">Responsive design</a></li>
@@ -566,22 +566,22 @@ <h4 class="mt-3 px-2 t-thin t-loose">Documentation</h4>
   </div>
 </div>
 
-  <article class="flex-item-grow-1">
+  <article class="w-full">
 
     <header class="mb-3 pt-responsive pb-3">
-        <div class="container-grid container-grid-sm py-3">
-          <div class="t-lg">
-            
-            <div class="mb-1 bb-thin pb-2 t-uppercase t-thin t-loose">Getting Started</div>
-            
-            <h1 class="mb-0">The Codebase SCSS Library</h1>    
-          </div>
+      <div class="container-grid container-grid-sm py-3">
+        <div class="t-lg">
+          
+          <div class="mb-1 bb-thin pb-2 t-uppercase t-thin t-loose">Getting Started</div>
+          
+          <h1 class="mb-0">The Codebase SCSS Library</h1>    
         </div>
+      </div>
     </header>
 
     <section id="docs-mainbody" class="container-grid container-grid-sm mb-6">
       <p class="t-lg t-thin">Codebase is, primarily, a highly versatile SCSS library, preprocessed and minified to CSS.</p>
-<p>You can just drop the CSS into your ptoject and use it as-is, but Sass/SCSS aficionados may wish to override the any or many of the <code>!default</code> variables in <code>_src/codebase/scss/00_setup/__default-variables.scss</code>. This can be done as follows:</p>
+<p>You can just drop the CSS into your ptoject and use it as-is, but Sass/SCSS aficionados may wish to override the any or many of the <a href="https://github.com/codebase-frontend-library/codebase-4/blob/master/src/codebase/scss/00_setup/__default-variables.scss">!default variables</a> in <code>_src/codebase/scss/00_setup/__default-variables.scss</code>. This can be done as follows:</p>
 <pre class="language-scss"><code class="language-scss"><span class="token comment">// (1.) In your master SCSS file, override the</span><br><span class="token comment">// Codebase `!default` variables, e.g.</span><br><br><span class="token property"><span class="token variable">$color-background</span></span><span class="token punctuation">:</span> lightseagreen<span class="token punctuation">;</span><br><br><span class="token comment">// (2.) After your overrides, import the </span><br><span class="token comment">// Codebase master file into your SCSS</span><br><br><span class="token keyword">@import</span> <span class="token string">"path/to/codebase/scss/codebase.scss"</span><span class="token punctuation">;</span><br><br><span class="token comment">// (3.) Set your project SCSS styles </span><br><span class="token comment">// after importing Codebase</span><br><br><span class="token selector">body </span><span class="token punctuation">{</span><br><br>  <span class="token comment">// This below will now receive your override </span><br>  <span class="token comment">// for $color-background, instead of the </span><br>  <span class="token comment">// `$color-background: #ffffff !default` </span><br>  <span class="token comment">// from Codebase</span><br>  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token variable">$color-background</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
 <pre class="language-css"><code class="language-css"><span class="token comment">/* (4.) Therefore, your intended CSS <br>        output will be... */</span><br><br><span class="token selector">body</span> <span class="token punctuation">{</span><br>  <span class="token property">background</span><span class="token punctuation">:</span> lightseagreen<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
 
@@ -590,7 +590,7 @@ <h1 class="mb-0">The Codebase SCSS Library</h1>
     <footer class="container-grid container-grid-lg mb-responsive t-center">
       <div class="clearfix bt-thin bb-thin py-2">
 
-        <a class="my-1 float-left btn btn-primary" href="/codebase-4/docs/1-getting-started/simple-html-setup">&larr; Simple HTML setup</a>
+        <a class="my-1 float-left btn btn-primary" href="/codebase-4/docs/1-getting-started/introduction">&larr; Introduction</a>
 
 
         <a class="my-1 float-right btn btn-primary" href="/codebase-4/docs/1-getting-started/alpinejs-or-activator">AlpineJS or Activator &rarr;</a>
@@ -608,7 +608,7 @@ <h1 class="mb-0">The Codebase SCSS Library</h1>
       <!-- Codebase logo-->
       <svg  style="height: 4rem; margin-bottom: 1rem;" viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2"><path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"/></svg>
       <span>
-        Codebase <span class="t-thin">4.0.3</span>
+        Codebase <span class="t-thin">4.0.4</span>
       </span>
 
       </span>