Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ungoldman/style.css

:beginner: Classless stylesheet for HTML documents.
https://github.com/ungoldman/style.css

Last synced: about 2 months ago
JSON representation

:beginner: Classless stylesheet for HTML documents.

Host: GitHub
URL: https://github.com/ungoldman/style.css
Owner: ungoldman
License: isc
Created: 2014-12-26T19:32:32.000Z (over 9 years ago)
Default Branch: main
Last Pushed: 2023-12-08T22:33:46.000Z (7 months ago)
Last Synced: 2024-04-14T14:20:35.912Z (2 months ago)
Language: SCSS
Homepage: https://ungoldman.github.io/style.css
Size: 363 KB
Stars: 77
Watchers: 6
Forks: 6
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Lists

Awesome-CSS-Resources - style.css:
awesome-stars - style.css - :beginner: Classless stylesheet for markdown documents. (CSS)
awesome-stars - ungoldman/style.css - :beginner: Classless stylesheet for HTML documents. (SCSS)

README

        




# style.css

A classless stylesheet for HTML documents.

[![npm][npm-image]][npm-url]

[![build][build-image]][build-url]

[![downloads][downloads-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/style.css.svg

[npm-url]: https://www.npmjs.com/package/style.css

[build-image]: https://github.com/ungoldman/style.css/actions/workflows/tests.yml/badge.svg

[build-url]: https://github.com/ungoldman/style.css/actions/workflows/tests.yml

[downloads-image]: https://img.shields.io/npm/dm/style.css.svg



## About

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

Check out the [style guide](https://ungoldman.github.io/style.css/guide.html) 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 `7kb` unminified.

## Install

[![download style.css][dl-sans-img]][dl-sans-url] [![download serif.css][dl-serif-img]][dl-serif-url]

[dl-sans-img]: https://img.shields.io/badge/download-style.css-6495ED.svg?style=flat-square

[dl-sans-url]: https://unpkg.com/style.css

[dl-serif-img]: https://img.shields.io/badge/download-serif.css-6495ED.svg?style=flat-square

[dl-serif-url]: https://unpkg.com/style.css/serif.css

```html

```

```html

```

```sh

# npm package

$ npm install style.css

```

```css

/* CSS file */

@import url('https://unpkg.com/style.css/style.css');

```

## Usage

```html

  

    

    

    Hello World

    

  

  

    
Hooray!

  

```

The best way to get familiar with the look and feel of `style.css` is to visit the [style guide](https://ungoldman.github.io/style.css/guide.html). 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](https://github.com/stackcss/sheetify#use-npm-packages) to require `style.css` like a node module.

```js

const sf = require('sheetify')

sf('style.css')

```

Note that any external CSS files imported with sheetify must be compiled using [browserify](https://github.com/substack/node-browserify) or [sheetify-postcss](https://github.com/stackcss/sheetify-postcss).

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

- [browserify-css](https://www.npmjs.com/package/browserify-css)

- [css-modules](https://github.com/css-modules/css-modules)

- [parcelify](https://www.npmjs.com/package/parcelify)

- [rework-npm](https://www.npmjs.com/package/rework-npm)

### Sass

You can also use `style.css` with [Sass](http://sass-lang.com/).

```scss

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

```

Same goes for the serif variant.

```scss

@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`:

```scss

$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:

```scss

$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:

```scss

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

$font-body: $system-serif;

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

```

The above snippet is how [`serif.css`](serif.css) is generated.

## 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](https://github.com/stylelint/stylelint) with a slightly modified version of [stylelint-config-standard](https://github.com/stylelint/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`:

- **[writ](https://writ.cmcenroe.me)** by [programble](https://github.com/programble)

- **[normalize.css](https://github.com/necolas/normalize.css)** by [necolas](https://github.com/necolas)

- **[css-system-fonts](https://github.com/mrmrs/css-system-fonts/)** by [mrmrs](https://github.com/mrmrs)

## Contributing

Contributions welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.

## Version History

Please see the [Change Log](CHANGELOG.md) for a list of all notable changes between versions.

## License

[ISC](LICENSE.md)

Shoshinsha image is from [emojipedia](https://emojipedia.org/japanese-symbol-for-beginner/).