Merge pull request #8 from paceaux/develop

Develop

.stylelintrc

@@ -0,0 +1,227 @@
+{
+    "extends": "stylelint-config-standard",
+    "plugins": [
+        "stylelint-order"
+    ],
+    "rules": {
+        "alpha-value-notation": "number",
+        "color-function-notation": ["legacy", {
+            "ignore": ["with-var-inside"]
+        }],
+        "comment-whitespace-inside": null,
+        "custom-property-pattern": "^[a-z][a-zA-Z]+$",
+        "custom-property-empty-line-before": null,
+        "selector-type-no-unknown": null,
+        "string-quotes": "double",
+        "order/properties-order": [
+            "content",
+
+            "quotes",
+            "counter-reset",
+            "counter-increment",
+            "resize",
+            "nav-index",
+            "nav-up",
+            "nav-right",
+            "nav-down",
+            "nav-left",
+            "list-style",
+            "list-style-position",
+            "list-style-type",
+            "list-style-image",
+
+            "align-self",
+            "justify-self",
+            "order",
+
+            "position",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "z-index",
+
+            "display",
+            "visibility",
+            "float",
+            "clear",
+            "overflow",
+            "overflow-x",
+            "overflow-y",
+
+            "clip",
+            "zoom",
+
+            "object-fit",
+            "object-position",
+
+            "color",
+            "font",
+            "font-family",
+            "src",
+            "font-variant-alternates",
+            "font-weight",
+            "font-style",
+            "font-variant",
+            "font-size-adjust",
+            "font-stretch",
+            "font-effect",
+            "font-emphasize",
+            "font-emphasize-position",
+            "font-emphasize-style",
+            "font-smooth",
+            "text-align",
+            "text-align-last",
+            "vertical-align",
+            "white-space",
+            "text-emphasis",
+            "text-emphasis-color",
+            "text-emphasis-style",
+            "text-emphasis-position",
+            "text-indent",
+            "text-justify",
+            "text-transform",
+            "letter-spacing",
+            "word-spacing",
+            "text-outline",
+            "text-wrap",
+            "text-overflow",
+            "text-overflow-ellipsis",
+            "text-overflow-mode",
+            "word-wrap",
+            "word-break",
+            "tab-size",
+            "hyphens",
+            "text-decoration",
+            "text-shadow",
+            "font-size",
+            "line-height",
+
+            "box-sizing",
+            "padding",
+            "padding-top",
+            "padding-right",
+            "padding-bottom",
+            "padding-left",
+            "padding-block-start",
+            "padding-block-end",
+            "padding-inline-start",
+            "padding-inline-end",
+            "width",
+            "min-width",
+            "max-width",
+            "height",
+            "min-height",
+            "max-height",
+
+            "border",
+            "border-collapse",
+            "border-width",
+            "border-style",
+            "border-color",
+            "border-top",
+            "border-top-width",
+            "border-top-style",
+            "border-top-color",
+            "border-right",
+            "border-right-width",
+            "border-right-style",
+            "border-right-color",
+            "border-bottom",
+            "border-bottom-width",
+            "border-bottom-style",
+            "border-bottom-color",
+            "border-left",
+            "border-left-width",
+            "border-left-style",
+            "border-left-color",
+            "border-block-start",
+            "border-block-start-width",
+            "border-block-start-style",
+            "border-block-start-color",
+            "border-inline-end",
+            "border-inline-end-width",
+            "border-inline-end-style",
+            "border-inline-end-color",
+            "border-block-end",
+            "border-block-end-width",
+            "border-block-end-style",
+            "border-block-end-color",
+            "border-inline-start",
+            "border-inline-start-width",
+            "border-inline-start-style",
+            "border-inline-start-color",
+
+            "border-radius",
+            "border-top-left-radius",
+            "border-top-right-radius",
+            "border-bottom-right-radius",
+            "border-bottom-left-radius",
+            "border-image",
+            "border-image-source",
+            "border-image-slice",
+            "border-image-width",
+            "border-image-outset",
+            "border-image-repeat",
+
+            "background",
+            "background-color",
+            "background-image",
+            "background-repeat",
+            "background-attachment",
+            "background-position",
+            "background-position-x",
+            "background-position-y",
+            "background-clip",
+            "background-origin",
+            "background-size",
+
+            "margin",
+            "margin-top",
+            "margin-right",
+            "margin-bottom",
+            "margin-left",
+            "margin-block-start",
+            "margin-block-end",
+            "margin-inline-start",
+            "margin-inline-end",
+
+
+            "direction",
+            "unicode-bidi",
+            "orphans",
+            "widows",
+
+
+            "outline",
+            "outline-width",
+            "outline-style",
+            "outline-color",
+            "outline-offset",
+
+            "box-decoration-break",
+            "box-shadow",
+
+            "opacity",
+            "filter",
+            "transition",
+            "transition-delay",
+            "transition-timing-function",
+            "transition-duration",
+            "transition-property",
+            "transform",
+            "transform-origin",
+            "animation",
+            "animation-name",
+            "animation-duration",
+            "animation-play-state",
+            "animation-timing-function",
+            "animation-delay",
+            "animation-iteration-count",
+            "animation-direction",
+            "cursor",
+            "user-select",
+            "pointer-events"
+        ]
+    }
+}

CHANGELOG.md

@@ -6,10 +6,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### Unreleased
 
