Frontend Fundamentals: HTML, CSS, and Responsive Styling Questions

Brief approach

• Default to a flexible Flexbox layout so older browsers get a usable staggered flow.
• Use CSS feature detection (@supports) to enable Grid only in browsers that support it, applying more precise staggered layout there.
• Same HTML for both; on small screens a media query collapses to one column.

HTML

<section class="cards">
  <article class="card">A</article>
  <article class="card">B</article>
  <article class="card">C</article>
  <article class="card">D</article>
  <article class="card">E</article>
  <article class="card">F</article>
</section>

CSS

/* Base: mobile-first single column */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* Card styling */
.card {
  background:#fff;
  border-radius:8px;
  padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  min-height:80px; /* fallback baseline */
}

/* Desktop Flex fallback: two/three columns depending on width */
@media (min-width:700px){
  .cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card {
    width: calc(33.333% - 12px); /* three columns fallback */
  }
}

/* Use Grid only when supported -> progressive enhancement */
@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 160px; /* consistent row height to enable spanning */
    gap: 16px;
    align-items: start;
  }
  /* Create a staggered masonry-like effect by varying row spans */
  .card:nth-child(3n + 1) { grid-row: span 2; }
  .card:nth-child(3n + 2) { grid-row: span 1; }
  .card:nth-child(3n + 3) { grid-row: span 1; }
}

/* Mobile collapse to single column regardless of support */
@media (max-width:699px){
  .cards { grid-template-columns: 1fr; }
  .card { width: auto; grid-row: auto; }
}

Why this works / Feature detection

• The stylesheet’s default is Flexbox so older browsers render a responsive multi-column fallback without Grid.
• The @supports (display: grid) block only runs in Grid-capable browsers enabling the precise stagger (using row spans).
• The media queries ensure single-column mobile view across all browsers.
• This is progressive enhancement: build a broadly compatible baseline, then enable advanced layout when available.

Notes / trade-offs

• Grid gives deterministic control (row spans), Flexbox fallback relies on natural heights — for identical visual parity you could add size classes or JS sizing in the fallback.
• Test in target browsers and consider using masonry/polyfills only if exact parity is required.

Definition & approach

• Mobile-first: base styles target small screens; add rules upward with min-width.
• Desktop-first: base for large screens; narrow with max-width to override.

Examples
Mobile-first (min-width):

/* base: mobile */
.button { padding: 12px; }
/* tablet+ */
@media (min-width: 768px) { .button { padding: 16px; } }

Desktop-first (max-width):

/* base: desktop */
.sidebar { display: block; }
/* below desktop */
@media (max-width: 1023px) { .sidebar { display: none; } }

Maintenance, cascade, size implications

• Cascade: mobile-first produces fewer overrides because small-screen rules are base; desktop-first often requires many overrides.
• Size: mobile-first typically results in smaller CSS sent to mobile if you use critical CSS and split files; desktop-first can send unnecessary large rules to mobiles unless you split.
• Maintainability: mobile-first scales better for progressive enhancement and component-driven systems (easier to reason about increases in complexity). Desktop-first may be useful when legacy desktop-heavy app exists but grows harder to maintain as breakpoints multiply.

As a full-stack developer I prefer mobile-first for new projects; for legacy desktop-first codebases, refactor incrementally and adopt component-scoped styles or utility classes to limit cascade issues.

Approach (brief)

Use theme variables, a reusable hover-shadow mixin, responsive padding via a function or map, and a single .btn component with modifier classes for variants. This keeps markup simple and CSS output predictable.

// Variables
$space-xs: 6px;
$space-sm: 10px;
$space-md: 14px;
$space-lg: 18px;

$theme-colors: (
  primary: #0d6efd,
  primary-contrast: #fff,
  secondary: #6c757d,
  secondary-contrast: #fff
);

// Mixin: hover shadow
@mixin hover-shadow($color: rgba(0,0,0,0.15), $y: 4px, $blur: 12px) {
  transition: box-shadow 180ms ease, transform 120ms ease;
  &:hover,
  &:focus {
    box-shadow: 0 $y $blur $color;
    transform: translateY(-1px);
  }
}

