Merge pull request #13 from SebKay/front-end

Front end styling

Author: SebKay

composer.json

@@ -36,7 +36,8 @@
         "spatie/ray": "^1.19"
     },
     "scripts": {
-        "refresh": "git clean -xffd && composer install --ansi",
+        "build": "git clean -xff -e .env && composer install && yarn install && yarn run dev",
+        "build:prod": "git clean -xffd -e .env && composer install --no-dev && yarn install && yarn run prod",
         "lint:php": "./vendor/bin/phpcs --standard=PSR12 src",
         "fix:php": "./vendor/bin/phpcbf --standard=PSR12 src",
         "analyse:php": "./vendor/bin/psalm --show-info=true",

composer.lock

@@ -1,14 +1,20 @@
 {
+    "browserslist": [
+        "> 1%",
+        "last 1 version",
+        "not dead"
+    ],
     "dependencies": {
-        "vue": "^3.0.5"
-    },
-    "devDependencies": {
+        "autoprefixer": "^10.2.5",
         "css-loader": "^5.0.2",
         "mini-css-extract-plugin": "^1.3.6",
+        "postcss-loader": "^5.1.0",
         "sass": "^1.32.7",
         "sass-loader": "^11.0.1",
+        "vue": "^3.0.5",
         "webpack": "^5.21.2",
-        "webpack-cli": "^4.5.0"
+        "webpack-cli": "^4.5.0",
+        "webpack-notifier": "^1.13.0"
     },
     "scripts": {
         "dev": "webpack --mode=development",

package.json

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')
+    ]
+}

postcss.config.js

@@ -4,12 +4,9 @@ const App = createApp({
     name: 'App',
     data() {
         return {
-            test: 'yas'
+            name: 'Slim Starter'
         }
     },
-    mounted() {
-        console.log('yas');
-    }
 });
 
 App.mount('#app');

resources/assets/js/app.js

@@ -0,0 +1,50 @@
+/**
+* Fonts
+*/
+$font-size-base: 16px;
+$font-family-1: 'DM Sans', 'Arial', sans-serif;
+
+$h1: 38px;
+$h2: 32px;
+$h3: 28px;
+$h4: 22px;
+$h5: 20px;
+$h6: 18px;
+
+/**
+* Colors
+*/
+$ui-color-1: #000;
+$ui-color-success: #4BC18B;
+$ui-color-error: #D66A6A;
+
+$text-color-1: #2a2a2a;
+$text-color-2: #666666;
+
+/**
+* Spacing
+*/
+$spacing: (
+    1 : (
+        tiny   : 15px,
+        small  : 30px,
+        medium : 60px,
+        large  : 90px,
+    ),
+);
+
+/**
+* Other
+*/
+$border-radius-1: 5px;
+
+$border-1: 1px solid #707070;
+$border-2: 1px solid #cccccc;
+
+$transition-speed: .35s;
+
+$z-index: (
+    1: 900,
+    2: 800,
+    3: 700,
+);

resources/assets/scss/_config.scss

@@ -1,7 +1,20 @@
+@import 'config';
+
+@import 'helpers/functions';
+@import 'helpers/mixins';
+@import 'helpers/placeholders';
+
 @import 'common/reset';
 @import 'common/typography';
+@import 'common/forms';
+@import 'common/utilities';
 @import 'common/general';
 
+@import 'elements/button';
+
+@import 'components/forms/form-notice';
+@import 'components/forms/form-row';
+
 @import 'components/site/wrap';
 @import 'components/site/header';
 @import 'components/site/main';

resources/assets/scss/app.scss

@@ -0,0 +1,33 @@
+input,
+textarea,
+select {
+    @extend %txt-regular;
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    border-radius: $border-radius-1;
+    border: $border-2;
+    background: #fff;
+}
+
+input,
+select {
+    height: 50px;
+}
+
+textarea {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    // Type
+    line-height: 140%;
+}
+
+label {
+    @extend %txt-large;
+    // Type
+    font-weight: bold;
+}
+
+button {
+    @extend .btn;
+}

resources/assets/scss/common/_forms.scss

@@ -1,5 +1,8 @@
-$test: #e2e2e2;
-
+html,
 body {
-    background: $test;
+    background: #fff;
+}
+
+[v-cloak] {
+    display: none;
 }