@entva/styleguide 0.0.0

package/css/packages/stylelint/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "stylelint-config-entva",
+  "description": "Shareable entva styleguide config for stylelint",
+  "author": "Max Degterev <max@degterev.me>",
+  "license": "MIT",
+  "readmeFilename": "README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/entva/styleguide"
+  },
+  "bugs": "https://github.com/entva/styleguide/issues",
+  "version": "2.1.0",
+  "keywords": [
+    "linter",
+    "config",
+    "stylelint"
+  ],
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "index.js"
+  ],
+  "scripts": {
+    "reinstall": "rm -rf node_modules package-lock.json && npm install",
+    "test": "node ../../../test ./test css",
+    "prepublishOnly": "npm test"
+  },
+  "devDependencies": {
+    "eslint": "^9.16.0",
+    "eslint-config-entva-base": "^2.1.0",
+    "stylelint": "^16.11.0"
+  },
+  "dependencies": {
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-scss": "^6.10.0"
+  },
+  "peerDependencies": {
+    "stylelint": "^16.x.x"
+  }
+}

package/html/README.md

@@ -0,0 +1,98 @@
+# HTML Style Guide
+
+Write your HTML with taste! If you have any doubts, clear them up on this website: [http://html5doctor.com](http://html5doctor.com)
+
+## Table of Contents
+- [General formatting](general-formatting)
+- [Boolean attributes](boolean-attributes)
+- [Lean markup](lean-markup)
+- [Forms](forms)
+- [Tables](tables)
+
+## General formatting
+
+- Use double quotes for attributes. This is the HTML way.
+- Use semantically appropriate tags
+  - Paragraphs of text should always be placed in a `<p>` tag. Never use multiple `<br>` tags.
+  - Items in a list should always be in `<ul>`, `<ol>`, or `<dl>`. Never use a set of `<div>` or `<p>`.
+- Every form input that has text attached should utilize a `<label>` tag. Especially radio or checkbox elements.
+- Even though quotes around attributes is optional, always put quotes around attributes for readability.
+- Avoid writing closing tag comments, like `<!-- /.element -->`.
+- Always add trailing slashes in self-closing tags. For example, `<br />`, `<hr />`, `<img />`, and `<input />`.
+- Don't set `tabindex` manually unless specifically requested — rely on the browser to set the order.
+
+```html
+<p class="specialClass">This is my paragraph of special text.</p>
+```
+
+**[⬆ back to top](#table-of-contents)**
+
+## Boolean attributes
+
+Many attributes don't require a value to be set, like disabled or checked, so don't set it.
+
+```html
+<input type="text" disabled />
+
+<input type="checkbox" value="1" checked />
+
+<select>
+  <option value="1" selected>1</option>
+</select>
+```
+
+**[⬆ back to top](#table-of-contents)**
+
+## Lean markup
+
+Whenever possible, avoid superfluous parent elements when writing HTML. For example:
+
+```html
+
+<!-- Not so great -->
+<span class="avatar">
+  <img src="...">
+</span>
+
+<!-- Better -->
+<img class="avatar" src="...">
+
+```
+
+**[⬆ back to top](#table-of-contents)**
+
+## Forms
+
+- Wrap radio and checkbox inputs and their text in `<label>`s. No need for `for` attributes here — the wrapping automatically associates the two.
+- The primary form button must come first in the DOM, especially for forms with multiple submit buttons. The visual order should be preserved with float: right; on each button (this affects tabindex).
+
+**[⬆ back to top](#table-of-contents)**
+
+## Tables
+
+Make use of `<thead>`, `<tfoot>`, `<tbody>`, and `<th>` tags (and scope attribute) when appropriate. (Note: `<tfoot>` goes above `<tbody>` for speed reasons. You want the browser to load the footer before a table full of data.)
+
+```html
+<table summary="This is a chart of invoices for 2011.">
+  <thead>
+    <tr>
+      <th scope="col">Table header 1</th>
+      <th scope="col">Table header 2</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Table footer 1</td>
+      <td>Table footer 2</td>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Table data 1</td>
+      <td>Table data 2</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+**[⬆ back to top](#table-of-contents)**