Merge branch 'develop'

Author: Genki Katsutani

.eslintrc

@@ -15,6 +15,12 @@
         "invalid-attr": false,
         "deprecated-element": true
       }
+    },
+    {
+      "selector": "path",
+      "rules": {
+        "invalid-attr": false
+      }
     }
   ]
 }

.markuplintrc

@@ -3,19 +3,15 @@
   "emmet.includeLanguages": {
     "riot": "html"
   },
-  "files.associations": {
-    "*.riot": "html"
-  },
   "prettier.semi": false,
   "prettier.singleQuote": true,
   "cssvar.files": [
     "./node_modules/open-props/open-props.min.css",
-    // if you have an alternative path to where your styles are located
-    // you can add it in this array of files
     "assets/styles/variables.css"
   ],
-  // Do not ignore node_modules css files, which is ignored by default
   "cssvar.ignore": [],
-  // add support for autocomplete in JS or JS like files
-  "cssvar.extensions": ["css", "postcss", "html"]
+  "cssvar.extensions": ["css", "postcss", "html"],
+  "file_types": {
+    "HTML": ["riot"]
+  }
 }

.vscode/settings.json

@@ -5,6 +5,7 @@ Riot.js を使って静的な HTML や SPA を制作するためのテンプレ
 ## 開発用コマンド一覧
 
 ### 開発用タスク
+
 ```bash
 npm run start
 ```
@@ -17,7 +18,7 @@ npm run build
 
 ## コーディングスタイルガイドライン（🚧 整備中 🚧）
 
-### HTML/CSS 
+### HTML/CSS
 
 HTML と CSS は原則 [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html#Protocol) に準拠することを目指します。
 
@@ -35,15 +36,15 @@ ITCSS と BEM に基づいて命名します。
 
 ITCSS のレイヤー名は意味性をよりわかりやすく以下のようにアレンジしています。
 
-|レイヤー名|役割|
-|---|---|
-|Setting|CSS 変数などを定義|
-|Tools|Mixin などを定義するレイヤー（SASS を使っていないので未使用）|
-|Generic|リセット CSS（sanitize.css）|
-|Elements|デフォルトの要素セレクタスタイルなどを定義|
-|Objects|サイトのデザインに依存しない汎用的なクラスを定義|
-|Components|サイトのデザインに直結したクラスを定義|
-|Utilities|緊急的な上書き用のユーティリティクラスを定義|
+| レイヤー名 | 役割                                                          |
+| ---------- | ------------------------------------------------------------- |
+| Setting    | CSS 変数などを定義                                            |
+| Tools      | Mixin などを定義するレイヤー（SASS を使っていないので未使用） |
+| Generic    | リセット CSS（sanitize.css）                                  |
+| Elements   | デフォルトの要素セレクタスタイルなどを定義                    |
+| Objects    | サイトのデザインに依存しない汎用的なクラスを定義              |
+| Components | サイトのデザインに直結したクラスを定義                        |
+| Utilities  | 緊急的な上書き用のユーティリティクラスを定義                  |
 
 #### IDセレクター、要素セレクターは基本使わず、スタイルの詳細度は原則 010 を保つ。
 
@@ -53,21 +54,27 @@ CSS ファイルに記述するスタイルは、極力 010 （クラス1つ分
 ##### 詳細度が 010 になる記述例
 
 ```css
-.c-class-name { }
-.c-class-name > * { }
-.c-class-name > * + * { }
+.class-name {
+}
+.class-name > * {
+}
+.class-name > * + * {
+}
 ```
 
 #### ステート（状態変化）によるスタイルの変化は属性値を使う
 
 ```css
-.c-button { }
+.button {
+}
 
 /* data 属性値 */
-.c-button[data-active] { }
+.button[data-active] {
+}
 
 /* WAI-ARIA 属性値 */
-.c-button[aria-selected="true"] { }
+.button[aria-selected='true'] {
+}
 ```
 
 ##### 理由

README.md

@@ -0,0 +1 @@
+export default [{}]