Styling and Responsive Design

CSS controls the website's appearance and layout.

Work with the existing design

Choose the right file

• Put general, navigation, component, page, and responsive styles in assets/css/style.css.
• Put styles used only by news articles in assets/css/news.css.
• Reuse or extend components in _includes/ when the same design appears in several places.

Ask a maintainer before adding another stylesheet. Most changes belong in one of the two existing CSS files.

Keep the existing design consistent

Before creating a new class, look for a similar component already used by the site. Reusing its spacing, colors, buttons, headings, and cards helps the website feel consistent.

Keep CSS selectors straightforward and use features supported by common browsers.

Responsive and motion behavior

Test several widths

Resize the browser or use its device preview. Check:

• a very narrow phone;
• 375px wide;
• 768px wide;
• a desktop window.

At each width, confirm that:

• the page does not scroll sideways;
• text and buttons wrap without being cut off;
• focus outlines remain visible;
• images stay inside their sections;
• footer columns stack correctly at 540px and below.

Fix the item that is too wide instead of hiding it with overflow-x: hidden. A flex or grid child containing long text may need min-width: 0.

Animation and motion

Some people ask their device to reduce animation. New animation must respect the existing prefers-reduced-motion rules. The page should remain understandable when motion is reduced or removed.

Verify the design

Before submitting

• Compare the result with nearby existing components.
• Test every relevant browser width.
• Check keyboard focus and reduced motion.
• Follow Accessible Interactions if behavior also changed.
• Run Running Checks.

Return to Styling and Interactions.