Ecosyste.ms: Awesome

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

https://github.com/micah5/psone.css

🎮 PS1 style CSS Framework, inspired by NES.css
https://github.com/micah5/psone.css

css css-framework psone

Last synced: 6 days ago
JSON representation

🎮 PS1 style CSS Framework, inspired by NES.css

# PSone.css
![description](https://i.imgur.com/IctX9D2.png "description")

Please feel free to submit a pull request, no matter how small. I love getting them.

At the moment there's just a CSS file that you can link to:
```html

```
I hope to add some JS eventually to help with progressbars etc.

## Reference
### Container
From FF7
```html

Default

Kick! Punch! It's all in the mind.

dark

You see, the island is the site of a secret nuclear
weapons disposal facility.

light

Crash, Crash? Are you there Crash? ... Are you there Crash?

```

### Button
From Tekken 3
```html
Normal
Primary
Success
Warning
Error
```

### Progress bar
From MGS1
```html

Default

primary

success

warning

error

indeterminate

```

### Radio Button
From the PS1 memory card screen
```html

Yes

```

### Input
From FF7
```html

Default

With placeholder

```

## Development

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/micah5/PSone.css/issues)

Fork the project and enter this commands in your terminal

```sh
git clone https://github.com/YOUR_GITHUB_USERNAME/PSone.css.git
cd PSone.css
npm install
```

### Storybook
For visual testing, this project contains storybook which you can run by doing the next command
```sh
$ npm run storybook
```

### Demo
The demo page is located in `index.html`. If you want to change something there, you can use the next command
```sh
$ npm run dev
```