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 (Sept 29).
Today's critique
Code questions
Are there any spaces in the filenames?
/my project/AWSOME PROJECT FILE.HTML
https://www.sfu.ca/my%20project/AWSOME%20PROJECT%20FILE.HTMLAre pixel units used for font sizing?
p { font-size: 16px; /* << not responsive */ }
p { font-size: 1rem; /* << responsive */ }Design questions
- Does the style guide look like the template provided?
- Is there consistency in how the components are treated?
- Can you tell what is interactive (or not) both before interacting with it, and when you interact with it?
Close all laptops please
: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>
Like Building Blocks
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
- A sample for the element in code:
<a href="" class="button-default">Default Button</a> - 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.
Just a bunch of blocks
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.
Next week
We will be covering git as part of next week's lecture. Please read the announcement for instructions.