Merge branch 'dev' of https://github.com/picocss/pico into dev

css/pico.classless.css

@@ -19,10 +19,9 @@
   --typography-spacing-vertical: 1.5rem;
   --block-spacing-vertical: calc(var(--spacing) * 2);
   --block-spacing-horizontal: var(--spacing);
-  --grid-spacing-vertical: 0;
-  --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -981,6 +980,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1081,6 +1081,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),

css/pico.css

@@ -23,6 +23,7 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -798,13 +799,16 @@ ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
-hgroup {
+hgroup,
+.headings {
   margin-bottom: var(--typography-spacing-vertical);
 }
-hgroup > * {
+hgroup > *,
+.headings > * {
   margin-bottom: 0;
 }
-hgroup > *:last-child {
+hgroup > *:last-child,
+.headings > *:last-child {
   --color: var(--muted-color);
   --font-weight: unset;
   font-size: 1rem;
@@ -1163,6 +1167,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1263,6 +1268,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),

css/pico.fluid.classless.css

@@ -19,10 +19,9 @@
   --typography-spacing-vertical: 1.5rem;
   --block-spacing-vertical: calc(var(--spacing) * 2);
   --block-spacing-horizontal: var(--spacing);
-  --grid-spacing-vertical: 0;
-  --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -951,6 +950,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1051,6 +1051,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),

css/pico.slim.css

@@ -26,6 +26,7 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {
@@ -727,13 +728,16 @@ ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
-hgroup {
+hgroup,
+.headings {
   margin-bottom: var(--typography-spacing-vertical);
 }
-hgroup > * {
+hgroup > *,
+.headings > * {
   margin-bottom: 0;
 }
-hgroup > *:last-child {
+hgroup > *:last-child,
+.headings > *:last-child {
   --color: var(--muted-color);
   --font-weight: unset;
   font-size: 1rem;
@@ -1091,6 +1095,7 @@ button[disabled],
 input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
+a[role=button]:not([href]),
 a[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
@@ -1191,6 +1196,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 input:not([type=checkbox]):not([type=radio]),

css/themes/default.css

@@ -19,6 +19,7 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
 @media (min-width: 576px) {

docs/modal.html

@@ -27,7 +27,7 @@
 &lt;/<b>dialog</b>&gt;</code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button><footer class="code"><pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
 &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
   <i>data-target</i>=<u>"modal-example"</u>
-  <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+  <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
   Launch demo modal
 &lt;/<b>button</b>&gt;
 
@@ -38,7 +38,7 @@
       <i>aria-label</i>=<u>"Close"</u>&gt;
       <i>class</i>=<u>"close"</u>
       <i>data-target</i>=<u>"modal-example"</u>
-      <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+      <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
     &lt;/<b>a</b>&gt;
     &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
     &lt;<b>p</b>&gt;
@@ -51,13 +51,13 @@
         <i>role</i>=<u>"button"</u>&gt;
         <i>class</i>=<u>"secondary"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Cancel
       &lt;/<b>a</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
         <i>role</i>=<u>"button"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Confirm
       &lt;/<b>a</b>&gt;
     &lt;/<b>footer</b>&gt;

docs/src/modal.html

@@ -98,7 +98,7 @@
 <pre><code><em>&lt;!-- Button to trigger the modal --&gt;</em>
 &lt;<b>button</b> <i>class</i>=<u>"contrast"</u>
   <i>data-target</i>=<u>"modal-example"</u>
-  <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+  <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
   Launch demo modal
 &lt;/<b>button</b>&gt;
 
@@ -109,7 +109,7 @@
       <i>aria-label</i>=<u>"Close"</u>&gt;
       <i>class</i>=<u>"close"</u>
       <i>data-target</i>=<u>"modal-example"</u>
-      <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+      <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
     &lt;/<b>a</b>&gt;
     &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
     &lt;<b>p</b>&gt;
@@ -122,13 +122,13 @@
         <i>role</i>=<u>"button"</u>&gt;
         <i>class</i>=<u>"secondary"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Cancel
       &lt;/<b>a</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#confirm"</u>
         <i>role</i>=<u>"button"</u>
         <i>data-target</i>=<u>"modal-example"</u>
-        <i>onClick</i>=<u>"toggleModal()"</u>&gt;
+        <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
         Confirm
       &lt;/<b>a</b>&gt;
     &lt;/<b>footer</b>&gt;

docs/src/typography.html

@@ -1,11 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    ${require('./_head.html') 
+    ${require('./_head.html') title="Typography" description="All typographic
-      title="Typography" 
+    elements are responsive, allowing text to scale gracefully across devices
-      description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
+    and viewports." canonical="typography.html" }
-      canonical="typography.html"
-    }
   </head>
 
   <body>
@@ -18,7 +16,10 @@
         <section id="typography">
           <hgroup>
             <h1>Typography</h1>
-            <h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
+            <h2>
+              All typographic elements are responsive, allowing text to scale
+              gracefully across devices and viewports.
+            </h2>
           </hgroup>
           <figure>
             <table role="grid">
@@ -109,38 +110,48 @@
             <h5>Heading 5</h5>
             <h6>Heading 6</h6>
             <footer class="code">
-
+              <pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
-<pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
 &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
 &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
 &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
 &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
 &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
-
             </footer>
           </article>
-          <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
+          <p>
+            Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
+            <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
+            <code><i>margin-bottom</i></code> are collapsed and the
+            <code>:last-child</code> is muted.
+          </p>
           <article aria-label="Hgroup example">
-            <hgroup>
+            <div class="headings">
               <h2>Heading 2</h2>
               <h3>Subtitle for heading 2</h3>
-            </hgroup>
+            </div>
             <footer class="code">
-
+              <pre><code>&lt;<b>hgroup</b>&gt;
-<pre><code>&lt;<b>hgroup</b>&gt;
   &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
   &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
 &lt;/<b>hgroup</b>&gt;</code></pre>
 
+              <pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
+  &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
+  &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
+&lt;/<b>div</b>&gt;</code></pre>
             </footer>
           </article>
+
           <p>Inline text elements:</p>
           <article aria-label="Inline text examples">
             <div class="grid">
               <div>
                 <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
                 <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
-                <p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
+                <p>
+                  <em>Italic</em> <code>i</code> <code>em</code>
+                  <code>cite</code>
+                </p>
                 <p><del>Deleted</del> <code>del</code></p>
                 <p><ins>Inserted</ins> <code>ins</code></p>
                 <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
@@ -155,44 +166,46 @@
               </div>
             </div>
           </article>
-          <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
+          <p>
+            Links come with <code>.secondary</code> and
+            <code>.contrast</code> styles.
+          </p>
           <article aria-label="Links examples">
-            <a href="#" onclick="event.preventDefault()">Primary</a><br>
+            <a href="#" onclick="event.preventDefault()">Primary</a><br />
-            <a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
+            <a href="#" onclick="event.preventDefault()" class="secondary"
-            <a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
+              >Secondary</a
+            ><br />
+            <a href="#" onclick="event.preventDefault()" class="contrast"
+              >Contrast</a
+            ><br />
             <footer class="code">
-
+              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
-<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
-
             </footer>
           </article>
           <p>Blockquote:</p>
           <article aria-label="Blockquote example">
             <blockquote>
-              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
+              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit
-              Nam at dui sit amet ipsum cursus ornare."
+              non. Nam at dui sit amet ipsum cursus ornare."
               <footer>
                 <cite>- Phasellus eget lacinia</cite>
               </footer>
             </blockquote>
             <footer class="code">
-
+              <pre><code>&lt;<b>blockquote</b>&gt;
-<pre><code>&lt;<b>blockquote</b>&gt;
   "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
   Nam at dui sit amet ipsum cursus ornare."
   &lt;<b>footer</b>&gt;
     &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
   &lt;/<b>footer</b>&gt;
 &lt;/<b>blockquote</b>&gt;</code></pre>
-
             </footer>
           </article>
         </section>
 
         ${require('./_footer.html')}
-        
       </div>
     </main>
     <script src="js/commons.min.js"></script>

scss/_variables.scss

@@ -23,6 +23,9 @@ $enable-responsive-typography: true !default;
 // .classless version if disabled
 $enable-classes: true !default;
 
+// Enable .grid class
+$enable-grid: true !default;
+
 // Enable transitions
 $enable-transitions: true !default;
 

scss/content/_button.scss

@@ -195,13 +195,12 @@ input[type="reset"] {
 }
 
 // Button [disabled]
-button,
+button[disabled],
-input[type="submit"],
+input[type="submit"][disabled],
-input[type="button"],
+input[type="button"][disabled],
-input[type="reset"],
+input[type="reset"][disabled],
-a[role="button"] {
+a[role="button"]:not([href]),
-  &[disabled] {
+a[role="button"][disabled] {
   opacity: 0.5;
   pointer-events: none;
-  }
 }

scss/content/_form.scss

@@ -129,6 +129,7 @@ label,
 fieldset legend {
   display: block;
   margin-bottom: calc(var(--spacing) * 0.25);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
 }
 
 // Blocks, 100%

scss/content/_typography.scss

@@ -181,7 +181,8 @@ ul {
 }
 
 // Heading group
-hgroup {
+@if $enable-classes == false {
+  hgroup {
     margin-bottom: var(--typography-spacing-vertical);
 
     > * {
@@ -194,6 +195,25 @@ hgroup {
       font-size: 1rem;
       font-family: unset;
     }
+  }
+}
+
+@if $enable-classes {
+  hgroup,
+  .headings {
+    margin-bottom: var(--typography-spacing-vertical);
+
+    > * {
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      --color: var(--muted-color);
+      --font-weight: unset;
+      font-size: 1rem;
+      font-family: unset;
+    }
+  }
 }
 
 // Paragraphs

scss/layout/_grid.scss

@@ -1,4 +1,4 @@
-@if $enable-classes {
+@if ($enable-classes and $enable-grid) {
   /**
  * Grid
  * Minimal grid system with auto-layout columns

scss/themes/default/_styles.scss

@@ -50,14 +50,18 @@
   --block-spacing-vertical: calc(var(--spacing) * 2);
   --block-spacing-horizontal: var(--spacing);
 
-  // Spacings .grid
+  @if ($enable-classes and $enable-grid) {
     --grid-spacing-vertical: 0;
     --grid-spacing-horizontal: var(--spacing);
+  }
 
   // Spacings for form elements and button
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
 
+  // Font weight for form labels & fieldsets legend
+  --form-label-font-weight: var(--font-weight);
+
   // Transitions
   --transition: 0.2s ease-in-out;
 }