General sanity-check

 * Correct formatting for consistency and compliance with standards
 * Change some class names so they make sense
 * Update docs to match changes

docs/components.inputs.html

@@ -43,27 +43,27 @@ <h1>Form Inputs</h1>
 
       <h2 id="inputs">Inputs (Text boxes)</h2>
       <p>Input elements are for single-value or single-line contents. They are created by the <code>&lt;input /&gt;</code> HTML tag in combination with the <code>.form-element</code> CSS class.</p>
-      <p>When you have form validation that failed for this input, you can mark it as such with the <code>.is-with-danger</code> modifier class.</p>
+      <p>When you have form validation that failed for this input, you can mark it as such with the <code>.is-danger</code> modifier class.</p>
 
       <h5 id="inputs-example">Example</h5>
 
       <pre class="has-margin-0 has-border-width-0 has-border-radius-0 has-background-color-black has-color-white"><code>&lt;input class="form-element"&gt;
 &lt;input class="form-element" type="datetime"&gt;
-&lt;input class="form-element is-with-danger"&gt;</code></pre>
+&lt;input class="form-element is-danger"&gt;</code></pre>
       <div class="has-border-width-1 has-border-style-solid has-padding-4 has-border-color-tertiary-050">
         <p>Normal form input:</p>
         <input class="form-element">
         <p>Date input:</p>
         <input class="form-element" type="date">
         <p>Form input with failed validation:</p>
-        <input class="form-element is-with-danger">
+        <input class="form-element is-danger">
       </div>
 
 
       <h2 id="textarea">Text areas</h2>
       <p>Text areas are multiline inputs. They are created by the <code>&lt;textarea&gt;</code> HTML tag in combination with the <code>.form-element</code> CSS class.</p>
 
-      <p>When you have form validation that failed for this text area, you can mark it as such with the <code>.is-with-danger</code> modifier class.</p>
+      <p>When you have form validation that failed for this text area, you can mark it as such with the <code>.is-danger</code> modifier class.</p>
 
       <p>It's also possible to change the size of the text area. There are two modifiers for this: <code>.is-large</code> and <code>.is-small</code></p>
 
@@ -72,7 +72,7 @@ <h5 id="textarea-example">Example</h5>
       <pre class="has-margin-0 has-border-width-0 has-border-radius-0 has-background-color-black has-color-white"><code>&lt;textarea class="form-element"&gt;&lt;/textarea&gt;
 &lt;textarea class="form-element is-small"&gt;&lt;/textarea&gt;
 &lt;textarea class="form-element is-large"&gt;&lt;/textarea&gt;
-&lt;textarea class="form-element is-with-danger"&gt;&lt;/textarea&gt;</code></pre>
+&lt;textarea class="form-element is-danger"&gt;&lt;/textarea&gt;</code></pre>
       <div class="has-border-width-1 has-border-style-solid has-padding-4 has-border-color-tertiary-050">
         <p>Normal text area:</p>
         <textarea class="form-element"></textarea>
@@ -81,7 +81,7 @@ <h5 id="textarea-example">Example</h5>
         <p>Large textarea:</p>
         <textarea class="form-element is-large"></textarea>
         <p>Text area with failed validation:</p>
-        <textarea class="form-element is-with-danger"></textarea>
+        <textarea class="form-element is-danger"></textarea>
       </div>
 
 

docs/components.links.html

@@ -82,17 +82,17 @@ <h5 id="colored-example">Example</h5>
       <h2 id="underline">Links with/without underline</h2>
       <p>By default, all links are underlined, if and only if they are hovered. However it is possible to either prevent all underlines or to force them to always exist. Use these classes for this:</p>
       <ul>
-        <li><code>.is-with-underline</code> to force an underline to always exist</li>
-        <li><code>.is-without-underline</code> to prevent underlines from ever appearing</li>
+        <li><code>.is-underlined</code> to force an underline to always exist</li>
+        <li><code>.is-not-underlined</code> to prevent underlines from ever appearing</li>
       </ul>
 
       <h5 id="underline-example">Example</h5>
 
       <pre class="has-margin-0 has-border-width-0 has-border-radius-0 has-background-color-black has-color-white"><code>&lt;a href="..."&gt;normal&lt;/a&gt;
