A classless stylesheet for HTML documents and evolution of style.css.
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.
Some differences from style.css:
<!-- 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';
<!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.
npm install mine.css --save-dev
Here are some modules out there for requiring CSS using JavaScript that should also work just fine:
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);
}
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);
}
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 */
}
}
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 */
}
}
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.
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 to body. 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.mine.css stands on the shoulders of giants from the excellent work found in style.css. Thank you!
FAQs
Classless stylesheet for markdown documents evolved from style.css
The npm package mine.css receives a total of 84 weekly downloads. As such, mine.css popularity was classified as not popular.
We found that mine.css demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.