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');
<!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 */
/* 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 */
}
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:
.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-text);
--code-background: var(--light-accent-background);
--code-border: var(--light-accent-midground);
}
.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-text);
--code-background: var(--dark-accent-background);
--code-border: var(--dark-accent-midground);
}
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.
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.
mine.css stands on the shoulders of giants from the excellent work found in style.css. Thank you!
Contributions welcome! Please read the contributing guidelines first.
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.