-&lt;a href="..." class="is-with-underline"&gt;with underline&lt;/a&gt;
-&lt;a href="..." class="is-without-underline"&gt;without underline&lt;/a&gt;</code></pre>
+&lt;a href="..." class="is-underlined"&gt;with underline&lt;/a&gt;
+&lt;a href="..." class="is-not-underlined"&gt;without underline&lt;/a&gt;</code></pre>
       <div class="has-border-width-1 has-border-style-solid has-padding-4 has-border-color-tertiary-050">
-        <a href="#!">normal</a>, <a href="#!" class="is-with-underline">with underline</a>, <a href="#!" class="is-without-underline">without underline</a>
+        <a href="#!">normal</a>, <a href="#!" class="is-underlined">with underline</a>, <a href="#!" class="is-not-underlined">without underline</a>
       </div>
 
     </main>

docs/components.modals.html

@@ -160,13 +160,13 @@ <h5 id="backdrop-example">Example</h5>
 
       <h2 id="danger">Danger modal</h2>
 
-      <p>Sometimes a modal shows dangerous things, or dangerous things might happen if you confirm the main action. In these cases, it's appropriate to give the <code>.modal</code> the class <code>.is-dangerous</code>.</p>
+      <p>Sometimes a modal shows dangerous things, or dangerous things might happen if you confirm the main action. In these cases, it's appropriate to give the <code>.modal</code> the class <code>.is-danger</code>.</p>
 
       <p>Of course the actions would be dangerous, too, so you should also add the class <code>.is-danger</code> to buttons inside the modal</p>
 
       <h5 id="danger-example">Example</h5>
 
-      <pre class="has-margin-0 has-border-width-0 has-border-radius-0 has-background-color-black has-color-white"><code>&lt;div class="modal is-dangerous"&gt;
+      <pre class="has-margin-0 has-border-width-0 has-border-radius-0 has-background-color-black has-color-white"><code>&lt;div class="modal is-danger"&gt;
   &lt;div class="modal--container"&gt;
     &lt;div class="modal--header"&gt;
       &lt;button class="button is-close-button modal--header-button"&gt;&times;&lt;/button&gt;
@@ -182,7 +182,7 @@ <h5 id="danger-example">Example</h5>
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
       <div class="has-border-width-1 has-border-style-solid has-padding-4 has-border-color-tertiary-050">
-        <div class="modal is-dangerous" style="position: static;">
+        <div class="modal is-danger" style="position: static;">
           <div class="modal--container">
             <div class="modal--header">
               <button class="button is-close-button modal--header-button">&times;</button>

docs/index.html

@@ -25,7 +25,7 @@
     </header>
     <main class="container has-padding-4">
       <h1 class="has-font-size-display has-font-weight-normal">Designing Codidact</h1>
-      <p class="is-lead">Welcome to the official homepage of the Co-Design framework, the CSS framework for <a href="https://codidact.org" class="is-muted is-without-underline">Codidact</a>.</p>
+      <p class="is-lead">Welcome to the official homepage of the Co-Design framework, the CSS framework for <a href="https://codidact.org" class="is-muted is-not-underlined">Codidact</a>.</p>
       <p>Co-Design's latest version is <span class="badge is-tag">v0.1.1</span>.</p>
 
       <div class="button-list has-padding-2 has-margin-vertical-2">

src/_buttons.scss

@@ -5,9 +5,7 @@
   text-decoration: none !important;
   cursor: pointer;
   display: inline-block;
-
   background-color: lighten($button-primary-color, 32.5%);
-
   color: darken($button-primary-color, 30%);
   padding: $padding-unit*1.5 $padding-unit*3;
   font-weight: 500;
@@ -148,23 +146,26 @@
     }
   }
 
