ビジュアルデザインを見ながらコードを書いていく環境を構築する（SCSS）

my-standard-layout-scss/.gitignore

@@ -0,0 +1 @@
+src/css/

my-standard-layout-scss/README.md

@@ -0,0 +1,24 @@
+My Standard Layout (SCSS)
+=========================
+
+## Setup
+
+```
+yarn install
+```
+
+## Development
+
+```
+yarn run build:scss:watch
+```
+
+```
+yarn run serve
+```
+
+```
+open http://localhost:3000
+```
+
+Browsersync の設定ページは http://localhost:3001

my-standard-layout-scss/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "my-standard-layout-scss",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "repository": "https://github.com/inouetakuya/html5-css3-modern-coding/my-standard-layout-scss",
+  "license": "MIT",
+  "scripts": {
+    "build:scss": "node-sass --recursive src/scss --output src/css",
+    "build:scss:watch": "yarn run build:scss && yarn run build:scss --watch",
+    "serve": "browser-sync start --server 'src' --files 'src/css/*.css', 'src/*.html'"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.24.6",
+    "node-sass": "^4.9.3"
+  }
+}

my-standard-layout-scss/src/scss/reset.scss

@@ -0,0 +1,99 @@
+/**
+ * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
+ * Richard Clark (http://richclarkdesign.com)
+ * http://cssreset.com
+ */
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  line-height: 1;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+nav ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+a {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+  background-color: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+
+/* change colours to suit your needs */
+mark {
+  background-color: #ff9;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+  border-bottom: 1px dotted;
+  cursor: help;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* change border colour to suit your needs */
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #cccccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+input, select {
+  vertical-align: middle;
+}