Skip to content

Commit f05c843

Browse files
nuthancnuthanc
committed
Update
1 parent 31d6990 commit f05c843

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+669
-1
lines changed

‎README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# html_and_css
22

3+
## Omnifood Project README in starter/07-Omnifood-Desktop
4+
35
* https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/
46
* Author's Repo: https://github.com/jonasschmedtmann/html-css-course
57
* Flexbox and CSS Grid: https://github.com/nuthanc/angular_advanced_fast/blob/main/flexbox_css_grid/README.md
@@ -629,4 +631,26 @@
629631
* Adding Gradient to image to make text more readable
630632
* Stack of background-images where the 1st background image is a gradient which is transparent
631633
* 1st is in top of 2nd in background-image property
632-
* Centering done via **Vertical Centering with Absolute Position and Transform**
634+
* Centering done via **Vertical Centering with Absolute Position and Transform**
635+
636+
### Building a Web Application Layout
637+
638+
* 5 parts of our Application Layout
639+
* **nav** element for Navigation links
640+
* **menu** element for menu buttons in a Web App
641+
* **main** element for main piece of content of the Document
642+
* **aside** element for Additional information
643+
* Background for above initially to see what is going on
644+
* In my implemenatation, I had used *auto and fr* for column values, but Author gave *fixed width* for most
645+
* The *body(grid container)* occupies *only the space that it needs for the content*
646+
* But we want for the whole page, so height: 100vh;
647+
* **For some reason for the buttons**, the color **doesn't** get **inherited**
648+
* The buttons are centered because they are inline and treated like text(so text-align: center centered them)
649+
* For trash button placement at right, Author used **margin-left: auto**
650+
* Flexbox treats text as **Flex Item**
651+
* Author used **overflow: scroll** to section to keep it fixed so that it doesn't grow with content
652+
* `overflow` is for how elements that don't fit into container appear
653+
* But now the Flex items of section **shrink** *even though they have height of 96px* to accomodate this because all the Flex items have `flex-shrink: 1` by default
654+
* So need to add `flex-shrink: 0` to all the flex items(.email in this case)
655+
656+
## Omnifood Project README in starter/07-Omnifood-Desktop

‎starter/06-Components/app-layout/author/app-layout.css

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: sans-serif;
9+
color: #343a40;
10+
font-size: 24px;
11+
height: 100vh;
12+
text-align: center;
13+
font-weight: bold;
14+
15+
display: grid;
16+
grid-template-columns: 80px 400px 1fr 250px;
17+
grid-template-rows: 80px 1fr;
18+
}
19+
20+
nav,
21+
section,
22+
main,
23+
aside {
24+
padding-top: 24px;
25+
}
26+
27+
nav {
28+
background-color: #343a40;
29+
color: #fff;
30+
grid-row: 1 / -1;
31+
}
32+
33+
menu {
34+
background-color: #7048e8;
35+
grid-column: 2 / -1;
36+
display: flex;
37+
align-items: center;
38+
padding: 0 40px;
39+
gap: 12px;
40+
}
41+
42+
section {
43+
background-color: #e9ecef;
44+
padding: 40px;
45+
display: flex;
46+
flex-direction: column;
47+
gap: 40px;
48+
overflow: scroll;
49+
}
50+
51+
.email {
52+
background-color: #adb5bd;
53+
height: 96px;
54+
flex-shrink: 0;
55+
56+
display: flex;
57+
align-items: center;
58+
justify-content: center;
59+
}
60+
61+
aside {
62+
background-color: #e9ecef;
63+
}
64+
65+
button {
66+
display: inline-block;
67+
font-size: 16px;
68+
font-weight: bold;
69+
background-color: #5f3dc4;
70+
border: none;
71+
cursor: pointer;
72+
color: #fff;
73+
padding: 8px 12px;
74+
}
75+
76+
button:last-child {
77+
background-color: #d6336c;
78+
margin-left: auto;
79+
}
80+
81+
.box {
82+
width: 300px;
83+
height: 80px;
84+
background-color: #d6336c;
85+
}

