Merge pull request #7 from ryamakuchi/setup-scss

SCSSでビジュアルデザインを見ながらコードを書くための環境構築

Author: ryamakuchi

Diff for: .gitignore

@@ -1,3 +1,3 @@
 node_modules/
 .idea/
-yarn-error.log
+yarn-error.log

Diff for: my-standard-layout-scss/.gitignore

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

Diff for: my-standard-layout-scss/MEMO.md

@@ -0,0 +1,20 @@
+My Standard Layout SCSS
+=========
+
+### Setup
+```
+yarn install
+```
+
+### Development
+```
+yarn run build:scss:watch
+```
+
+```
+yarn run serve
+```
+
+```
+open http://localhost:3000
+```

Diff for: my-standard-layout-scss/README.md

@@ -0,0 +1,17 @@
+{
+  "name": "my-standard-layout-scss",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "repository": "https://github.com/ryamakuchi/html5-css3-modern-coding/my-standard-layout-scss",
+  "author": "ryamakuchi",
+  "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"
+  }
+}

Diff for: my-standard-layout-scss/package.json

@@ -0,0 +1,86 @@
+/**
+ * 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;
+}