Like Building Blocks
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 (May 27).
Why We Style Guide
Style guides help us to:
- Document our design
- Test cross-browser
- Avoid duplicates
- Create a common language
- Work in teams
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:
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.
Options for checking semantics:
If you need support for flexbox, I recommend The Flexbox Cheatsheet Cheatsheet (Joni Trythall).
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.
— Rachel Andrew
The Utility Belt
Approaches for debugging code and an introduction to git. Pre-recorded lectures and slides will typically become available the day after the lecture.