Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
By Sarah Gooding - Feb 12, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
style.css
A classless stylesheet for HTML documents.
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
- 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
7kbunminified. - very stylish: indeed.
Install
<!-- 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
- Run
npm startto start the site. - Edit
scsssource files insrc/. - Watch the style guide at
localhost:8000/guide.htmlfor 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.
Thanks
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:
Contributing
Contributions welcome! Please read the contributing guidelines first.
Version History
Please see the Change Log for a list of all notable changes between versions.
License
1.0.3 - 2022-03-16
Fixes
- fix: add autoprefixing to serif.css (#51)
Misc
- lots of dev dependency updates to resolve security warnings
FAQs
Classless stylesheet for markdown documents.
The npm package style.css receives a total of 0 weekly downloads. As such, style.css popularity was classified as not popular.
We found that style.css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Package last updated on 16 Mar 2022
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.
Related posts
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
By Sarah Gooding - Feb 11, 2025
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025