nostalgic-css/NES.css

Development documents with another CSS Framework

BcRikko opened this issue · 2 comments

Is your feature request related to a problem? Please describe.

NES.css doesn't contain layout styles. This puts a burden on developers.
So I think it will be easier to use NES.css with another CSS framework. (e.g. Tailwind CSS, Bulma, Bootstrap, ...)

Describe the solution you'd like

Add development documents using another CSS framework

Example

<section class="flex justify-center items-center p-2">
  <div class="nes-container is-dark is-rounded w-full mb-3">
    <p>NES.css with Tailwind css</p>
  </div>
  <button type="submit" class="nes-btn is-primary">Submit</button>
</section>

@BcRikko I'll try to document the integration of the bootstrap grid system with NES.css. Please tell me if something more is needed? And any specific guidelines I need to follow for documentation?

@thisisabhinay Thanks 😆
I want a small and simple sample. For example, the following cards and forms:

with Bootstrap

Card

https://getbootstrap.com/docs/4.3/components/card/

<div class="card nes-container is-rounded" style="width: 35rem;">
  <img class="card-img-top" src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png">
  <div class="card-body">
    <h5 class="card-title">NES.css</h5>
    <p class="card-text">NES.css is a NES-style (8bit-like) CSS Framework. NES.css only requires CSS and doesn't depend on any JavaScript.</p>
    <a href="#" class="nes-btn is-primary">Go somewhere</a>
  </div>
</div>

スクリーンショット 2019-10-16 14 30 50

Form

https://getbootstrap.com/docs/4.3/components/forms/

<form class="nes-container">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control nes-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control nes-input" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <label>
    <input type="checkbox" class="form-check-input nes-checkbox">
      <span>Check me out</span>
    </label>
  </div>
  <button type="submit" class="nes-btn is-primary">Submit</button>
</form>

スクリーンショット 2019-10-16 14 34 45


Could you add example to Demo page? 🤔
https://github.com/nostalgic-css/NES.css/blob/develop/docs/script.js#L524