jefftml's </> code

jefftml's HTML & CSS Boilerplate HTML, CSS

Download ZIP

Build your hand-written HTML and CSS around this starting point and you'll be in great shape with very little code.

📄 README.md

jefftml's HTML & CSS Boilerplate

A modern, minimal 2026 starting point for webpages.

This boilerplate is deliberately tiny. It isn't a framework or a reset; it's a sensible, opinionated foundation that gives you comfortable typography, native dark mode, and a readable layout before you write a single line of your own CSS. Everything here is standards-based and ships in every current browser (with one tiny exception).

Table of Contents

Why this exists

Most "boilerplates" are either bloated (a whole CSS reset plus a grid system you didn't ask for) or too bare (a blank <html> with nothing to make text readable). This one aims for the middle: a handful of well-chosen modern CSS features that make a page look intentional and read comfortably on any device, with nothing to install and nothing to tear out later.

It also leans on newer platform features, logical properties, clamp(), color-scheme, text-wrap, hanging-punctuation, so the defaults are future-friendly and internationalization-ready out of the box.

Features at a glance

FeatureWhat it doesWhy it helps
Single file, zero dependenciesAll CSS lives in an inline <style> blockNothing to download, no build tooling, instant first paint
Native light & dark modecolor-scheme: light darkRespects the user's OS preference automatically; form controls and scrollbars adapt too
Fluid typographyclamp()-based font sizeText scales smoothly between mobile and desktop with no media queries
Optimal reading measuremin(68ch, 100%) content widthCaps line length at a comfortable ~68 characters for readability
Logical propertiesinline-size, margin-inline, padding-blockWorks correctly in right-to-left and vertical writing modes
Comfortable line spacingline-height: 1.7Easier, less cramped reading of long-form text
Smarter body line breakstext-wrap: prettyAvoids orphaned single words at the end of paragraphs
Balanced headingstext-wrap: balance on h1–h6Multi-line headings wrap into even, tidy blocks instead of a long line plus a stray word
Hanging punctuationhanging-punctuation: first lastCleaner typographic alignment where supported
iOS zoom fix-webkit-text-size-adjust: 100%Stops mobile Safari from inflating text on rotation
System font stackfont-family: sans-serifNo web-font request, so text renders instantly with no layout shift
Semantic, accessible baselang, <main>, proper meta tagsBetter SEO and screen-reader behavior from the start

Getting started

  1. Copy the boilerplate into a new index.html.
  2. Replace the <h1> and <p> placeholders with your content.
  3. Open it in a browser. That's it, there's no step 4.

When your styles outgrow the inline block, uncomment the stylesheet link in the <head> and move your CSS into a style.css file:

<link rel="stylesheet" href="style.css">

Anatomy

The <head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jefftml&rsquo;s HTML & CSS Boilerplate</title>
<meta name="description" content="A 2026 starting point for webpages.">
  • lang="en" on the <html> element tells browsers and assistive technology which language the page is in, improving screen-reader pronunciation and search indexing.
  • charset="UTF-8" declares Unicode encoding so every character, including emoji and non-Latin scripts, renders correctly. It's placed first so the browser knows the encoding before parsing anything else.
  • viewport makes the page responsive by mapping the layout to the device's actual width instead of a zoomed-out desktop view.
  • meta description provides the summary search engines and social previews can use.
  • &rsquo; in the title uses a proper typographic curly apostrophe (’) rather than a straight quote, a small detail that signals the same typographic care found throughout the CSS.

The CSS

:root {
    color-scheme: light dark;
}

Declares that the page supports both light and dark color schemes. The browser then renders its default UI (text color, backgrounds, form controls, scrollbars) to match the visitor's system preference, giving you automatic dark mode with a single line and no JavaScript.

html {
    font-family: sans-serif;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    text-wrap: pretty;
    hanging-punctuation: first last;
}
  • font-family: sans-serif uses the reader's default sans-serif face. There's no web font to download, so text appears immediately with zero layout shift and no privacy or performance cost.
  • font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) is fluid typography. The size never drops below 1rem (16px) or rises above 1.125rem (18px), and in between it grows gently with the viewport (0.95rem + 0.25vw). You get responsive text without writing breakpoints.
  • line-height: 1.7 is a generous, unitless line height that keeps paragraphs airy and comfortable for extended reading. Being unitless, it scales correctly with any font size.
  • -webkit-text-size-adjust: 100% prevents mobile WebKit browsers from auto-enlarging text when the device rotates, so your intended sizes are respected.
  • text-wrap: pretty asks the browser to spend a little extra effort on line breaking in body text. Its headline benefit is eliminating orphans, a final line left with one lonely word, by pulling a word down from the line above; it also reduces long runs of consecutive hyphenated lines. Set on html so it inherits to every paragraph on the page.
  • hanging-punctuation: first last lets opening quotes and similar marks hang slightly into the margin, keeping the left edge of text optically aligned. It degrades gracefully, browsers that don't support it simply ignore it.
