DOCSEARCHbyAlgolia
Submit Docs

psone.css

repository·master·Indexed 20 days ago

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

A CSS framework version 1.0.0 designed to replicate PlayStation 1 era user interfaces. It provides components for containers, buttons, progress bars, radio buttons, and inputs, inspired by games such as FF7, Tekken 3, and MGS1.

Tokens
1.3K
Snippets
9
Records
9
Agent score
23%

What's inside psone.css

  1. Install PSone.css via CDN

    master

    You can use PSone.css by linking directly to the minified CSS file hosted on jsDelivr. Add the following <link> tag to the <head> of your HTML document:

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/PSone.min.css">

  2. Set up a local development environment

    master

    To contribute or run the project locally, clone the repository and install dependencies using npm.

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

  3. Use Input components

    master

    Inputs are wrapped in a .field container. Use the .input class on the <input> element itself. You can use the .is-inline modifier on the .field container for inline layouts.

    <div class="field">
  <label>Default</label>
  <input type="text" class="input">
</div>

<div class="field is-inline">
  <label>With placeholder</label>
  <input type="text" class="input" placeholder="Jill Valentine">
</div>

  4. Use Button components

    master

    Buttons use the .btn class. You can apply semantic modifiers to change the button's color/intent: primary, success, warning, or error.

    <button type="button" class="btn">Normal</button>
<button type="button" class="btn primary">Primary</button>
<button type="button" class="btn success">Success</button>
<button type="button" class="btn warning">Warning</button>
<button type="button" class="btn error">Error</button>

  5. Use Container components

    master

    Containers are used to wrap content. You can apply theme modifiers like dark or light to the base .container class. Use .title for labels within the container.

    <div class="container">
  <label class="title">Default</label>
  <p>Content here.</p>
</div>

<div class="container dark">
  <label class="title">dark</label>
  <p>Dark themed content.</p>
</div>

<div class="container light">
  <label class="title">light</label>
  <p>Light themed content.</p>
</div>

  6. Use Radio Button components

    master

    To style radio buttons, wrap an <input type="radio"> inside a <label>. The visual representation is provided by a <span> with the class option and a nested <span> with the class click.

    <label>
  <input type="radio" name="test" value="small" checked>
  <span class="option">Yes
    <span class="click"></span>
  </span>
</label>

  7. Use Progress bar components

    master

    Progress bars are constructed using a .progress wrapper containing a .bar div and a .subtitle div. The width of the progress is controlled via inline styles on the .bar element.

    Modifiers for the .progress container include: primary, success, warning, error, and indeterminate (for an infinite loading state).

    <!-- Standard progress bar -->
<div class="progress">
  <div class="bar" style="width: 80%"></div>
  <div class="subtitle">Default</div>
</div>

<!-- Success progress bar -->
<div class="progress success">
  <div class="bar" style="width: 40%"></div>
  <div class="subtitle">success</div>
</div>

<!-- Indeterminate progress bar -->
<div class="progress indeterminate">
  <div class="bar"></div>
  <div class="subtitle">indeterminate</div>
</div>