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>
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>
Could you add example to Demo page? 🤔
https://github.com/nostalgic-css/NES.css/blob/develop/docs/script.js#L524