chore: Setup CSS skeleton

src/App.vue

@@ -16,13 +16,4 @@ export default {
 }
 </script>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<style src="@/assets/css/style.css" lang="css"></style>

src/assets/css/1-core/_00-reset.css

@@ -0,0 +1,48 @@
+/* ----------------------------------------------------------- */
+/* == reset */
+/* ----------------------------------------------------------- */
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}
+
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+video,
+svg {
+  max-width: 100%;
+}
+
+img {
+  height: auto;
+  border-style: none;
+  vertical-align: middle;
+}
+
+/* fix input no style on Safari */
+input[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}

src/assets/css/1-core/_01-typography.css

@@ -0,0 +1,28 @@
+/* ----------------------------------------------------------- */
+/* == typography */
+/* ----------------------------------------------------------- */
+
+html {
+  font-size: 62.5%;
+  /* IE9-11 calculation fix */
+  font-size: calc(1em * .625);
+}
+
+body {
+  font-size: calc(1.4em);
+  line-height: 1.5;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption {
+  margin: 0 0 1.5em 0;
+}

src/assets/css/3-base/_01-fonts.css

@@ -0,0 +1,3 @@
+/* ----------------------------------------------------------- */
+/* == custom fonts */
+/* ----------------------------------------------------------- */

src/assets/css/3-base/_02-main.css

@@ -0,0 +1,59 @@
+/* ----------------------------------------------------------- */
+/* == main */
+/* ----------------------------------------------------------- */
+
+body {
+  background-color: #fff;
+  color: var(--color-dark-text);
+  font-family: var(--fontstack);
+}
+
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  max-width: 102.4rem;
+}
+
+/* titles
+-------------------------------------------------------------- */
+
+/* links
+-------------------------------------------------------------- */
+
+a,
+a:visited {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus {
+  outline: none;
+  border-radius: .3rem;
+  box-shadow: var(--focus-ring);
+}
+
+/* lists
+-------------------------------------------------------------- */
+
+ul {
+  padding-left: 2rem;
+  list-style-type: disc;
+}
+
+/* divers
+-------------------------------------------------------------- */
+
+hr {
+  display: block;
+  margin: 1em 0;
+  padding: 0;
+  height: .1rem;
+  border: 0;
+  border-top: .1rem solid #ccc;
+}

src/assets/css/3-base/_03-layout.css

@@ -0,0 +1,3 @@
+/* ----------------------------------------------------------- */
+/* == layout */
+/* ----------------------------------------------------------- */

src/assets/css/6-helpers/_spacing.css

@@ -0,0 +1,179 @@
+/* ----------------------------------------------------------- */
+/* == spacings */
+/* ----------------------------------------------------------- */
+
+.ma0 {
+  margin: 0;
+}
+
+.pa0 {
+  padding: 0;
+}
+
+.ma1 {
+  margin: 1rem;
+}
+
+.ma2 {
+  margin: 2rem;
+}
+
+.ma3 {
+  margin: 3rem;
+}
+
+.pa1 {
+  padding: 1rem;
+}
+
+.pa2 {
+  padding: 2rem;
+}
+
+.pa3 {
+  padding: 3rem;
+}
+
+.mt0 {
+  margin-top: 0;
+}
+
+.mt1 {
+  margin-top: 1rem;
+}
+
+.mt2 {
+  margin-top: 2rem;
+}
+
+.mt3 {
+  margin-top: 3rem;
+}
+
+.mt4 {
+  margin-top: 4rem;
+}
+
+.mt5 {
+  margin-top: 5rem;
+}
+
+.mr0 {
+  margin-right: 0;
+}
+
+.mr1 {
+  margin-right: 1rem;
+}
+
+.mr2 {
+  margin-right: 2rem;
+}
+
+.mr3 {
+  margin-right: 3rem;
+}
+
+.mb0 {
+  margin-bottom: 0;
+}
+
+.mb1 {
+  margin-bottom: 1rem;
+}
+
+.mb2 {
+  margin-bottom: 2rem;
+}
+
+.mb3 {
+  margin-bottom: 3rem;
+}
+
+.mb4 {
+  margin-bottom: 4rem;
+}
+
+.mb5 {
+  margin-bottom: 5rem;
+}
+
+.ml0 {
+  margin-left: 0;
+}
+
+.ml1 {
+  margin-left: 1rem;
+}
+
+.ml2 {
+  margin-left: 2rem;
+}
+
+.ml3 {
+  margin-left: 3rem;
+}
+
+.pt0 {
+  padding-top: 0;
+}
+
+.pt1 {
+  padding-top: 1rem;
+}
+
+.pt2 {
+  padding-top: 2rem;
+}
+
+.pt3 {
+  padding-top: 3rem;
+}
+
+.pr0 {
+  padding-right: 0;
+}
+
+.pr1 {
+  padding-right: 1rem;
+}
+
+.pr2 {
+  padding-right: 2rem;
+}
+
+.pr3 {
+  padding-right: 3rem;
+}
+
+.pb0 {
+  padding-bottom: 0;
+}
+
+.pb1 {
+  padding-bottom: 1rem;
+}
+
+.pb2 {
+  padding-bottom: 2rem;
+}
+
+.pb3 {
+  padding-bottom: 3rem;
+}
+
+.pl0 {
+  padding-left: 0;
+}
+
+.pl1 {
+  padding-left: 1rem;
+}
+
+.pl2 {
+  padding-left: 2rem;
+}
+
+.pl3 {
+  padding-left: 3rem;
+}

src/assets/css/6-helpers/_width.css

@@ -0,0 +1,46 @@
+/* ----------------------------------------------------------- */
+/* == width */
+/* ----------------------------------------------------------- */
+
+.w10 {
+  width: 10%;
+}
+.w20 {
+  width: 20%;
+}
+.w25 {
+  width: 25%;
+}
+.w30 {
+  width: 30%;
+}
+.w33 {
+  width: 33.3333%;
+}
+.w40 {
+  width: 40%;
+}
+.w50 {
+  width: 50%;
+}
+.w60 {
+  width: 60%;
+}
+.w66 {
+  width: 66.6666%;
+}
+.w70 {
+  width: 70%;
+}
+.w75 {
+  width: 75%;
+}
+.w80 {
+  width: 80%;
+}
+.w90 {
+  width: 90%;
+}
+.w100 {
+  width: 100%;
+}

src/assets/css/7-rwd/_rwd-large.css

@@ -0,0 +1,6 @@
+/* ----------------------------------------------------------- */
+/* == rwd -> large */
+/* ----------------------------------------------------------- */
+
+@media (min-width: var(--rwd-large)) {
+}

src/assets/css/7-rwd/_rwd-medium.css

@@ -0,0 +1,6 @@
+/* ----------------------------------------------------------- */
+/* == rwd -> medium */
+/* ----------------------------------------------------------- */
+
+@media (min-width: var(--rwd-medium)) {
+}

src/assets/css/7-rwd/_rwd-small.css

@@ -0,0 +1,6 @@
+/* ----------------------------------------------------------- */
+/* == rwd -> small */
+/* ----------------------------------------------------------- */
+
+@media (min-width: var(--rwd-small)) {
+}

src/assets/css/7-rwd/_rwd-xsmall.css

@@ -0,0 +1,6 @@
+/* ----------------------------------------------------------- */
+/* == rwd -> xsmall */
+/* ----------------------------------------------------------- */
+
+@media (min-width: var(--rwd-xsmall)) {
+}

src/assets/css/colors.css

@@ -0,0 +1,28 @@
+/* ----------------------------------------------------------- */
+/* == colors */
+/* ----------------------------------------------------------- */
+
+/* palette
+-------------------------------------------------------------- */
+
+:root {
+  --color-primary: #3498db;
+  --color-secondary: #1abc9c;
+  --color-tertiary: #34495e;
+  --color-info: #2185d0;
+}
+
+/* texts
+-------------------------------------------------------------- */
+
+:root {
+  --color-light-text: #fcfcfc;
+  --color-dark-text: #000;
+}
+
+/* links
+-------------------------------------------------------------- */
+
+:root {
+  --color-link: var(--color-primary);
+}

src/assets/css/config.css

@@ -0,0 +1,33 @@
+/* ----------------------------------------------------------- */
+/* == config */
+/* ----------------------------------------------------------- */
+
+:root {
+  --main-bg-color: brown;
+}
+
+/* base
+-------------------------------------------------------------- */
+
+:root {
+  --base-font: 14; /* px value (without unit), will be converted in em */
+  --line-height: 1.5;
+  --fontstack: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* responsive
+-------------------------------------------------------------- */
+
+:root {
+  --rwd-xsmall: 480px;
+  --rwd-small: 768px;
+  --rwd-medium: 960px;
+  --rwd-large: 1280px;
+}
+
+/* focus ring
+-------------------------------------------------------------- */
+
+:root {
+  --focus-ring: 0 0 0 .3rem rgba(33, 133, 208, .5);
+}

src/assets/css/style.css

@@ -0,0 +1,55 @@
+/* ----------------------------------------------------------- */
+/* == config */
+/* ----------------------------------------------------------- */
+
+@import "colors.css";
+@import "config.css";
+
+/* ----------------------------------------------------------- */
+/* == core */
+/* ----------------------------------------------------------- */
+
+@import "1-core/_00-reset.css";
+@import "1-core/_01-typography.css";
+
+/* ----------------------------------------------------------- */
+/* == components */
+/* ----------------------------------------------------------- */
+
+@import "2-components/_buttons.css";
+
+/* ----------------------------------------------------------- */
+/* == base */
+/* ----------------------------------------------------------- */
+
+@import "3-base/_01-fonts.css";
+@import "3-base/_02-main.css";
+@import "3-base/_03-layout.css";
+
+/* ----------------------------------------------------------- */
+/* == modules */
+/* ----------------------------------------------------------- */
+
+/* @import "4-modules/..."; */
+
+/* ----------------------------------------------------------- */
+/* == screens */
+/* ----------------------------------------------------------- */
+
+/* @import "5-screens/..."; */
+
+/* ----------------------------------------------------------- */
+/* == helpers */
+/* ----------------------------------------------------------- */
+
+@import "6-helpers/_spacing.css";
+@import "6-helpers/_width.css";
+
+/* ----------------------------------------------------------- */
+/* == rwd */
+/* ----------------------------------------------------------- */
+
+@import "7-rwd/_rwd-xsmall.css";
+@import "7-rwd/_rwd-small.css";
+@import "7-rwd/_rwd-medium.css";
+@import "7-rwd/_rwd-large.css";

src/components/HelloWorld.vue

@@ -39,21 +39,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>