mine.css
v10.0.0
Published
Classless stylesheet for markdown documents evolved from style.css
Downloads
475
Readme
mine.css
A classless stylesheet for HTML documents and evolution of style.css.
About
Make a plain HTML page look good and readable with zero effort! Serves as a nice base layer default.
Check out the style guide to see what it looks like.
Differences
Some differences from style.css:
- CSS Variables
- Dark Mode
- Remove some old browser support
- Use post-css build pipeline
- Minor stylistic differences
- CHANGELOG.md
Install
<!-- CDN Development (always latest) -->
<link rel="stylesheet" href="https://unpkg.com/mine.css">
<!-- CDN Production (specific release) -->
<link rel="stylesheet" href="https://unpkg.com/mine.css@^4.0.0">
# npm package
$ npm install mine.css
/* CSS file */
@import url('https://unpkg.com/mine.css');
If your bundler implements package.json exports
resolution, you can explicitly reference the js or css exports from mine.css doing the following:
/* esbuild css */
@import 'mine.css/dist/mine.css';
/* esbuild js */
import { toggleTheme } from 'mine.css/dist/theme-switcher.js';
/* or */
import { toggleTheme } from 'mine.css';
Usage
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" href="https://unpkg.com/mine.css@^4.0.0">
</head>
<body>
<h1>Hooray!</h1>
</body>
</html>
The best way to get familiar with the look and feel of mine.css
is to visit the style guide. Detailed examples of every HTML element (and how to write them in markdown) are available there.
Node
npm install mine.css --save-dev
Here are some modules out there for requiring CSS using JavaScript that should also work just fine:
CSS Variables
You can override defaults directly with CSS variables. Here are the default variable settings for mine.css
:
:root {
/* font family */
--font-body: var(--system-sans);
--font-code: var(--system-mono);
/* font size and spacing */
--font-size-body: 14px;
--font-size-scale: 0.25vw;
/* note: use unitless line heights
https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0 */
--line-height-body: 1.75;
--line-height-pre: 1.45;
/* light colors */
--light-text: hsla(0, 0%, 7%, 1); /* #111 */
--light-background: white;
--light-layer-background: hsla(0, 0%, 100%, 0); /* #fff */
--light-accent-background: hsla(0, 0%, 95%, 1); /* #f2f2f2 */
--light-accent-midground: hsla(0, 0%, 84%, 1); /* #d6d6d6 */
--light-accent-foreground: hsla(0, 0%, 49%, 1); /* #7d7d7d */
--light-link-text: hsla(208, 100%, 50%, 1); /* #08f */
--light-mark-background: hsla(60, 100%, 50%, 1); /* #ff0 */
--light-code-text: var(--light-text);
--light-code-background: var(--light-accent-background);
--light-code-border: var(--light-accent-midground);
/* dark colors */
--dark-text: white;
--dark-background: hsla(0, 0%, 12%, 1); /* #1f1f1f from safari */
--dark-layer-background: var(--transparent);
--dark-accent-background: hsla(0, 0%, 20%, 1); /* #333 */
--dark-accent-midground: hsla(0, 0%, 30%, 1); /* #4d4d4d */
--dark-accent-foreground: hsla(0, 0%, 60%, 1); /* #999 */
--dark-link-text: hsl(206, 100%, 70%); /* #66bdff */
--dark-mark-background: hsla(58, 66%, 30%, 1); /* #7f7c1a */
--dark-code-text: var(--dark-text);
--dark-code-background: var(--dark-accent-background);
--dark-code-border: var(--dark-accent-midground);
}
Overriding settings
You can override settings like so:
@import 'mine.css';
:root {
--font-size-body: 14px;
}
If you want to use the font stacks to override global font settings, you can do so like this:
@import 'mine.css';
:root {
--font-body: var(--system-serif);
}
Customizing colors
To customize colors, override the color variable for dark and light mode:
:root{
--light-text: red
--light-background: blue;
--dark-text: blue;
--dark-background: red;
}
If you want to implement other styles that follow the light/dark mode pattern in mine.css, use the theme agnostic color var:
.some-class {
color: var(--accent-foreground)
}
The theme agnostic variables are as follows:
:root,
.light-mode {
/* main colors */
--text: var(--light-text);
--background: var(--light-background);
--layer-background: var(--light-layer-background);
--accent-background: var(--light-accent-background);
--accent-midground: var(--light-accent-midground);
--accent-foreground: var(--light-accent-foreground);
/* misc colors */
--link-text: var(--light-link-text);
--mark-background: var(--light-mark-background);
--code-text: var(--light-code-text);
--code-background: var(--light-code-background);
--code-border: var(--light-code-border);
}
.dark-mode {
/* main colors */
--text: var(--dark-text);
--background: var(--dark-background);
--layer-background: var(--dark-layer-background);
--accent-background: var(--dark-accent-background);
--accent-midground: var(--dark-accent-midground);
--accent-foreground: var(--dark-accent-foreground);
/* misc colors */
--link-text: var(--dark-link-text);
--mark-background: var(--dark-mark-background);
--code-text: var(--dark-code-text);
--code-background: var(--dark-code-background);
--code-border: var(--dark-code-border);
}
@media (prefers-color-scheme: dark) {
:root {
@extend .dark-mode; /* stylelint-disable-line at-rule-no-unknown */
}
}
Overriding the system theme
If you want to allow users to switch between light and dark, indipendent of the system theme, you can apply the .light-mode
or .dark-mode
class the the document body.
Thought there is a subtle relationship between the class and the system preference, so it is better to use the theme switcher script (./src/theme-switcher.js) which handles user preference while still following the system preference.
Usage:
<script type="module">
import { toggleTheme } from 'https://unpkg.com/bcomnes/mine.css@^4.0.0?module';
window.toggleTheme = toggleTheme
</script>
The toggleTheme
export is exclusively offered as an ESM module. If you need CJS, just vendor it.
See ./site/ for examples of this in action.
Additionally, when using theme-switcher.js
, you can easily target dark mode using the following selector:
.dark-mode:not(.light-mode) {
/* additional dark mode styles go here */
}
and the body tag will stay in sync with the system preferenc or user override. Otherwise you need to define duplicate css rules in the dark mode media query:
@media (prefers-color-scheme: dark) {
:root {
/* duplicate your dark mode styles here if not using theme-switcher.js */
}
}
Dark mode images
Images can be swapped out using the <picture>
tag.
<picture>
<source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
<img src="mojave-day.jpg">
</picture>
See this webkit blogpost for more info on dark mode.
Layout
mine.css
doesn't include any layout css, thought it does ship a simple layout css file that provides basic layout for a page and supports safe-area
that accommodates cell phone notches and whatnot.
<!-- CDN Production (specific release) -->
<link rel="stylesheet" href="https://unpkg.com/mine.css@^4.0.0/dist/layout.css">
You can see this layout style in action on the mine.css
website.
The two classes are:
safe-area-inset
: This should typically be applied tobody
. This enables mobile notch padding when nessisary.mine-layout
: Simple, responsive margins for a document. Apply to the content body or whereever else you want a nice default margin.
Thanks
mine.css
stands on the shoulders of giants from the excellent work found in style.css. Thank you!