-
   &.is-small {
     font-size: 0.8em;
     padding: $padding-unit*1 $padding-unit*2;
   }
+
   &.is-medium {
     font-size: 1.0em;
     padding: $padding-unit*1.75 $padding-unit*3.5;
   }
+
   &.is-large {
     font-size: 1.1em;
     padding: $padding-unit*2 $padding-unit*4;
   }
+
   &.is-very-large {
     font-size: 1.2em;
     padding: $padding-unit*2.25 $padding-unit*4.5;
   }
+
   &.is-extremely-large {
     font-size: 1.4em;
     padding: $padding-unit*2.5 $padding-unit*5;
@@ -201,7 +202,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  &.is-without-gaps .button {
+  &.is-gutterless .button {
     border-radius: 0;
     margin: 0;
     position: relative;

src/_config.scss

@@ -1,5 +1,4 @@
 /* Typography */
-
 $font-stack-primary: "Red Hat Display", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 $font-stack-code: "Consolas", "Courier New", monospace;
 
@@ -15,15 +14,14 @@ $font-size-gradient: (
   "display": 34px,
 );
 
-$font-size-h1: map-get($font-size-gradient, title);
+$font-size-h1: map-get($font-size-gradient, ltitle);
 $font-size-h2: map-get($font-size-gradient, heading);
 $font-size-h3: map-get($font-size-gradient, larger);
 $font-size-h4: map-get($font-size-gradient, base);
 $font-size-h5: map-get($font-size-gradient, caption);
 $font-size-h6: map-get($font-size-gradient, small);
 
 /* Layout */
-
 $layout-container-width: 72rem;
 
 $margin-h1: 18px 0;
@@ -38,17 +36,14 @@ $margin-p: 9px 0;
 $margin-unit: 4px;
 $padding-unit: 4px;
 
-
 /* Grid */
 $grid-column-count: 12;
 $grid-column-gap: 10px;
 
 $grid-small-to-medium-breakpoint: 32rem;
 $grid-medium-to-large-breakpoint: 64rem;
 
-
 /* Color */
-
 $color-gradient-stops: (
   "050": 30%,
   "100": 25%,
@@ -73,13 +68,11 @@ $tertiary-color: #78909C;
 $link-color: #2980B9;
 $quote-color: #7f8C8D;
 
-
 /* Buttons */
 $button-primary-color: $primary-color;
 $button-danger-color: map-get($secondary-colors, "red");
 $button-muted-color: $tertiary-color;
 
-
 /* Forms */
 $form-color: $tertiary-color;
 $form-danger-color: map-get($secondary-colors, "red");

src/_fontface.scss

@@ -3,141 +3,125 @@
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 400;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Italic.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 400;
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Italic.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 500;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-MediumItalic.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 500;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-MediumItalic.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 700;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-BoldItalic.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 700;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-BoldItalic.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 900;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-BlackItalic.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: italic;
   font-weight: 900;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-BlackItalic.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 400;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Regular.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 400;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Regular.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 500;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Medium.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 500;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Medium.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 700;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Bold.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 700;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Bold.ttf");
-
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 900;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Black.ttf");
-
 }
+
 /* latin */
 @font-face {
   font-family: 'Red Hat Display';
   font-style: normal;
   font-weight: 900;
-
   src: url("../assets/fonts/Red_Hat_Display/RedHatDisplay-Black.ttf");
-
 }

src/_form.scss

@@ -27,7 +27,7 @@ input.form-element {
     border-color: lighten($form-color, 30%);
   }
 
-  &.is-with-danger {
+  &.is-danger {
     border-color: lighten($form-danger-color, 20%);
     background-color: lighten($form-danger-color, 35%);
   }
@@ -54,7 +54,7 @@ textarea.form-element {
     border-color: lighten($form-color, 30%);
   }
 
-  &.is-with-danger {
+  &.is-danger {
     border-color: lighten($form-danger-color, 20%);
     background-color: lighten($form-danger-color, 35%);
   }