Base CSS (#10)

SebKay · web-flow · commit 0e595ee097ef · 2022-12-21T15:12:02.000Z
* Update composer.json

* Add CSS reset

* Add base typography styling

* Add base form styling

* Add base form component styling

* Add base button styling

* Add spacing helpers

* Add simple styling to all pages
diff --git a/composer.json b/composer.json
@@ -45,13 +45,13 @@
             "composer install",
             "php artisan migrate:fresh --seed",
             "npm install",
-            "npm run dev"
+            "npm run build"
         ],
         "build:prod": [
             "composer install --no-interaction --prefer-dist --optimize-autoloader --no-dev",
             "php artisan migrate",
             "npm install",
-            "npm run prod"
+            "npm run build"
         ],
         "build:test": "composer install --no-interaction",
         "lint": [
diff --git a/resources/js/Components/AppButton.vue b/resources/js/Components/AppButton.vue
@@ -28,3 +28,17 @@
         },
     };
 </script>
+
+<style lang="scss">
+    .btn {
+        @include rem(16px);
+        padding: 12px 20px;
+        display: inline-flex;
+        cursor: pointer;
+        border-radius: border-radius(buttons);
+        background-color: $ui-color-1;
+        // Type
+        font-weight: bold;
+        color: #fff;
+    }
+</style>
diff --git a/resources/js/Layouts/App.vue b/resources/js/Layouts/App.vue
@@ -6,9 +6,9 @@
     <div class="app-page">
         <div class="app-page__inner">
             <Link :href="route('home')">Home</Link>
-            <br>
+            <br />
             <Link :href="route('account.edit')">Account</Link>
-            <br>
+            <br />
             <Link :href="route('logout')" method="post" as="button"
                 >Logout</Link
             >
@@ -27,3 +27,17 @@
         },
     };
 </script>
+
+
+<style lang="scss">
+    body {
+        background-color: #eee;
+    }
+
+    .app-page__inner {
+        max-width: 900px;
+        margin: 120px auto;
+        padding: 60px;
+        background-color: #fff;
+    }
+</style>
diff --git a/resources/js/Layouts/Guest.vue b/resources/js/Layouts/Guest.vue
@@ -19,3 +19,16 @@
         },
     };
 </script>
+
+<style lang="scss">
+    body {
+        background-color: #eee;
+    }
+
+    .guest-page__inner {
+        max-width: 600px;
+        margin: 120px auto;
+        padding: 60px;
+        background-color: #fff;
+    }
+</style>
diff --git a/resources/js/Pages/Account/Edit.vue b/resources/js/Pages/Account/Edit.vue
@@ -1,7 +1,7 @@
 <template>
     <Head :title="title" />
 
-    <h1 v-text="title"></h1>
+    <h1 v-text="title" class="mt-regular mb-regular"></h1>
 
     <form class="form" @submit.prevent="login">
         <div class="form__section">
@@ -59,7 +59,7 @@
             </div>
 
             <div class="form__row">
-                <div class="form__item">
+                <div class="form__action">
                     <AppButton
                         text="Update"
                         tabindex="5"
diff --git a/resources/js/Pages/Index.vue b/resources/js/Pages/Index.vue
@@ -1,7 +1,7 @@
 <template>
     <Head :title="title" />
 
-    <h1 v-text="title"></h1>
+    <h1 v-text="title" class="mt-regular mb-regular"></h1>
 
     <p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
 </template>
diff --git a/resources/js/Pages/Login/Show.vue b/resources/js/Pages/Login/Show.vue
@@ -1,7 +1,7 @@
 <template>
     <Head :title="title" />
 
-    <h1 v-text="title"></h1>
+    <h1 v-text="title" class="mb-regular"></h1>
 
     <form class="form" @submit.prevent="login">
         <div class="form__section">
@@ -49,7 +49,7 @@
             </div>
 
             <div class="form__row">
-                <div class="form__item">
+                <div class="form__action">
                     <AppButton
                         text="Login"
                         tabindex="4"
@@ -60,7 +60,9 @@
         </div>
     </form>
 
-    <Link :href="route('register')">Register</Link>
+    <div class="mt-regular">
+        <Link :href="route('register')">Register</Link>
+    </div>
 </template>
 
 <script>
diff --git a/resources/js/Pages/Register/Show.vue b/resources/js/Pages/Register/Show.vue
@@ -1,7 +1,7 @@
 <template>
     <Head :title="title" />
 
-    <h1 v-text="title"></h1>
+    <h1 v-text="title" class="mb-regular"></h1>
 
     <form class="form" @submit.prevent="login">
         <div class="form__section">
@@ -60,7 +60,7 @@
             </div>
 
             <div class="form__row">
-                <div class="form__item">
+                <div class="form__action">
                     <AppButton
                         text="Register"
                         tabindex="5"
@@ -71,7 +71,9 @@
         </div>
     </form>
 
-    <Link :href="route('login')">Login</Link>
+    <div class="mt-regular">
+        <Link :href="route('login')">Login</Link>
+    </div>
 </template>
 
 <script>
