diff --git a/Wireframe/branch-in-git.png b/Wireframe/branch-in-git.png new file mode 100644 index 000000000..4c8d4f192 Binary files /dev/null and b/Wireframe/branch-in-git.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..3764ade1c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,92 @@ - - + + Wireframe - +
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

Wireframe to Code

+

Understanding README files, wireframes, and branches in Git.

+
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
+
+

README Section

+
+

Purpose of a README File

+
+ Picture of a README file +
Fig 1 – README File Image
+
+

+ A README file is a crucial document that introduces a project. + It explains what the project is, what it does and why it exists. + It also provides setup instructions and helps users understand, + use or contribute to the project effectively. +

+ + Learn more about README files + +
+
+ +
+

Wireframe Section

+
+

Purpose of a Wireframe

+
+ Image showing wireframe +
Fig 2 – Wireframe Image
+
+

+ A wireframe is a basic, two-dimensional visual representation of a web page, + app interface, or product layout. It depicts only functionality, + not the true style and visual elements of the final product. +

+ + Learn more about wireframes + +
+
+ +
+

Git Branch Section

+
+

Explaining a Branch in Git

+
+ Diagram of Git branching structure +
Fig 3 – Git Branch Illustration
+
+

+ A branch in Git represents a separate line of development. + It’s a pointer to a snapshot of your project at a given time. + As you commit on that branch, Git updates it to reflect your changes. + This allows isolated work on features or fixes before merging them into the main project. +

+ + Learn more about Git branches + +
+
+ - + \ No newline at end of file diff --git a/Wireframe/readme-image.jpg b/Wireframe/readme-image.jpg new file mode 100644 index 000000000..8266de162 Binary files /dev/null and b/Wireframe/readme-image.jpg differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..9a06c4eb5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,105 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ :root { - --paper: oklch(7 0 0); + --paper: white; /* or oklch(70% 0 0) if you want OKLCH */ + --color: white; --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +/* === Page Layout === */ +html, body { + margin: 0; + padding: 0; background: var(--paper); color: var(--ink); font: var(--font); + min-height: 100%; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - width: 100%; - object-fit: cover; -} -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - position: fixed; - bottom: 0; + +/* === Header === */ +header { text-align: center; + padding: var(--space); } -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ + +/* === Main Content === */ main { display: grid; grid-template-columns: 1fr 1fr; + grid-template-areas: + "readme readme" + "wireframe branch"; gap: var(--space); - > *:first-child { - grid-column: span 2; - } + max-width: var(--container); + margin: 0 auto; + width: 100%; + padding-bottom: 5rem; /* space so content isn’t hidden behind fixed footer */ +} + +/* === Section Areas === */ +section.articles-parent { + grid-area: readme; } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ + +section.child-articles { + grid-area: wireframe; +} + +section.branch-article { + grid-area: branch; +} + +/* === Article Layout === */ article { border: var(--line); padding-bottom: var(--space); text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } +} + +article > * { + grid-column: 2 / 3; +} + +figure { + grid-column: span 3; +} + +/* === Images === */ +img, +svg { + max-width: 100%; + height: auto; + object-fit: cover; + display: block; + margin: 0 auto; +} + +/* === Links === */ +a { + padding: var(--space); + border: var(--line); + display: inline-block; + color: inherit; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* === Fixed Footer === */ +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: #f75151; + text-align: center; + padding: var(--space); + z-index: 1000; } diff --git a/Wireframe/wireframe-image.png b/Wireframe/wireframe-image.png new file mode 100644 index 000000000..8ad7083b7 Binary files /dev/null and b/Wireframe/wireframe-image.png differ