Skip to content

Commit 0e595ee

Browse files
SebKaySebKay
authored
Base CSS (#10)
* 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
1 parent dce4dc0 commit 0e595ee

File tree

20 files changed

+296
-13
lines changed

20 files changed

+296
-13
lines changed

‎composer.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@
4545
"composer install",
4646
"php artisan migrate:fresh --seed",
4747
"npm install",
48-
"npm run dev"
48+
"npm run build"
4949
],
5050
"build:prod": [
5151
"composer install --no-interaction --prefer-dist --optimize-autoloader --no-dev",
5252
"php artisan migrate",
5353
"npm install",
54-
"npm run prod"
54+
"npm run build"
5555
],
5656
"build:test": "composer install --no-interaction",
5757
"lint": [

‎resources/js/Components/AppButton.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,17 @@
2828
},
2929
};
3030
</script>
31+
32+
<style lang="scss">
33+
.btn {
34+
@include rem(16px);
35+
padding: 12px 20px;
36+
display: inline-flex;
37+
cursor: pointer;
38+
border-radius: border-radius(buttons);
39+
background-color: $ui-color-1;
40+
// Type
41+
font-weight: bold;
42+
color: #fff;
43+
}
44+
</style>

‎resources/js/Layouts/App.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<div class="app-page">
77
<div class="app-page__inner">
88
<Link :href="route('home')">Home</Link>
9-
<br>
9+
<br />
1010
<Link :href="route('account.edit')">Account</Link>
11-
<br>
11+
<br />
1212
<Link :href="route('logout')" method="post" as="button"
1313
>Logout</Link
1414
>
@@ -27,3 +27,17 @@
2727
},
2828
};
2929
</script>
30+
31+
32+
<style lang="scss">
33+
body {
34+
background-color: #eee;
35+
}
36+
37+
.app-page__inner {
38+
max-width: 900px;
39+
margin: 120px auto;
40+
padding: 60px;
41+
background-color: #fff;
42+
}
43+
</style>

‎resources/js/Layouts/Guest.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,16 @@
1919
},
2020
};
2121
</script>
22+
23+
<style lang="scss">
24+
body {
25+
background-color: #eee;
26+
}
27+
28+
.guest-page__inner {
29+
max-width: 600px;
30+
margin: 120px auto;
31+
padding: 60px;
32+
background-color: #fff;
33+
}
34+
</style>

‎resources/js/Pages/Account/Edit.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Head :title="title" />
33

4-
<h1 v-text="title"></h1>
4+
<h1 v-text="title" class="mt-regular mb-regular"></h1>
55

66
<form class="form" @submit.prevent="login">
77
<div class="form__section">
@@ -59,7 +59,7 @@
5959
</div>
6060

6161
<div class="form__row">
62-
<div class="form__item">
62+
<div class="form__action">
6363
<AppButton
6464
text="Update"
6565
tabindex="5"

‎resources/js/Pages/Index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Head :title="title" />
33

4-
<h1 v-text="title"></h1>
4+
<h1 v-text="title" class="mt-regular mb-regular"></h1>
55

66
<p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
77
</template>

‎resources/js/Pages/Login/Show.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Head :title="title" />
33

4-
<h1 v-text="title"></h1>
4+
<h1 v-text="title" class="mb-regular"></h1>
55

66
<form class="form" @submit.prevent="login">
77
<div class="form__section">
@@ -49,7 +49,7 @@
4949
</div>
5050

5151
<div class="form__row">
52-
<div class="form__item">
52+
<div class="form__action">
5353
<AppButton
5454
text="Login"
5555
tabindex="4"
@@ -60,7 +60,9 @@
6060
</div>
6161
</form>
6262

63-
<Link :href="route('register')">Register</Link>
63+
<div class="mt-regular">
64+
<Link :href="route('register')">Register</Link>
65+
</div>
6466
</template>
6567

6668
<script>

‎resources/js/Pages/Register/Show.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Head :title="title" />
33

4-
<h1 v-text="title"></h1>
4+
<h1 v-text="title" class="mb-regular"></h1>
55

66
<form class="form" @submit.prevent="login">
77
<div class="form__section">
@@ -60,7 +60,7 @@
6060
</div>
6161

6262
<div class="form__row">
63-
<div class="form__item">
63+
<div class="form__action">
6464
<AppButton
6565
text="Register"
6666
tabindex="5"
@@ -71,7 +71,9 @@
7171
</div>
7272
</form>
7373

74-
<Link :href="route('login')">Login</Link>
74+
<div class="mt-regular">
75+
<Link :href="route('login')">Login</Link>
76+
</div>
7577
</template>
7678

7779
<script>

‎resources/scss/app.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
@use "@scss/utilities/placeholders";
2+
3+
@import "@scss/common/reset", "@scss/common/typography", "@scss/common/forms", "@scss/common/spacing";
4+
5+
@import "@scss/components/form";
6+
17
body {
28
background-color: #fff;
39
}

