Style.css NPM | npm.io

style.css

A classless stylesheet for HTML documents.

About

style.css is a lightweight stylesheet designed to make plain semantic HTML elegant and readable with as little effort as possible. It has no CSS classes and only adds style rules for basic HTML elements used in written content. It's great for articles, wikis, documentation, and any markdown-based content.

Features

system fonts: looks native on macOS, iOS, windows, linux, firefox OS, android.
light & dark mode: uses light or dark theme based on user's system setting.
great for text: designed to be highly readable and easy on the eyes.
zero config: with zero classes, there's nothing to learn!
expertly crafted: composed out of a balanced selection of stylistic practices.
markdown friendly: designed from the ground up for markdown content.
minimal size: weighs in at a modest 2kb minified & gzipped.

Examples

Check out the Style Guide to see what it looks like.

The website for style.css is built with style.css.

Usage

HTML

<!-- latest -->
<link rel="stylesheet" href="https://unpkg.com/style.css">
<!-- specific version -->
<link rel="stylesheet" href="https://unpkg.com/style.css@1.0.0">

<!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/style.css@latest/style.css">
  </head>
  <body>
    <main>
      <h1>Hooray!</h1>
    </main>
  </body>
</html>

Detailed examples of each styled HTML element are available on the Style Guide page.

CSS

/* latest */
@import url('https://unpkg.com/style.css/style.css');
/* specific version */
@import url('https://unpkg.com/style.css/style.css@1.0.0');

Node

npm install style.css --save-dev

You can use a CSS bundler like sheetify to require style.css like a node module.

const sf = require('sheetify')

sf('style.css')

Note that any external CSS files imported with sheetify must be compiled using browserify or sheetify-postcss.

Here are some other modules out there for requiring CSS using JavaScript that should also work just fine:

Sass

You can also use style.css with Sass.

@import 'path/to/node_modules/style.css/style.scss';

Sass allows you to override defaults more directly. Here are the default settings for style.css:

$font-body:         $system-sans !default;
$font-code:         $system-mono !default;
$font-size-body:    14px !default;
$font-size-scale:   0.25vw !default;
$line-height-body:  1.55 !default;
$line-height-pre:   1.45 !default;
$link-color:        #0074d9 !default;

Using Sass with `node_modules`

Protip: Sass is easier to use with node_modules when you use the include-path option. Here's an example of how to use it with node-sass on the command line.

node-sass style.scss -o style.css --include-path node_modules/

This way you can exclude the node_modules/ path prefix in your Sass source code.

Overriding settings

You can override settings like so:

$font-size-body: 14px;

@import 'style.css/style.scss';

If you want to use the font stacks to override global font settings, you can do so like this:

@import 'style.css/src/scss/fonts.scss';

$font-body: $system-serif;

@import 'style.css/style.scss';

Development

To get started, clone the repository and install dependencies with npm install.

Tinker

Run npm start to start the site.
Edit scss source files in src/.
Watch the style guide at localhost:8000/guide.html for changes.

Test

Run npm test to check the generated CSS for errors and issues not caught by the Sass compiler.

We're using stylelint with a slightly modified version of stylelint-config-standard for now.

Generate

Generate style.css from style.scss by running npm run generate.

Release

Publish a new release with npm run release.

The prerelease task will generate CSS, run tests, check if the git index is dirty, and exit if there are any problems. If all goes well, gh-release and npm publish will be run sequentially.