From b8cadc1e7215ac9515558857f67e26117f9280c0 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Fri, 25 Mar 2022 21:00:25 +0530 Subject: [PATCH 1/4] make simple `html skeleton` close #3 --- index.html | 57 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 34e4c23..fe08f22 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,48 @@ - - - - - - CSS Utilities - - - Home Page - - + + + + + + + CSS Utilities + + + +

Beautiful CSS box-shadow examples

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+ + + \ No newline at end of file From 02f92a629752db62d67d766c6e289c8e7fc80583 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Fri, 25 Mar 2022 21:06:02 +0530 Subject: [PATCH 2/4] add `import` statement in `style.scss` --- scss/abstracts/__variables.scss | 4 ++-- scss/style.scss | 15 +++------------ 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/scss/abstracts/__variables.scss b/scss/abstracts/__variables.scss index df1c353..29743f4 100644 --- a/scss/abstracts/__variables.scss +++ b/scss/abstracts/__variables.scss @@ -1,4 +1,4 @@ /// Colors // body color -$body-color: #fff; -$body-bg-color: #000; +$body-color: gray; +$body-bg-color: #fff; diff --git a/scss/style.scss b/scss/style.scss index bb873b9..57ff07e 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,12 +1,3 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - width: 100vw; - height: 100vh; - color: white; - background-color: black; -} +@import "./abstracts/_variables"; +@import "./base/reset"; +@import "./pages/home"; From df983388ab2b5d578d1a3b84924d046d99843506 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Fri, 25 Mar 2022 21:11:06 +0530 Subject: [PATCH 3/4] add flex and grid `mixins` --- scss/abstracts/_mixins.scss | 22 +++++++++++++++++++ .../{__variables.scss => _variables.scss} | 0 scss/style.scss | 3 ++- 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 scss/abstracts/_mixins.scss rename scss/abstracts/{__variables.scss => _variables.scss} (100%) diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss new file mode 100644 index 0000000..3b114ff --- /dev/null +++ b/scss/abstracts/_mixins.scss @@ -0,0 +1,22 @@ +// Flex +@mixin flex-between { + display: flex; + justify-content: space-between; +} + +@mixin flex-column { + display: flex; + flex-direction: column; +} + +@mixin flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +// Grid +@mixin grid-center { + display: grid; + place-items: center; +} diff --git a/scss/abstracts/__variables.scss b/scss/abstracts/_variables.scss similarity index 100% rename from scss/abstracts/__variables.scss rename to scss/abstracts/_variables.scss diff --git a/scss/style.scss b/scss/style.scss index 57ff07e..31ad376 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,3 +1,4 @@ -@import "./abstracts/_variables"; +@import "./abstracts/variables"; +@import "./abstracts/mixins"; @import "./base/reset"; @import "./pages/home"; From b5b0c25f367faa19a6d69f807a2e1fb392ef0f1a Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Fri, 25 Mar 2022 21:46:14 +0530 Subject: [PATCH 4/4] add minimal scss to create grid `layout` and fill random `colors` --- index.html | 64 ++++++++++++++++++---------------- scss/abstracts/_variables.scss | 2 +- scss/base/_reset.scss | 2 +- scss/pages/_home.scss | 28 +++++++++++++++ 4 files changed, 63 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index fe08f22..de49fa3 100644 --- a/index.html +++ b/index.html @@ -10,38 +10,40 @@ -

Beautiful CSS box-shadow examples

-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
+

Beautiful CSS box-shadow examples

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss index 29743f4..937c605 100644 --- a/scss/abstracts/_variables.scss +++ b/scss/abstracts/_variables.scss @@ -1,4 +1,4 @@ /// Colors // body color -$body-color: gray; +$body-color: black; $body-bg-color: #fff; diff --git a/scss/base/_reset.scss b/scss/base/_reset.scss index 4ace5c1..c53d568 100644 --- a/scss/base/_reset.scss +++ b/scss/base/_reset.scss @@ -5,7 +5,7 @@ } body { - width: 100vw; + width: 100%; height: 100vh; color: $body-color; background-color: $body-bg-color; diff --git a/scss/pages/_home.scss b/scss/pages/_home.scss index e69de29..7cb0e2c 100644 --- a/scss/pages/_home.scss +++ b/scss/pages/_home.scss @@ -0,0 +1,28 @@ +.container { + padding: 25px; + margin-bottom: 100px; + width: 100%; + min-height: 100%; + @include grid-center; + gap: 50px; + background-color: red; + h1 { + font-size: 4vmax; + text-align: center; + } + .box-container { + width: 100%; + min-height: 100%; + @include grid-center; + gap: 50px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + .box { + width: 150px; + height: 150px; + @include grid-center; + font-size: 2vmax; + border-radius: 10%; + background-color: yellowgreen; + } + } +}