ah teaches web design & development (Like Building Blocks lecture)
Like Building Blocks
Lecture outline
More depth on styleguides, as well as thinking and building responsive structures online. Lecture slides will be made available on the day of the lecture (September 26).
Critique prep
Please come and sign-up for a timeslot for critique.
In preparation for lecture...
Please close up any laptops, cellphones, Oculus Rifts, ROG Allies and other 'beep-boop' devices.
:focus
and images
You cannot use the keyboard to navigate to an <img>
element as they are not interactive elements. You will have to wrap it in an interactive element to style it upon interaction:
a:focus img {
/* this selects an img inside of a anchor that has focus */
}
word-break
CSS does not understand how to break-up long URLs by default. So we need to tell it that it is allowed to do so:
a.long-url {
word-break: break-word;
}
<a href="https://..." class="long-url">https://www.sfu.ca/super-long-url/this-needs/to_be_allowed/to_break/otherwise-it-will/break-responsiveness</a>
Validators
Options for checking semantics:
![A stack of lego bricks](Lego.jpg)
Like Building Blocks
![An example of a search form including the search button and form field](Search_form.jpg)
How this breaks down 'atomically'
Style Guide Component
At minimum, each component in your style guide should include:
- A title for the element: Default Button Style
- A CSS selector for the item: .button-default
- The component rendered out:Default Button
Show, Don't Tell
It is very important that when we start talking about brands, colours, layouts, (etc) that you show us what you intend.
"I'm thinking a sky blue" vs.
![A stack of lego bricks](Lego.jpg)
Just a bunch of blocks
![An animated gif illustrating the differences between responsive and adaptive web design](01-Responsive_vs_Adaptive.gif)
Flexbox
If you need support for flexbox, I recommend The Flexbox Cheatsheet Cheatsheet (Joni Trythall).
Grids help
If you need support for grids, I recommend A Complete Guide to Grid (CSS Tricks).
Flexbox or grids?
Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That's flexbox.
Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That's grid.
![An animated gif illustrating how breakpoints work](02-Responsive_vs_Adaptive.gif)
Bring P1 to next lecture
Please make sure to bring P1 to next week's lecture.
Next week
We will be covering git as part of next week's lecture. Please read the announcement for instructions.