Skip to content

Commit 05e4ad3

Browse files
TTiamiyuTTiamiyu
committed
Add wireframe images and enhance index.html content for clarity, css code edited to align with the changes
1 parent aa8d9a8 commit 05e4ad3

4 files changed

Lines changed: 119 additions & 63 deletions

File tree

‎Wireframe/Branch.png‎

858 KB
Loading

‎Wireframe/index.html‎

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,72 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
11+
<h1>Wireframe Coursework</h1>
12+
<p>This is a wireframe assignment and the following articles answer specific questions.</p>
1513
</header>
1614
<main>
1715
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
16+
<img src="placeholder.svg" alt="placeholder image" />
17+
<h2>Purpose of ReadME</h2>
18+
<p>
19+
Read me provides a quick overview of what the project sets to achieve,
20+
the likely uses and the guidelines of how others can contribute.
21+
</p>
22+
<details>
23+
<summary>Read more</summary>
2024
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
25+
For more in-depth information, you can read the professional guide here:
26+
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">
27+
The Official README Guide
28+
</a>
2329
</p>
24-
<a href="">Read more</a>
30+
</details>
2531
</article>
32+
<article>
33+
<img src="placeholder2.png" alt="Wireframe image" />
34+
<h2>Purpose of Wireframe</h2>
35+
<p>
36+
Wireframe serves as a foundational blueprint or mental image of
37+
a product, it has numerous functions and most importantly
38+
wireframe is often used in the early stages of web or app
39+
development to prevent future, costly redesigns.
40+
</p>
41+
<details>
42+
<summary>Read more</summary>
43+
<p>
44+
For more details on wireframing best practices and how they streamline
45+
development, check out this guide:
46+
<a href="https://www.uxpin.com/studio/blog/wireframing-guide/" target="_blank" rel="noopener noreferrer">
47+
The Ultimate Guide to Wireframing
48+
</a>
49+
</p>
50+
</details>
51+
</article>
52+
<article>
53+
<img src="Branch.png" alt="Branch image" />
54+
<h2>What is a branch in Git</h2>
55+
<p>
56+
A branch represents an independent line of development in a Git repository,
57+
allowing multiple developers to work on different features or bug fixes simultaneously
58+
without affecting the main codebase until changes are ready to be merged.
59+
</p>
60+
<details>
61+
<summary>Read more</summary>
62+
<p>
63+
For a deeper dive into how branching workflows operate and how to merge
64+
your changes effectively, visit the official documentation:
65+
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener noreferrer">
66+
Git Branching Explained
67+
</a>
68+
</p>
69+
</details>
70+
</article>
71+
2672
</main>
73+
2774
<footer>
2875
<p>
29-
This is the default, provided code and no changes have been made yet.
76+
By Toluwalase Tiamiyu.
3077
</p>
3178
</footer>
3279
</body>

‎Wireframe/placeholder2.png‎

3.81 MB
Loading

‎Wireframe/style.css‎

Lines changed: 62 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,98 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
191
:root {
20-
--paper: oklch(7 0 0);
2+
--color: #0056b3;
3+
--paper: oklch(98 0 0);
214
--ink: color-mix(in oklab, var(--color) 5%, black);
225
--font: 100%/1.5 system-ui;
236
--space: clamp(6px, 6px + 2vw, 15px);
247
--line: 1px solid;
258
--container: 1280px;
269
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
10+
2911
body {
3012
background: var(--paper);
3113
color: var(--ink);
3214
font: var(--font);
15+
padding-bottom: 80px;
16+
}
17+
header {
18+
text-align: center;
19+
margin-bottom: calc(var(--space) * 2);
3320
}
3421
a {
35-
padding: var(--space);
36-
border: var(--line);
3722
max-width: fit-content;
23+
text-decoration: underline;
3824
}
3925
img,
4026
svg {
4127
width: 100%;
4228
object-fit: cover;
4329
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
30+
4831
main {
4932
max-width: var(--container);
5033
margin: 0 auto calc(var(--space) * 4) auto;
5134
}
5235
footer {
5336
position: fixed;
5437
bottom: 0;
38+
width: 100%;
5539
text-align: center;
40+
background: var(--paper);
41+
padding: var(--space) 0;
42+
border-top: var(--line);
5643
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
44+
6445
main {
6546
display: grid;
66-
grid-template-columns: 1fr 1fr;
47+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
6748
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
71-
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
49+
max-width: var(--container);
50+
margin: 0 auto;
51+
}
52+
53+
main > *:first-child {
54+
grid-column: span 2;
55+
}
56+
7757
article {
7858
border: var(--line);
79-
padding-bottom: var(--space);
59+
padding: var(--space); /* Apply padding all around */
8060
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
61+
display: flex; /* Switch to flexbox for better flow */
62+
flex-direction: column;
63+
gap: var(--space);
64+
}
65+
66+
article img {
67+
width: 100%;
68+
display: block; /* Removes any tiny gaps under the image */
69+
}
70+
71+
/* This targets the content inside details to ensure it doesn't break */
72+
details p {
73+
margin: 0;
74+
padding-top: 10px;
75+
}
76+
summary {
77+
cursor: pointer;
78+
padding: 10px;
79+
background-color: #f4f4f4;
80+
border-radius: 5px;
81+
list-style: none;
82+
font-weight: bold;
83+
summary:hover {
84+
background-color: #e0e0e0;
85+
}
86+
87+
summary:focus-visible {
88+
outline: 2px solid var(--color);
89+
outline-offset: 2px;
90+
}
91+
}
92+
93+
details {
94+
margin-top: 10px;
95+
padding: 10px;
96+
border: 1px solid #ddd;
97+
border-radius: 5px;
8998
}

0 commit comments

Comments
 (0)