Skip to content

Commit 1154e97

Browse files
mahmoudshaabo1984mahmoudshaabo1984
committed
Refactor: Improve wireframe skeleton and CSS variables
- Enhanced CSS Variables with more semantic naming and additional color/spacing options - Added responsive design with media queries for mobile devices - Improved accessibility with ARIA labels and proper navigation links - Added hover effects for better user interaction - Improved semantic HTML structure with descriptive comments - Standardized spacing and layout using CSS Variables consistently
1 parent b03d5d3 commit 1154e97

2 files changed

Lines changed: 94 additions & 21 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,52 @@
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
10+
<!-- Header with navigation -->
1011
<header>
1112
<h1>My Website Logo</h1>
12-
<nav>
13+
<nav aria-label="Main navigation">
1314
<ul>
14-
<li>Home</li>
15-
<li>About</li>
16-
<li>Contact</li>
15+
<li><a href="#home">Home</a></li>
16+
<li><a href="#about">About</a></li>
17+
<li><a href="#contact">Contact</a></li>
1718
</ul>
1819
</nav>
1920
</header>
2021

22+
<!-- Main content with 3 repeating article components in grid layout -->
2123
<main>
2224
<article>
23-
<img src="placeholder.svg" alt="Article 1 image" />
25+
<img src="placeholder.svg" alt="Placeholder image for first article" />
2426
<h2>First Article Title</h2>
2527
<p>
2628
This is the first component of our grid. It represents a repeating
27-
piece of the UI.
29+
piece of the UI that follows semantic HTML structure.
2830
</p>
29-
<a href="#">Read more</a>
31+
<a href="#article-1">Read more</a>
3032
</article>
3133

3234
<article>
33-
<img src="placeholder.svg" alt="Article 2 image" />
35+
<img src="placeholder.svg" alt="Placeholder image for second article" />
3436
<h2>Second Article Title</h2>
3537
<p>
3638
As requested by the mentor, we have three frames here to match the
37-
wireframe layout.
39+
wireframe layout using CSS Grid for responsive design.
3840
</p>
39-
<a href="#">Read more</a>
41+
<a href="#article-2">Read more</a>
4042
</article>
4143

4244
<article>
43-
<img src="placeholder.svg" alt="Article 3 image" />
45+
<img src="placeholder.svg" alt="Placeholder image for third article" />
4446
<h2>Third Article Title</h2>
4547
<p>
4648
Websites are made of repeating pieces like these articles. This is our
47-
skeleton.
49+
skeleton built with CSS Variables and semantic HTML5 tags.
4850
</p>
49-
<a href="#">Read more</a>
51+
<a href="#article-3">Read more</a>
5052
</article>
5153
</main>
5254

55+
<!-- Footer -->
5356
<footer>
5457
<p>Created by Mahmoud Shaabo - CYF Sprint 1</p>
5558
</footer>

‎Wireframe/style.css‎

Lines changed: 78 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1+
/* CSS Variables for consistent styling */
12
:root {
23
--paper: #ffffff;
34
--ink: #333333;
5+
--link-color: #0066cc;
6+
--border-color: #dddddd;
7+
--bg-light: #f5f5f5;
48
--font: 100%/1.5 system-ui, sans-serif;
59
--space: 20px;
6-
--line: 1px solid #dddddd;
10+
--space-large: 40px;
11+
--line: 1px solid var(--border-color);
712
--container: 1100px;
13+
--radius: 8px;
14+
}
15+
16+
* {
17+
box-sizing: border-box;
818
}
919

1020
body {
@@ -15,49 +25,109 @@ body {
1525
padding: var(--space);
1626
}
1727

28+
/* Header and Navigation */
1829
header {
1930
border-bottom: var(--line);
2031
padding-bottom: var(--space);
21-
margin-bottom: 40px;
32+
margin-bottom: var(--space-large);
2233
text-align: center;
2334
}
2435

25-
ul {
36+
header h1 {
37+
margin: 0 0 var(--space) 0;
38+
}
39+
40+
nav ul {
2641
display: flex;
2742
justify-content: center;
2843
list-style: none;
2944
gap: 30px;
3045
padding: 0;
46+
margin: 0;
3147
}
3248

33-
/* تنسيق الشبكة للمقالات الثلاث */
49+
nav li {
50+
cursor: pointer;
51+
transition: color 0.3s ease;
52+
}
53+
54+
nav li:hover {
55+
color: var(--link-color);
56+
}
57+
58+
/* Main grid layout with 3 repeating components */
3459
main {
3560
max-width: var(--container);
3661
margin: 0 auto;
3762
display: grid;
38-
grid-template-columns: repeat(3, 1fr); /* هنا ننشئ 3 أعمدة متساوية */
63+
grid-template-columns: repeat(3, 1fr);
3964
gap: var(--space);
4065
}
4166

67+
/* Article components */
4268
article {
4369
border: var(--line);
4470
padding: var(--space);
45-
border-radius: 8px;
71+
border-radius: var(--radius);
4672
display: flex;
4773
flex-direction: column;
74+
transition: box-shadow 0.3s ease;
75+
}
76+
77+
article:hover {
78+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
4879
}
4980

5081
article img {
5182
width: 100%;
5283
height: 150px;
53-
background-color: #eee;
84+
background-color: var(--bg-light);
5485
margin-bottom: 15px;
86+
border-radius: var(--radius);
87+
object-fit: cover;
5588
}
5689

90+
article h2 {
91+
margin: 0 0 10px 0;
92+
font-size: 1.25rem;
93+
}
94+
95+
article p {
96+
margin: 0 0 15px 0;
97+
flex-grow: 1;
98+
}
99+
100+
article a {
101+
color: var(--link-color);
102+
text-decoration: none;
103+
font-weight: 500;
104+
align-self: flex-start;
105+
}
106+
107+
article a:hover {
108+
text-decoration: underline;
109+
}
110+
111+
/* Footer */
57112
footer {
58113
margin-top: 50px;
59114
border-top: var(--line);
60-
padding-top: 20px;
115+
padding-top: var(--space);
61116
text-align: center;
62117
font-size: 0.9rem;
63118
}
119+
120+
/* Responsive design for smaller screens */
121+
@media (max-width: 768px) {
122+
main {
123+
grid-template-columns: 1fr;
124+
}
125+
126+
body {
127+
padding: 15px;
128+
}
129+
130+
nav ul {
131+
gap: 15px;
132+
}
133+
}

0 commit comments

Comments
 (0)