style.css

A classless stylesheet for HTML documents.

latest version build status stability downloads

About

Make a plain HTML page look good and readable with zero effort!

Check out the style guide to see what it looks like.

Features

Install

download style.css download serif.css

<!-- CDN Development (always latest) -->
<link rel="stylesheet" href="https://unpkg.com/style.css">
<!-- CDN Production (specific release) -->
<link rel="stylesheet" href="https://unpkg.com/style.css@1.0.0">
# npm package
$ npm install style.css
/* CSS file */
@import url('https://unpkg.com/style.css/style.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/style.css@latest/style.css">
  </head>
  <body>
    <h1>Hooray!</h1>
  </body>
</html>

The best way to get familiar with the look and feel of style.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 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';

Same goes for the serif variant.

@import 'path/to/node_modules/style.css/serif.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';

The above snippet is how serif.css is generated.

Development

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

Tinker

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.

Thanks

style.css is only possible due to the excellent work of the following collaborators:

nikolaswisegithub/nikolaswise
paulcpedersongithub/paulcpederson
ungoldmangithub/ungoldman

The following projects were major influences on style.css:

Contributing

Contributions welcome! Please read the contributing guidelines first.

Sites Using style.css

Note

This module was rewritten after v0.1.16 to serve a slightly different purpose. All of the old releases along with their readme files are still available on the releases page.

License

ISC