// Responsive padding helper (based on breakpoints)
$btn-padding: (
  xs: ($space-xs, $space-sm),
  sm: ($space-sm, $space-md),
  md: ($space-md, $space-lg)
);

@function pad($size) {
  @return nth(map-get($btn-padding, $size), 1) nth(map-get($btn-padding, $size), 2);
}

// Button component
.btn {
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  padding: pad(md);
  color: map-get($theme-colors, primary-contrast);
  background-color: map-get($theme-colors, primary);
  @include hover-shadow();

  // Accessibility focus
  &:focus {
    outline: 3px solid rgba(13,110,253,0.16);
    outline-offset: 2px;
  }

  // Variants
  &--secondary {
    background-color: map-get($theme-colors, secondary);
    color: map-get($theme-colors, secondary-contrast);
  }

  // Size responsive overrides
  @media (max-width: 600px) {
    padding: pad(xs);
  }
  @media (min-width: 601px) and (max-width: 1024px) {
    padding: pad(sm);
  }
}

How this keeps CSS maintainable

• Centralized variables and color map let you change theme in one place.
• Mixin encapsulates hover behavior; reuse avoids duplication.
• Single .btn with modifier class (.btn--secondary) follows BEM-like pattern, improving predictability.
• Responsive padding map isolates breakpoint logic and avoids multiple scattered rules.
• Output CSS stays small because mixins are concise and component-focused; consider using a build step with Sass partials and CSS minification for production.

A stacking context is an isolated three-dimensional layer in the rendering order; elements inside it are stacked relative to each other and can’t be layered above elements from other contexts unless that context's z-index is higher. New stacking contexts form from position + z-index, opacity <1, transform, filter, mix-blend-mode, etc. Example bug: a modal backdrop appears, but a child dropdown inside the page renders above the modal because that dropdown belongs to a different stacking context with higher z-index; or the modal has a transform and thus creates a stacking context causing its close button (positioned) to sit beneath other components. Fix by adjusting z-index on the modal’s stacking context or removing unintended transforms.

Clarify goals & constraints

• Support RTL/LTR toggling, responsive breakpoints, and long translated strings without layout breakage; keep performance and accessibility.

Solution overview

• Use CSS logical properties, mirrored assets, and adaptive typography plus a validation pipeline.

Key CSS patterns (example)

/* container adapts flow direction */
.container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  margin-inline: 2rem; /* logical instead of margin-left/right */
}

/* element that needs side-specific offset */
.card {
  padding-inline-start: 1rem; /* respects dir */
  border-start: 1px solid #ddd; /* logical border */
}

/* responsive */
@media (max-width: 768px) {
  .container { flex-direction: column; margin-inline: 1rem; }
  .title { font-size: 1.125rem; word-break: break-word; }
}

Mirroring layouts & icons

• Use dir attribute (<html dir="rtl">) or class (.rtl) on root.
• Prefer CSS logical properties to automatically mirror.
• For decorative icons use CSS transform: [dir="rtl"] .icon { transform: scaleX(-1); } or provide separate RTL SVG sprite when flipping would distort semantics.
• Keep images that contain text separate per locale.

Typography & long strings

• Adjust font-family per script (e.g., system Arabic/Devanagari fonts), set font-feature-settings if needed.
• Use responsive font sizes (clamp) and allow wrapping: word-break: break-word; hyphens: auto;
• Set line-height and max-inline-size (logical max-width) to contain long strings.

Testing workflow

• Automated: visual regression tests (Percy/Chromatic) capturing LTR/RTL across breakpoints; snapshot tests for components with sample long strings.
• Accessibility: test reading order with screen readers, keyboard navigation.
• Localization pipeline: include pseudo-localization (lengthened strings, mirrored punctuation) in CI to catch overflow; include locale-specific font smoke tests.
• Manual: QA checklist — toggle dir, verify mirrored icons, verify no clipped text at all breakpoints, language-specific spellcheck.

Trade-offs & notes

• Browser support for logical properties is good now but include fallbacks for legacy browsers.
• Prefer flip-by-CSS for simple icons; use localized assets for complex art or text-in-image.