‎starter/06-Components/app-layout/author/app-layout.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="app-layout.css">
7+
<title>App Layout</title>
8+
</head>
9+
<body>
10+
<nav>Nav</nav>
11+
<menu>
12+
<button>New</button>
13+
<button>Reply</button>
14+
<button>Forward</button>
15+
<button>Mark unread</button>
16+
<button>Trash</button>
17+
</menu>
18+
<section>
19+
<div class="email">Email 1</div>
20+
<div class="email">Email 2</div>
21+
<div class="email">Email 3</div>
22+
<div class="email">Email 4</div>
23+
<div class="email">Email 5</div>
24+
<div class="email">Email 6</div>
25+
<div class="email">Email 7</div>
26+
<div class="email">Email 8</div>
27+
<div class="email">Email 9</div>
28+
<div class="email">Email 10</div>
29+
</section>
30+
<main>Email View</main>
31+
<aside>Additional info</aside>
32+
</body>
33+
</html>

‎starter/06-Components/app-layout/my-imp/app-layout.css

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
*/
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Inter', sans-serif;
16+
}
17+
18+
.container {
19+
height: 100vh;
20+
display: grid;
21+
grid-template-columns: auto 1fr 2fr 1fr;
22+
grid-template-rows: auto 1fr;
23+
}
24+
25+
.sidebar {
26+
background-color: #343a40;
27+
color: #fff;
28+
padding: 24px;
29+
grid-row: 1 / -1;
30+
}
31+
32+
.menubar {
33+
display: flex;
34+
justify-content: space-between;
35+
background-color: #7950f2;
36+
padding: 18px 36px;
37+
grid-column: 2 / -1;
38+
}
39+
40+
.left-buttons {
41+
display: flex;
42+
gap: 12px;
43+
}
44+
45+
.btn {
46+
padding: 8px 16px;
47+
background-color: #562cd5;
48+
border: none;
49+
color: white;
50+
}
51+
52+
.trash-btn {
53+
background-color: red;
54+
color: white;
55+
}
56+
57+
.all-emails {
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
gap: 48px;
62+
background-color: #e9ecef;
63+
padding-top: 24px;
64+
}
65+
66+
.scrollable {
67+
overflow: auto;
68+
}
69+
70+
.box {
71+
background-color: #868e96;
72+
text-align: center;
73+
padding: 34px 148px;
74+
}
75+
76+
.email-detail {
77+
text-align: center;
78+
padding-top: 20px;
79+
}
80+
81+
.additional-info {
82+
background-color: #e9ecef;
83+
text-align: center;
84+
padding-top: 20px;
85+
}

‎starter/06-Components/app-layout/my-imp/app-layout.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="app-layout.css">
14+
<title>Email</title>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<nav class="sidebar">
19+
<h3>Nav</h3>
20+
</nav>
21+
22+
<nav class="menubar">
23+
<div class="left-buttons">
24+
<button class="btn">New</button>
25+
<button class="btn">Reply</button>
26+
<button class="btn">Forward</button>
27+
<button class="btn">Mark unread</button>
28+
</div>
29+
<div class="right">
30+
<button class="btn trash-btn">Trash</button>
31+
</div>
32+
</nav>
33+
34+
<section class="all-emails scrollable">
35+
<div class="box">Email 1</div>
36+
<div class="box">Email 2</div>
37+
<div class="box">Email 3</div>
38+
<div class="box">Email 4</div>
39+
<div class="box">Email 5</div>
40+
<div class="box">Email 6</div>
41+
<div class="box">Email 7</div>
42+
<div class="box">Email 8</div>
43+
<div class="box">Email 9</div>
44+
<div class="box">Email 10</div>
45+
</section>
46+
47+
<section class="email-detail">
48+
<h3>Email View</h3>
49+
</section>
50+
51+
<section class="additional-info">
52+
<h3>Additional info</h3>
53+
</section>
54+
</div>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)