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@1.0.0">
# npm package
$ npm install mine.css
/* CSS file */
@import url('https://unpkg.com/style.css/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@^1.0.0/style.css">
</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-body: var(--system-sans);
--font-code: var(--system-mono);
--font-size-body: 14px;
--font-size-scale: 0.25vw;
--line-height-body: 1.75;
--line-height-pre: 1.45;
/* light colors */
--light-background: white;
--light-layer-background: var(--transparent);
--light-link-blue: hsla(208, 100%, 50%, 1); /* #08f */
--light-mark-yellow: hsla(60, 100%, 50%, 1); /* #ff0 */
--light-black: hsla(0, 0%, 7%, 1); /* #111 */
--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 */
/* dark colors */
--dark-background: hsla(0, 0%, 12%, 1); /* #1f1f1f from safari */
--dark-layer-background: var(--transparent);
--dark-link-blue: hsl(206, 100%, 70%); /* #66bdff */
--dark-mark-yellow: hsla(58, 66%, 30%, 1); /* #7f7c1a */
--dark-white: white;
--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 */
}
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);
}
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.