IAT-339: 02 Styling the Webs — A slide deck
Styling the Webs
We'll be covering:
- Styling our almost-most hideous page ever
- More on atomic design
- CSS fundamentals
Lecture slides will be made available on the day of the lecture.
HTML5 + semantics
More on thinking semantically available at Dive into HTML5 - Semantics.
A reminder that citations are required.
- Everyone has a mouse or a touch screen
- Everyone has steady high-speed internets
- 1 pixel = 1 pixel
- Everyone's computer is faster each year
Everyone will view my website on IE6
Biggest False Assumption
Thinking you've mastered "teh webz".
What we want the web to be
Your first goal for every web project, fulfilling a need. You typically have less than 10 seconds to convince someone your website is the one they need.
What might help convince them your website is 'the one'?
What You Can Give the Webs
This potentially endless list...
- Content: text, visual, aural
- Structure: layout, grids, hierarchy, IA
- Accessibility: clean markup, flexibility
- Usable: interaction, utility, UX
Static to Active
You have spent time dealing with:
aka Wireframing a la papier
Key things to illustrate
- Structural options: Where things appear
- Hierarchy: How things appear
- Interaction: What the user is doing
Some things to think about
You are not required to generate your own images and icons for this project. That being said, the branding must still be your own work. Here are some recommended suggestions:
While HTML defines the DOM of what each item on the page is, CSS styles the page to ensure the user get's something usable. Good code will clearly separate semantic markup from styling.
Keeping Them Apart
A real Romeo/Juliet scenario
Rules for keeping them separate
- Do not use HTML to define styling; i.e.
<br>, <i>, <b>...
- Do not use inline CSS styling;
<section style="color: blue;">
- Keep files separate; .html defines content, .css defines style, never shall they meet
Basics of CSS
Here we go...
You want to aim for CSS stylings that are scalable and modular. Here are some divisions suggested as a framework:
- Base rules: direct styling of elements for normalizing or defaults
- Layout: structural styling for the page (i.e. .grid, .grid-column)
- Modules: styling for different components (i.e. .nav-bar, .nav-button)
- State Rules: styling different states (i.e. .is-current, .is-opened)
When you get started on planning out elements
More things to ensure:
- Use a purpose-oriented naming convention: .external-link (describe the content)
- Avoid naming based on style: .blue-border
- Use understandable names: #footer makes more sense then #lower-bar
- Agree with your teammate: You need to understand one another
ID vs. Class
IDs must always be unique,
<section id="kittens"> they can only be specified once. While classes can be used as many times as needed —
The order in which things are read
Inline styles:should never be used
- ID's: #home, #cool-stuff
- Classes, attributes & pseudo-classes: .home, [class], :hover
Why we care
At the end of the day, it's about your mental sanity. But good clean, clear coding conventions, page and file structure typically loads and runs faster. Computers thrive on cleanliness.
Your new best friend
Ever wanted to know what the slides would look like with a red background? Right-click and 'Inspect Element' opens up the development tools to mess around with things in.
Units in CSS
In the journey to responsiveness, we want to aim for relative and scalable units as much as possible.
Ems and Rems
Multiples of the base
As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.
50 pixel font size
50 pixel font size
Block vs Inline
Inline level elements (i.e. em, strong, span...) act like text, with size dictated by the content.
Block level elements (i.e. div, p, ul...) form a new block of content on a new line, and have a definable size.
The Stellar Box Model
Your other new best friend
Please make sure to have downloaded this week's tutorial package by the end of the break. Otherwise, have fun!
Validate, validate, validate, validate, validate, validate...
Validate * (infinity + beyond)
Yes, there is also CSS Validation.
(insert annoyed sighing)
This week's labs
- Continuation of CSS basics
- P01 crits
Next week's lecture
Like Building Blocks
- CSS grids
- Style guides
- Site structure
- Office hours — Tuesdays from 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.