Skip to content
academia.sh
tr
Log in

Course Intermediate

Layout Systems and Responsive Design

By the end of this course

Start course

01

Flexbox and Grid

The models of a flexbox that distributes on a single axis and a grid that defines lines on two axes; the arithmetic of the flexing calculation, automatic placement rules, and the criterion for choosing between the two models.

  1. 01 The Flexbox Model Establishing a flex formatting context, deriving the main and cross axis from the direction declaration, distributing free space on the main axis, and alignment on the cross axis.
  2. 02 Flexing Properties Where an item's base size comes from, how positive free space is divided by growth factors, how negative free space is shared with scaled shrink factors, and the freezing of items that hit a minimum size.
  3. 03 The Grid Model Establishing a grid formatting context, the distinction between track and line, the fractional unit dividing free space, the hidden lower bound the min-content size places on a share, and naming areas.
  4. 04 Grid Placement Explicit placement of items by line number, the cursor rule of the auto-placement algorithm, the difference between sparse and dense modes, the formation of implicit tracks, and the separation of visual order from document order.
  5. 05 Choosing Between Grid and Flexbox Which question each of the two layout models answers, the computed difference in last-row behavior, the cost a spread request creates in flexbox, and the nested use of the two models together.
  6. 06 Multi-Column Layout Splitting a text flow into columns, resolving column-count and column-width declarations together, the balancing rule, break control, and the cases multi-column layout is not suited to.

02

Responsive Design

Deriving the breakpoint from content, which question media and container queries each ask, the fluid typography computation, image selection with a source set, and style that adapts to user preferences.

  1. 01 The Principle of Responsive Design The three components of responsiveness, deriving breakpoints from content by computation, thresholds that resolve on their own through intrinsic sizing, and how a track definition shifts a threshold.
  2. 02 Media Queries A media query's components, where its rules sit in the cascade, the overlap and gap at the edge of two ranges, the relation between query units and the user's font size, and feature queries.
  3. 03 Container Queries Moving the query's subject from the viewport to the component's container, declaring a container and the containment it requires, container units, and the same component making the right decision in two different places.
  4. 04 Responsive Typography Deriving a fluid font-size expression from two anchor points, the scale ratio narrowing on a narrow screen, line-length control, and how text responds to zoom and to the user's setting.
  5. 05 Responsive Images Separating resolution switching from art direction, resolving a source size declaration, the candidate selection rule, the effect of source order, and reserved space preventing layout shift.
  6. 06 User Preferences Querying color scheme, contrast, forced colors, and reduced-motion preferences, contrast-checking the dark palette, resolving preferences together, and what reduced motion covers.

03

Motion and Transforms

The matrix equivalent and order dependence of transforms, the timing of transitions and keyframe animations, motion's cost in the rendering pipeline, and respecting the reduced-motion preference.

  1. 01 Transforms The matrix equivalent of the translate, scale, rotate, and skew functions; how function order changes the result, the effect of the transform origin, and the transform being applied after layout.
  2. 02 Transitions Spreading a change between two states over time; values that can transition and values that cannot, computing the cubic Bezier timing curve, an interrupted transition's behavior, and stepped timing.
  3. 03 Keyframe Animations Animations that carry their own timeline; the definition of a keyframe set, resolving local progress from iteration and direction values, the fill mode's values outside the animation, and the timing function applied to frame intervals.
  4. 04 Animation Performance Motion's counterpart in the rendering pipeline; which property change reruns the layout, paint, and compositing stages, what a compositing layer is, forced synchronous layout, and the frame budget.
  5. 05 Accessible Motion What motion sensitivity is, separating large-area motion from local motion, the cost of turning motion off wholesale in the reduced-motion preference, and the rules for replacing motion instead of removing it.

04

Style Architecture

Keeping specificity flat with naming conventions, managing theme and variant with custom properties, what compile-time tools do, controlling leakage with layers and scope, and style's performance cost.

  1. 01 Naming Methodologies The block-element-modifier approach; keeping specificity flat, a name announcing ownership, the separation between modifier and state, and the pattern being checkable.
  2. 02 Custom Properties Custom properties being computed at the element they are declared on, inheritance carrying the computed value, fallback value chains, invalidity at computed-value time, and building a component's style interface.
  3. 03 Preprocessors and Postprocessors Style tools that run at compile time; flattening nested notation, the cost of body copying, the distinction between a compile-time value and a runtime value, and postprocessor transforms.
  4. 04 Scoped Styling Approaches Approaches that genuinely limit the scope of names; generated local names, class sharing by declaration hash, the document scope declaration, shadow tree encapsulation, and comparing the guarantees each approach gives.
  5. 05 The Utility Class Approach Constraint-based style systems; single-declaration classes taking a value from a closed scale, the set growing independent of component count, repetition moving from the stylesheet into the document, and where the approach breaks.
  6. 06 Style Performance Selector matching being done right to left, invalidation scope depending on selector shape, a stylesheet blocking paint, and computing the critical style subset.

Start typing to search.

↑↓ ↵ Esc navigate · open · close