main {
    inline-size: min(68ch, 100%);
    margin-inline: auto;
    padding-block: 2rem;
}
  • inline-size: min(68ch, 100%) sets the content width to whichever is smaller: 68 characters or the full available space. The ch unit ties the measure to the font itself, capping line length around the ~45–75 character sweet spot that's easiest to read, while 100% ensures it never overflows on narrow screens.
  • margin-inline: auto centers the content horizontally using a logical property, so it behaves correctly regardless of text direction.
  • padding-block: 2rem adds breathing room above and below the content, again via a logical property, so "block" means the flow direction rather than a hard-coded top/bottom.

Note on logical properties: inline-size, margin-inline, and padding-block are direction-aware equivalents of width, horizontal margin, and vertical padding. They automatically adapt to right-to-left languages (like Arabic or Hebrew) and vertical writing modes, making the layout internationalization-ready with no extra work.

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
  • text-wrap: balance evens out the line lengths of a heading that wraps to more than one line, so it forms a tidy block rather than a full-width first line with a single stranded word beneath it. It's the sibling of pretty above, where pretty optimizes how a passage ends, balance distributes text across all of its lines, and this rule overrides the inherited pretty for headings only.
  • It's scoped to h1–h6 deliberately: browsers cap balance at a small number of lines (commonly ~4–6) to keep it cheap, and the payoff is most visible on short, large, high-contrast text. Applying it to long paragraphs would mostly do nothing.

Note on text-wrap: both values are purely cosmetic. Browsers that don't support them fall back to ordinary line breaking, nothing shifts, overflows, or breaks.

Customizing

  • Swap the font: replace sans-serif with your own stack, e.g. font-family: "Inter", system-ui, sans-serif;
  • Adjust the measure: change 68ch to taste, lower for narrower columns, higher for wider ones.
  • Tune the fluid range: edit the three values in clamp() to set your own minimum, growth rate, and maximum text size.
  • Force a single theme: change color-scheme to just light or dark if you don't want it to follow the OS.
  • Balance more than headings: add other short, display-sized text, blockquotes, figure captions, card titles, to the text-wrap: balance selector list.
  • Opt out of pretty wrapping: set text-wrap: wrap on any element where you'd rather have plain, maximally fast line breaking.
  • Go external: uncomment the <link rel="stylesheet"> and move the styles into style.css once the project grows.

Browser support

Every feature here works in current versions of Chrome, Edge, Firefox, and Safari, and the whole file is built so that anything unsupported fails silently rather than breaking the layout.

The progressive enhancements, hanging-punctuation, color-scheme, and the two text-wrap values, simply do nothing in browsers that lack them: readers get standard punctuation, the default light rendering, and ordinary line breaks. text-wrap: balance and text-wrap: pretty in particular have landed on different timelines across engines, so treat them as a bonus for readers on newer browsers rather than something to rely on. Everything else (clamp(), logical properties, min(), ch units) is broadly supported across modern browsers.

License

Use it, change it, ship it. No attribution required.