You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+30-42Lines changed: 30 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,11 +2,6 @@
2
2
3
3
In this workshop, you'll build a Sims-style character creation screen.
4
4
5
-
In addition to skills learned in previous modules, this workshop focuses on:
6
-
7
-
- Absolute and fixed positioning
8
-
- Overflow
9
-
- Visually-hidden content
10
5
11
6
## Mockups
12
7
@@ -16,6 +11,8 @@ Desktop:
16
11
17
12
For this workshop, we're only targeting desktops (although if you're so inclined, creating a mobile variant would make a great stretch goal!).
18
13
14
+
> Protip: If you're reading this in VS Code, open the Command Palette (Cmd + Shift + P) and select “Markdown: Open Preview to the Side”. That way, you can see all the images in this document!
15
+
19
16
## Setup Instructions
20
17
21
18
This project uses create-react-app.
@@ -62,65 +59,56 @@ function Something() {
62
59
}
63
60
```
64
61
65
-
Every class written in a CSS module is exported and can be accessed under that same key. For this reason, it's common to use `camelCase`classnames instead of`kebab-case` — it's easier to write `styles.someRandomThing` than `styles['some-random-thing']`.
62
+
Additionally, a few global styles can be found in `src/index.css`.
66
63
67
-
If you'd prefer, you can install and use a different styling solution (though this project does come with some base styles, so it's probably more hassle than it's worth).
64
+
## Exercises
68
65
69
-
Some baseline global styles are provided in`/src/index.css`. You aren't expected to change anything in this file, but you may wish to check it out!
66
+
### Exercise 1: Fix footer links
70
67
71
-
Here's a quick summary of the existing components, and what their purpose is:
68
+
Let's start with a small detail: The footer links are unreadable:
72
69
73
-
-`CharacterEditor` — Our main view, with the character and its controls.
74
-
-`Character` — A thin wrapper around an SVG. You shouldn't have to tweak it at all.
75
-
- `ControlPane` — A reusable component that allows the user to change a single parameter (eg. Bodies). One for each tweakable control.
76
-
- `ButtonRow` - A component that holds a series of buttons, and manages their layout
77
-
- `ToggleButton` — A button that can be toggled on and off
78
-
- `Footer` - A generic site-wide footer
79
-
- `MaxWidthWrapper` — A generic utility component that constrains width.
70
+
<img alt="Side-by-side comparison of the current footer vs. the ideal one" src="./docs/footer-fix.png"/>
80
71
81
-
## Design tokens
72
+
### Exercise 2: Layout adjustments
82
73
83
-
For now, we're still hardcoding CSSvalues (this is the last workshop! We'll start using CSS variables in the next module).
74
+
Next, let's tackle the biggest visual issue: the layout.
84
75
85
-
Feel free to copy/paste the values in this section across your application, as-needed.
76
+
We have a `MaxWidthWrapper` constraining the max width, but everything is super wide within it.
86
77
87
-
### Sizing and Spacing
78
+
Our header should be 65% of the available width, and our control-panel column should be 50%.
88
79
89
-
This app uses an 8px unit. Most spaces will be multiples of 8:
80
+
<img alt="Annotated mockup showing the overall width at 1024px, the header occupying 65%, and the control panels occupying 50%" src="./docs/sizes.png" style="width: 100%;" />
90
81
91
-
- `8px`
92
-
- `16px`
93
-
- `24px`
94
-
- `32px`
95
-
- `48px`
96
-
- `64px`
97
-
- `96px`
98
-
- `128px`
82
+
Our character should be given a fixed position, and held in the space made available by the width tweaks.
99
83
100
-
Our maximum content width is `1024px`. Sections use percentage widths, like so:
84
+
Give the character a minimum height of 500px. On smaller windows, this means the character won't fit in the viewport:
101
85
102
-
<img alt="Annotated mockup showing the overall width at 1024px, the header occupying 65%, and the control panels occupying 50%" src="./docs/sizes.png" style="width: 100%;" />
86
+
<img alt="Screenshot of a shorter Chrome window, with the character truncated at the knees" src="./docs/short-window.png" style="width: 100%;"/>
103
87
104
-
Our character should have a minimum height of 600px, and be cropped on smaller windows:
88
+
### Exercise 3: Overflow
105
89
106
-
<img alt="Screenshot of a shorter Chrome window, with the character truncated at the knees" src="./docs/short-window.png" style="width: 100%;" />
90
+
Each control panel features a number ofcustomizations. For control panels with too many options, a horizontal scrollbar should be introduced:
91
+
92
+
<img alt="Close-up screen recording of the overflow area in the control-panel" src="./docs/overflow.gif" style="width: 100%;"/>
93
+
94
+
### Exercise 4: Perspective decoration
95
+
96
+
To help add a bit of perspective, a light gray bar should extend across the bottom 40%of the screen:
97
+
98
+
IMAGE
107
99
108
-
### Font
100
+
It should sit behind the avatar (and both the perspective bar and the character should sit below the footer):
109
101
110
-
1 font is used in this project: `Poppins`. It is already included in the stylesheet.
102
+
Scroll GIF
111
103
112
-
For font sizes, the `rem` unit should be used. The scale is:
104
+
For bonus points, solve this challenge without setting any z-indexes.
113
105
114
-
- `0.875rem`
115
-
- `1rem`
116
-
- `1.25rem`
117
-
- `2.5rem`
118
106
119
-
### Color palette
107
+
## Color palette
120
108
121
109
There aren't many colors used in this project (much of the color comes from the character! All of that stuff is already managed for us).
0 commit comments