https://github.com/loreanvictor/nokss

A drop-in stylesheet enough for getting started
https://github.com/loreanvictor/nokss

css design-system web

Last synced: 24 days ago
JSON representation

A drop-in stylesheet enough for getting started

• Host: GitHub
• URL: https://github.com/loreanvictor/nokss
• Owner: loreanvictor
• License: mit
• Created: 2022-12-27T12:20:58.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-07T18:50:37.000Z (over 1 year ago)
• Last Synced: 2024-10-07T21:51:17.525Z (29 days ago)
• Topics: css, design-system, web
• Language: CSS
• Homepage: https://loreanvictor.github.io/nokss/
• Size: 1.7 MB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        










Enough CSS to get started








![brotli size](https://badgen.net/badgesize/brotli/loreanvictor/nokss/gh-pages/nokss.css?color=black&label=)

![npm](https://img.shields.io/npm/v/nokss?label=%20&style=flat-square)



**nokss** is a drop-in stylesheet that works out of the box. No need to use CSS classes: just write plain, semantic HTML, and nokss will style it for you (as much as it can). **nokss** is designed for prototyping, blogs, articles, small projects, and as a starting point for more invloved applications.

To use **nokss**, simply include this line in your CSS:

```css

@import 'https://unpkg.com/nokss';

```




---

> 👉 [Read the docs](https://loreanvictor.github.io/nokss/) for more installation options and usage info.

---




# Contribution

You need [node](https://nodejs.org/en/), [NPM](https://www.npmjs.com) to start and [git](https://git-scm.com) to start.

```bash

# clone the code

git clone [email protected]:loreanvictor/nokss.git

```

```bash

# install stuff

npm i

```

Make sure all checks are successful on your PRs. This includes all successful builds, and abiding all [the linting rules](https://github.com/loreanvictor/nokss/blob/main/.stylelintrc.json). The code is written in CSS, using [PostCSS](https://postcss.org) for bundling, vendor prefixing, minification, etc (see [this](https://github.com/loreanvictor/nokss/blob/main/postcss.config.js) for a comprehensive list of plugins), and [Stylelint](https://stylelint.io) for linting. Subsequently, an IDE integration for Stylelint would make your life much easier (for example, [VSCode](https://code.visualstudio.com) has [this nice Stylelint plugin](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)), but you could also use the following commands:

```bash

# run the linter

npm run lint

```

```bash

# build the CSS package

npm run build:package

```

```bash

# build the docs

npm run build:docs

```

```bash

# run linter and build everything

npm test

```

You can preview the effects of your modifications either in the docs, or in the sample playground located in `/sample` folder. You can run these via the following commands:

```bash

# preview the docs

npm run docs

```

```bash

# preview the playground

npm run sample

```