‎resources/scss/common/_forms.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
input {
2+
width: 100%;
3+
height: 40px;
4+
padding: 10px;
5+
border-radius: border-radius(forms);
6+
border: border(form-fields);
7+
}
8+
9+
input[type="checkbox"],
10+
input[type="radio"] {
11+
width: 20px;
12+
height: 20px;
13+
padding: 0;
14+
}
15+
16+
label {
17+
@extend %text-small;
18+
}
19+
20+
button {
21+
cursor: pointer;
22+
appearance: none;
23+
border: none;
24+
background-color: transparent;
25+
}

‎resources/scss/common/_reset.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
*,
2+
*:before,
3+
*:after {
4+
margin: 0;
5+
padding: 0;
6+
outline: 0;
7+
box-sizing: border-box;
8+
// Type
9+
font-size: 100%;
10+
line-height: 100%;
11+
-webkit-text-size-adjust: none;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
text-rendering: optimizeLegibility;
15+
}

‎resources/scss/common/_spacing.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.mt-large {
2+
margin-top: 60px;
3+
}
4+
5+
.mb-large {
6+
margin-bottom: 60px;
7+
}
8+
9+
.mt-regular {
10+
margin-top: 30px;
11+
}
12+
13+
.mb-regular {
14+
margin-bottom: 30px;
15+
}
16+
17+
.mt-small {
18+
margin-top: 15px;
19+
}
20+
21+
.mb-small {
22+
margin-bottom: 15px;
23+
}

‎resources/scss/common/_typography.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@use "@scss/utilities/variables";
2+
3+
body {
4+
// Type
5+
font-family: "Hanken Grotesk", sans-serif;
6+
font-size: variables.$base-text-size;
7+
}
8+
9+
h1,
10+
h2,
11+
h3,
12+
h4,
13+
h5,
14+
h6 {
15+
@extend %heading;
16+
}
17+
18+
h1 {
19+
@extend %heading-1;
20+
}
21+
22+
h2 {
23+
@extend %heading-2;
24+
}
25+
26+
h3 {
27+
@extend %heading-3;
28+
}
29+
30+
h4 {
31+
@extend %heading-4;
32+
}
33+
34+
h5 {
35+
@extend %heading-5;
36+
}
37+
38+
h6 {
39+
@extend %heading-6;
40+
}
41+
42+
p,
43+
li {
44+
@extend %text-regular;
45+
}

‎resources/scss/components/_form.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.form__section,
2+
.form__item,
3+
.form__label--inline {
4+
display: flex;
5+
}
6+
7+
.form__section,
8+
.form__item {
9+
flex-direction: column;
10+
}
11+
12+
.form__section {
13+
row-gap: 30px;
14+
}
15+
16+
.form__item {
17+
row-gap: 15px;
18+
}
19+
20+
.form__label--inline {
21+
align-items: center;
22+
column-gap: 10px;
23+
24+
input {
25+
align-self: flex-start;
26+
}
27+
}

‎resources/scss/utilities/_functions.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@use "sass:math";
2+
@use "sass:map";
3+
4+
@use "@scss/utilities/variables";
5+
6+
@function px-to-rem($pixels) {
7+
$rem-size: math.div($pixels, variables.$base-text-size);
8+
9+
@return #{$rem-size}rem;
10+
}
11+
12+
@function border-radius($size) {
13+
@return map.get(variables.$border-radiuses, $size);
14+
}
15+
16+
@function border($size) {
17+
@return map.get(variables.$borders, $size);
18+
}

‎resources/scss/utilities/_mixins.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use "sass:map";
2+
3+
@use "@scss/utilities/functions";
4+
5+
@mixin rem($pixels) {
6+
font-size: $pixels;
7+
font-size: functions.px-to-rem($pixels);
8+
}

‎resources/scss/utilities/_placeholders.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@use "@scss/utilities/mixins";
2+
3+
%heading {
4+
// Type
5+
font-weight: bold;
6+
}
7+
8+
%heading-1 {
9+
@include mixins.rem(40px);
10+
}
11+
12+
%heading-2 {
13+
@include mixins.rem(34px);
14+
}
15+
16+
%heading-3 {
17+
@include mixins.rem(28px);
18+
}
19+
20+
%heading-4 {
21+
@include mixins.rem(24px);
22+
}
23+
24+
%heading-5 {
25+
@include mixins.rem(20px);
26+
}
27+
28+
%heading-6 {
29+
@include mixins.rem(16px);
30+
}
31+
32+
%text-small {
33+
@include mixins.rem(16px);
34+
}
35+
36+
%text-regular {
37+
@include mixins.rem(18px);
38+
}
39+
40+
%text-large {
41+
@include mixins.rem(22px);
42+
}
43+

0 commit comments

Comments
 (0)