bone.css

Un boilerplate de CSS para mis proyectos personales. Ha sido creado para mis propias necesidades, pero quién sabe, puede serte útil.

Tabla de Contenidos

Lo básico

El layout se basa en un contenedor de 500px de ancho, inspirado en theminimalists.com. Lo especial es que no uso márgenes ni displays para centrar el contenido, sino ✨padding✨.

/* Con un ancho de viewport de 1000px,           */
/* y un ancho máximo de 500px,                   */
/* y un margen de 20px,                          */
/* obtenemos max((1000px-500px)/2, 20px) = 250px */

.boned {

    --max-width: 500px;
    --margin: 20px;

    width: 100%;
    padding: 0 max(
        calc((100% - var(--max-width)) / 2),
        var(--margin)
    );

}

Usando padding para centrar

Porque estoy loco. Y porque quería una forma de centrar un elemento sin depender de un contenedor padre. Quería centrar el elemento en sí mismo. Lo llamé boned porque es como un hueso, el hueso del viewport.

Puedes aplicar “bone” a un elemento con la clase .boned. El header, main y footer del body están afectados por esta clase por defecto.

Colores

Hay 3 tipos de colores: white, gray y black. La intensidad se indica con darker, dark, light o lighter.

Los colores cambiarán automáticamente dependiendo de la preferencia del sistema del usuario, pero si quieres forzar un tema necesitas añadir las clases .theme-dark o .theme-light.

Este es un ejemplo sencillo de implementación de cambio de temas con JavaScript:

const activeThemeDark = () => {
	document.body.classList.remove("theme-light");
	document.body.classList.add("theme-dark");
};

const activeThemeLight = () => {
	document.body.classList.remove("theme-dark");
	document.body.classList.add("theme-light");
};

const activeThemePrefersColorScheme = () => {
	document.body.classList.remove("theme-dark");
	document.body.classList.remove("theme-light");
};

Código

Los snippets de código se muestran con una fuente monoespaciada y un fondo simple, como los elementos <code>.

const password = "1234";

<pre>
    <code>
        const <var>password</var> = "1234";
    </code>
</pre>

Botones

Simple. Uno está activo, el otro está deshabilitado.

<button>Activo</button>
<button disabled>Deshabiltado</button>

Es fácil añadir iconos y emojis

</button>
    <span>📸🤨</span>
    Seguro?
</button>
<button>
    Pedir
    <span>🍕</span>
</button>

Listas

Lista sin ordenar

• Zapabunga!
• Petrocombo!
• Treparamas!
• Catalejo!
• Mozirrante!

<ul>
    <li>Zapabunga!</li>
    <li>Petrocombo!</li>
    <li>Treparamas!</li>
    <li>Catalejo!</li>
    <li>Mozirrante!</li>
</ul>

Tablas

Una tabla con filas y columnas

<div class="bordered">
    <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Animal</th>
                <th style="text-align: end;">Acciones</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Pelusilla</td>
                <td>Cat</td>
                <td style="text-align: end;">
                    <a href="#tablas">✏️</a>
                    <a href="#tablas">❌</a>
                </td>
            </tr>
            <tr>
                <td>Bolo</td>
                <td>Dog</td>
                <td style="text-align: end;">
                    <a href="#tablas">✏️</a>
                    <a href="#tablas">❌</a>
                </td>
            </tr>
            <tr>
                <td>Trocito</td>
                <td>Rabbit</td>
                <td style="text-align: end;">
                    <a href="#tablas">✏️</a>
                    <a href="#tablas">❌</a>
                </td>
            </tr>
            <tr>
                <td>Cosita</td>
                <td>Ferret</td>
                <td style="text-align: end;">
                    <a href="#tablas">✏️</a>
                    <a href="#tablas">❌</a>
                </td>
            </tr>
            <tr>
                <td>Juan</td>
                <td>Guinea Pig</td>
                <td style="text-align: end;">
                    <a href="#tablas">✏️</a>
                    <a href="#tablas">❌</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Grids

Los uso con frecuencia

<div class="grid">
    <img src="/assets/images/cat-1.webp" alt="cute cat" />
    <img src="/assets/images/cat-2.webp" alt="cute cat" />
    <img src="/assets/images/cat-3.webp" alt="cute cat" />
    <img src="/assets/images/cat-4.webp" alt="cute cat" />
    <img src="/assets/images/cat-5.webp" alt="cute cat" />
    <img src="/assets/images/cat-6.webp" alt="cute cat" />
</div>

Formularios

<form onsubmit="return false;">
    <label for="text">
        Comida favorita
        <input
            type="text"
            name="text"
            placeholder="Galletas, bananas, arena..."
        />
    </label>
    <label for="textarea">
        Demuestra que no eres un gato
        <textarea
            name="textarea"
            cols="30"
            rows="10"
            placeholder="Miau miau miau">
        </textarea>
    </label>
</form>

Clases extra

Algunas clases útiles.

.boned

Para centrar el elemento en el centro de la página usando padding. Header, main y footer están boned por defecto.

.full

Aplica un ancho del 100% al elemento. Útil para botones, tablas o elementos con display flex.

.center

Mi forma favorita de centrar elementos. Aplica display: flex, justify-content: center y align-items: center.

.note

Útil para advertencias, errores o mensajes importantes.

.bordered

Útil para aplicar un borde estándar.