Make a plain HTML page look good and readable with zero effort!
Check out the style guide to see what it looks like.
- system fonts: looks native on macOS, iOS, windows, linux, firefox OS, android.
- great for text: designed to be highly readable and easy on the eyes.
- very small API: with zero classes, there's nothing to learn!
- expertly crafted: composed out of a balanced selection of stylistic practices.
- we've got serif: includes a serif variant for that edgy look.
- minimal size: weighs in at a modest
7kb
unminified.
<!-- 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');
<!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.
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:
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;
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.
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.
To get started, clone the repository and install dependencies with npm install
.
- Run
npm start
to start the site. - Edit
scss
source files insrc/
. - Watch the style guide at
localhost:8000/guide.html
for changes.
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 style.css
from style.scss
by running npm run generate
.
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.
style.css
is only possible due to the excellent work of the following collaborators:
nikolaswise | github/nikolaswise |
---|---|
paulcpederson | github/paulcpederson |
ungoldman | github/ungoldman |
The following projects were major influences on style.css
:
- writ by programble
- normalize.css by necolas
- css-system-fonts by mrmrs
Contributions welcome! Please read the contributing guidelines first.
Please see the Change Log for a list of all notable changes between versions.
Shoshinsha image is from emojipedia.