JR Tools UI

Catálogo de componentes reutilizables para las utilidades de JorgeRosa.dev.

Botones

HTML
<button class="jr-btn">
    Botón principal
</button>
HTML
<button class="jr-btn jr-btn-secondary">
        Botón secundario
    </button>
HTML
<div class="jr-buttons">

    <button class="jr-btn">
        Botón principal
    </button>

    <button class="jr-btn jr-btn-secondary">
        Botón secundario
    </button>

</div>

Input

<label class="jr-label">

Texto

<input
class="jr-input"
placeholder="Introduce un texto">

</label>

Select

<label class="jr-label">

Opciones

<select class="jr-select">

    <option>Opción 1</option>
    <option>Opción 2</option>
    <option>Opción 3</option>

</select>

</label>

Textarea

<label class="jr-label">

Mensaje

<textarea
class="jr-textarea"
placeholder="Escribe aquí..."></textarea>

</label>

Badges

✔ Correcto


⚠ Advertencia


✖ Error 

<span class="jr-badge jr-badge-success">

✔ Correcto

</span>

<span class="jr-badge jr-badge-warning">

⚠ Advertencia

</span>

<span class="jr-badge jr-badge-danger">

✖ Error

</span>

Bloque de código

const nombre = "Jorge";

console.log(nombre);
<pre class="jr-code">

<code>

const nombre = "Jorge";

console.log(nombre);

</code>

</pre>

Flex Between

Izquierda
Derecha
<div class="jr-flex-between">

    <div class="jr-badge jr-badge-success">

        Izquierda

    </div>

    <div class="jr-badge">

        Derecha

    </div>

</div>

Grid

Tarjeta 1
Tarjeta 2
Tarjeta 3
<div
class="jr-grid"
style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr));">

    <div class="jr-card">

        Tarjeta 1

    </div>

    <div class="jr-card">

        Tarjeta 2

    </div>

    <div class="jr-card">

        Tarjeta 3

    </div>

</div>

Variables CSS

--jr-bg
--jr-card
--jr-text
--jr-text-light
--jr-border
--jr-primary
--jr-primary-hover
--jr-success
--jr-warning
--jr-danger
--jr-radius
--jr-shadow