RobotnixAcademy

Unit 05 · lesson

CSS Architecture for a Small Jekyll Site

Jekyll can generate the page structure.

CSS controls presentation in the browser.

Do not mix those layers until you cannot tell which one failed.

Start with a small system

Use a main stylesheet with clear responsibilities:

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --content-width: 70rem;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

main {
  width: min(100% - 2rem, var(--content-width));
  margin-inline: auto;
}

The exact design can change.

The source should remain understandable.

Jekyll and CSS responsibilities

Jekyll may:

  • place a stylesheet link into the layout;
  • process an SCSS entry file;
  • generate asset URLs.

The browser:

  • downloads the generated CSS;
  • matches selectors;
  • computes styles;
  • lays out the page.

Debug the right layer

If the <link> tag is missing from generated HTML, inspect the layout/build.

If the <link> exists but points to 404, inspect asset URL/output.

If CSS loads but a rule loses the cascade, inspect browser CSS behavior.

Three different problems.

Portfolio action

Create or reorganize your main stylesheet around:

  • base document styles;
  • navigation;
  • project cards;
  • content/layout utilities;
  • responsive rules.

Do not build a framework inside a student portfolio.

Checkpoint

Choose one visual bug and state whether its first evidence belongs to Jekyll generation, asset delivery, or CSS rendering.