SND 2018 NYC Workshop: Advancing your HTML and CSS skills
As new CSS technologies emerge, editorial designers working on the web now have a pretty comprehensive set of tools to produce quality layout. In this workshop we will take a look into how some CSS tricks can advance your storytelling skills.
Audience
Digital designers working in the editorial field or generally interested in layout and news.
Prior knowledge: basic Html and CSS.
Workshop Summary
The first part of this workshop will be an in-depth view of Flexbox, focusing on responsive design.
On the second part, we will see small code snippets inspired by print design.
At last, students will be asked to pick one or more layouts from the inspiration folder and try to implement it. Ideally, the implementation should account for at least 2 breakpoints. Students should also feel free to pick a layout from a different source as inspiration.
Expectations
Because we won't be dealing with the maintenance of a large stylesheet system, we won't go over typical production code features such as:
- SASS, LESS, or other preprocessor
- Prefixing
- Naming conventions
Workshop
Part 1: Flexbox
- Direction
- Justify-content
- Shrink
- Align-items
- Order
- Wrap
- Vertical centering
- Remaining space
Part 2: Tips and Tricks
- Quotation marks
- Drop Caps
- Spread-like layout
- Scaling typography based on viewport units
- Object-fit
- Transform
- Proper text highlight
- Proper text underline
- Simple CSS multi-column layout
- Paragraph splitter with image
- Fixed aspect ratio !hack!