A drop-in CSS stylesheet that makes pages attractive and readable. Looks good without drawing attention to the design. Works great on both mobile and desktop.
To style your own page with Oatcake just add this link to your HTML file's
<head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]" />That's it! If all you want is a simple page like Oatcake's demo
page just add a little CSS layout of your own
(max-width, margin, padding) and you're done. Here's a complete HTML file
that you can copy-and-paste to get started:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Page title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]" />
</head>
<body style="max-width:40em; margin:0 auto; padding:0 12px;">
<h1>Page Title</h1>
<p>Page content goes here…</p>
</body>
</html>You might want to apply Oatcake to only part of your HTML page. For example
maybe you're using <aside> for a site-wide sidebar and <footer> for a
site-wide footer and don't want Oatcake's <aside> and <footer> styles to
affect those, but you do want to apply Oatcake to the page's main content.
You can apply Oatcake to only part of a page by loading it in a Shadow DOM. Here's an example:
<div>
<template shadowrootmode="open">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]" />
<p>
Oatcake's styles will be applied to everything within the "template"
element.
</p>
</template>
</div>Any other CSS or JavaScript that you want to work within the <template>
element will need to be loaded within it as well: the content inside the
<template> is isolated from any JavaScript or CSS running in the outer page.
Releases are published to GitHub and npm. Subscribe to GitHub's Atom feed for new releases to get notified so you can update your version number.
For full documentation see: https://www.seanh.cc/oatcake/