diff --git a/resources/scss/app.scss b/resources/scss/app.scss
@@ -1,3 +1,9 @@
+@use "@scss/utilities/placeholders";
+
+@import "@scss/common/reset", "@scss/common/typography", "@scss/common/forms", "@scss/common/spacing";
+
+@import "@scss/components/form";
+
 body {
     background-color: #fff;
 }
diff --git a/resources/scss/common/_forms.scss b/resources/scss/common/_forms.scss
@@ -0,0 +1,25 @@
+input {
+    width: 100%;
+    height: 40px;
+    padding: 10px;
+    border-radius: border-radius(forms);
+    border: border(form-fields);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+}
+
+label {
+    @extend %text-small;
+}
+
+button {
+    cursor: pointer;
+    appearance: none;
+    border: none;
+    background-color: transparent;
+}
diff --git a/resources/scss/common/_reset.scss b/resources/scss/common/_reset.scss
@@ -0,0 +1,15 @@
+*,
+*:before,
+*:after {
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    box-sizing: border-box;
+    // Type
+    font-size: 100%;
+    line-height: 100%;
+    -webkit-text-size-adjust: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
diff --git a/resources/scss/common/_spacing.scss b/resources/scss/common/_spacing.scss
@@ -0,0 +1,23 @@
+.mt-large {
+    margin-top: 60px;
+}
+
+.mb-large {
+    margin-bottom: 60px;
+}
+
+.mt-regular {
+    margin-top: 30px;
+}
+
+.mb-regular {
+    margin-bottom: 30px;
+}
+
+.mt-small {
+    margin-top: 15px;
+}
+
+.mb-small {
+    margin-bottom: 15px;
+}
diff --git a/resources/scss/common/_typography.scss b/resources/scss/common/_typography.scss
@@ -0,0 +1,45 @@
+@use "@scss/utilities/variables";
+
+body {
+    // Type
+    font-family: "Hanken Grotesk", sans-serif;
+    font-size: variables.$base-text-size;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @extend %heading;
+}
+
+h1 {
+    @extend %heading-1;
+}
+
+h2 {
+    @extend %heading-2;
+}
+
+h3 {
+    @extend %heading-3;
+}
+
+h4 {
+    @extend %heading-4;
+}
+
+h5 {
+    @extend %heading-5;
+}
+
+h6 {
+    @extend %heading-6;
+}
+
+p,
+li {
+    @extend %text-regular;
+}
diff --git a/resources/scss/components/_form.scss b/resources/scss/components/_form.scss
@@ -0,0 +1,27 @@
+.form__section,
+.form__item,
+.form__label--inline {
+    display: flex;
+}
+
+.form__section,
+.form__item {
+    flex-direction: column;
+}
+
+.form__section {
+    row-gap: 30px;
+}
+
+.form__item {
+    row-gap: 15px;
+}
+
+.form__label--inline {
+    align-items: center;
+    column-gap: 10px;
+
+    input {
+        align-self: flex-start;
+    }
+}
diff --git a/resources/scss/utilities/_functions.scss b/resources/scss/utilities/_functions.scss
@@ -0,0 +1,18 @@
+@use "sass:math";
+@use "sass:map";
+
+@use "@scss/utilities/variables";
+
+@function px-to-rem($pixels) {
+    $rem-size: math.div($pixels, variables.$base-text-size);
+
+    @return #{$rem-size}rem;
+}
+
+@function border-radius($size) {
+    @return map.get(variables.$border-radiuses, $size);
+}
+
+@function border($size) {
+    @return map.get(variables.$borders, $size);
+}
diff --git a/resources/scss/utilities/_mixins.scss b/resources/scss/utilities/_mixins.scss
@@ -0,0 +1,8 @@
+@use "sass:map";
+
+@use "@scss/utilities/functions";
+
+@mixin rem($pixels) {
+    font-size: $pixels;
+    font-size: functions.px-to-rem($pixels);
+}
diff --git a/resources/scss/utilities/_placeholders.scss b/resources/scss/utilities/_placeholders.scss
@@ -0,0 +1,43 @@
+@use "@scss/utilities/mixins";
+
+%heading {
+    // Type
+    font-weight: bold;
+}
+
+%heading-1 {
+    @include mixins.rem(40px);
+}
+
+%heading-2 {
+    @include mixins.rem(34px);
+}
+
+%heading-3 {
+    @include mixins.rem(28px);
+}
+
+%heading-4 {
+    @include mixins.rem(24px);
+}
+
+%heading-5 {
+    @include mixins.rem(20px);
+}
+
+%heading-6 {
+    @include mixins.rem(16px);
+}
+
+%text-small {
+    @include mixins.rem(16px);
+}
+
+%text-regular {
+    @include mixins.rem(18px);
+}
+
+%text-large {
+    @include mixins.rem(22px);
+}
+
diff --git a/resources/scss/utilities/_variables.scss b/resources/scss/utilities/_variables.scss
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
diff --git a/vite.config.js b/vite.config.js