-#### v1.0.0
-
-> 10 May 2021
-
-- Inital commit with working version of styles
-- Improves comments for sections
-- corrects references to typography baseline
+- sets test page to pass WCAG 2 AA [`#7`](https://github.com/paceaux/table-baseline/pull/7)
+- 1 add linter [`#4`](https://github.com/paceaux/table-baseline/pull/4)
+- removes color from empty cells. [`#3`](https://github.com/paceaux/table-baseline/pull/3)
+- Inital commit with working version of styles [`eece1f8`](https://github.com/paceaux/table-baseline/commit/eece1f87a8d91f863a655f910235531dae9b6e6b)
+- adds updated table examples [`b41b1f5`](https://github.com/paceaux/table-baseline/commit/b41b1f59d5d2ae1159f123fb5ba3b4b20276b038)
+- adds linter [`b09b39d`](https://github.com/paceaux/table-baseline/commit/b09b39dafdfa7457e0d02b7041b8c93d7c92d142)
+- Adds a col and colgroup example [`875e6f0`](https://github.com/paceaux/table-baseline/commit/875e6f009acf553e71315ceeff678fd4044fd482)
+- Improves comments for sections [`3c5c346`](https://github.com/paceaux/table-baseline/commit/3c5c34641c03c657507b0399e83d59d812f4f964)
+- consistently puts attributes in strings [`ae769eb`](https://github.com/paceaux/table-baseline/commit/ae769eb00c96d657eff73e9953bfc798638db27c)
+- appeases linter [`fbb9a52`](https://github.com/paceaux/table-baseline/commit/fbb9a5210a68ea866734c92770c98e7e9d4f0c0a)
+- autofixes linter complaints [`1598b27`](https://github.com/paceaux/table-baseline/commit/1598b27d073759704a0b7966a31bd05f5e4c968f)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "table-baseline.css",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A good start for styling your tables",
   "main": "src/baseline.table.css",
   "style": "src/baseline.table.css",
@@ -9,7 +9,8 @@
     "src/baseline.table.css"
   ],
   "scripts": {
-    "changelog": "auto-changelog --commit-limit false --unreleased"
+    "changelog": "auto-changelog --commit-limit false --unreleased",
+    "test": "stylelint src/baseline.table.css"
   },
   "repository": {
     "type": "git",
@@ -28,6 +29,9 @@
   "homepage": "https://github.com/paceaux/table-baseline#readme",
   "author": "Frank M. Taylor",
   "devDependencies": {
-    "auto-changelog": "^2.2.1"
+    "auto-changelog": "^2.2.1",
+    "stylelint": "^15.6.1",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-order": "^6.0.3"
   }
 }

src/baseline.table.css

@@ -26,8 +26,10 @@ table {
 
     /* assume for any column headers*/
     --tableColHeaderSize: var(--tableBiggestTitleSize);
+
     /* assume for any row headers*/
     --tableRowHeaderSize: var(--tableBaseTitleSize);
+
     /*used by th in the tbody, thead, tfoot*/
     --tableHeaderSize: var(--tableRowHeaderSize);
 
@@ -42,8 +44,8 @@ table {
     /*===== 
         #Font #FontFamilies #Typeface
     =====*/
-    --tableBaseFontFamily: var(--baseFontFamily,  'Georgia','Times New Roman', 'serif');
-    --tableTitleFontFamily: var(--titleFontFamily, 'Helvetica', 'Arial', 'sans-serif');
+    --tableBaseFontFamily: var(--baseFontFamily,  "Georgia","Times New Roman", "serif");
+    --tableTitleFontFamily: var(--titleFontFamily, "Helvetica", "Arial", "sans-serif");
 
     --tableCaptionTransform: capitalize;
     --tableCaptionFontStyle: italic;
@@ -125,16 +127,21 @@ tbody {
 /*=====
 #Table    
 =====*/
+
+/* intentionally separate the settings from the application for readability */ 
+/* stylelint-disable no-duplicate-selectors */
 table {
-    border-collapse: var(--tableBorderCollapse);
     color: var(--tableBaseTextColor);
     font-family: var(--tableBaseFontFamily);
+    border-collapse: var(--tableBorderCollapse);
 }
 
+/* stylelint-enable no-duplicate-selectors */
+
 caption {
-    font-size:  var(--tableSmallestTextSize);
-    text-transform: var(--tableCaptionTransform);
     font-style: var(--tableCaptionFontStyle);
+    text-transform: var(--tableCaptionTransform);
+    font-size:  var(--tableSmallestTextSize);
 }
 
 
@@ -147,18 +154,11 @@ td {
     vertical-align: var(--tableVertAlign);
     line-height: var(--tableBaseLineHeight);
     padding: var(--tableCellVertPadding);
-    border-color: var(--tableBorderColor);
     border-style: var(--tableBorderStyle);
+    border-color: var(--tableBorderColor);
     background-color: var(--tableCellBgColor);
 }
 
-th:empty,
-td:empty {
-    padding: 0;
-    border-width: 0;
-    --tableCellBgColor: transparent;
-}
-
 td {
     font-size: var(--tableCellSize);
     border-width: var(--borderWidth);
@@ -173,8 +173,8 @@ th {
 
 th[scope="rowgroup"] {
     font-size: var(--tableBiggestTitleSize);
-    border-width: 0;
     padding: var(--tableCellVertPadding);
+    border-width: 0;
 }
 
 thead th {
@@ -185,9 +185,17 @@ tfoot th {
   border-top-width: var(--borderWidth);
 }
 
+th:empty,
+td:empty {
+    padding: 0;
+    border-width: 0;
+    --tableCellBgColor: transparent;
+}
+
 /*=====
 #Table #Rows
 =====*/
+
 /* 
 background-color could be set on the row, 
     but then the td:empty rule would have to set a bg color that matches the web page's bg color.