Week Nº 12

Session Recording

We want to pick up from last week’s demo, quickly showing how you will structure your final projects:

We’re going to use cascade layers to avoid specificity problems!

These are a somewhat recent addition to CSS, and will help us manage our overlapping rules.
Add this to your landing page <head>, replacing our two <link> elements:
```
						<style>
	@import 'reset.css' layer(reset);
	@import 'common.css' layer(common);
</style>

			
	
```
This still “links” your stylesheets (now via @import), but enforces the override order declared by @layer.
Duplicate your “winning” direction’s directory, direction-1/ → article-name/

Replace the <link> elements there too, updating the path and adding the page-specific styles:

						<style>
	@import '../reset.css' layer(reset);
	@import '../common.css' layer(common);
	@import 'style.css' layer(page);
</style>

Now any styles you write in the page-specific style.css will override the common.css⁠—no matter the how complicated the selector or specificity!
“Promote” your winning direction’s styles up to your common.css! These are now the basis for your design system
Duplication article-name/ twice for your other texts, second-one/ and third-text/
Update the <title> and <h1> in each of these to match your different texts

For next week, you will be incorporating the semantic DOM for the actual texts!
Update the links on your landing page navigation to point to these new folders (instead of your directions)
And likewise update the per-page navigation, so they all link to one-another
Later (when you don’t need anything from them), you can delete your other directions to “tidy up”

This is how you will develop the system!

We’ll spend the bulk of class today looking through your initial third project sketching. We’ll try using our other room for less chaos:

Group Nº 1

Group Nº 2

The plan:

Our goal is that everyone will see one of us
We’ll shoot for about 10 minutes with each of you
We’ll see five people, take a short break, then switch groups
Give us some brief background and then right into your directions
Have your work up on your phone
We want to focus on the Big Picture, to start⁠—let’s save specific/technical minutia for later/Slack
Have your laptop/notebook ready for notes!
Feedback for one group is often feedback for all; let’s be actively listening to each turn

You’ll be moving into the next phase of your Binding projects. Narrow your design direction while incorporating your other texts, building it out across all your pages⁠—and start to flesh it out across the breakpoints:

Project Nº 3: Develop the System
As noted on the project page, we also want you to weigh in on your former partner’s work in a GitHub Issue! The more thorough, the better⁠—for both of you.

Share your repo links with each other on Slack. It might be more useful to do this after your former partner has put in some more work⁠—so communicate/coordinate around that.
When you are ready, send us your links as usual:

Submission Form
You’ll also include a link to the issue you file!