PICNIC CSS

Picnic CSS – Documentació oficial

Picnic CSS funciona de dues maneres diferents:

1. Estilitza etiquetes HTML directament

Moltes etiquetes HTML milloren el seu aspecte automàticament, sense afegir cap classe.

Algunes d’estes etiquetes són:

  • header, nav, main, section, article, footer
  • h1 – h6
  • p, small, strong, em, a
  • ul, ol, li
  • table, th, td
  • form, label, input, textarea

Açò vol dir que:

  • si el HTML està ben escrit
  • Picnic CSS ja ajuda sense tocar res

2. Ofereix poques classes bàsiques

Picnic CSS també proporciona algunes classes CSS, sobretot per a:

  • botons
  • disposició senzilla
  • amplària i mida

Estas classes s’han d’afegir manualment.

4. Afegir Picnic CSS a un projecte

Per a utilitzar Picnic CSS, només cal afegir el seu full d’estils al <head> del document HTML.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">

No cal cap configuració extra.

5. Botons en Picnic CSS

Els botons són el component més important de Picnic CSS.

Per a convertir un botó HTML en un botó de Picnic CSS, cal afegir la classe:

<button class="button">Botó</button>

Sense esta classe, Picnic no aplica l’estil de botó.

Picnic CSS ofereix algunes variants visuals.

Les més habituals són:

  • success
  • warning
  • error

Exemples:

<button class="button success">Confirmar</button>
<button class="button warning">Avís</button>
<button class="button error">Eliminar</button>
  • Mida i amplària

Picnic CSS permet modificar la mida o l’amplària del botó.

Classes habituals:

  • small
  • full
<button class="button small">Xicotet</button>
<button class="button full">Amplària completa</button>

6. Disposició bàsica (Flexbox simplificat)

Picnic CSS inclou un ús molt simplificat de Flexbox.

No és un sistema de maquetació complet, però pot servir per a exemples senzills.

Classes disponibles:

  • flex
  • stack
  • center
  • one, two, three, four

Exemple:

<div class="flex three">
  <div>Columna 1</div>
  <div>Columna 2</div>
  <div>Columna 3</div>
</div>

Este sistema no substituïx Grid ni Flexbox, només els simplifica.

7. Formularis

Picnic CSS millora automàticament l’aspecte dels formularis.

No cal afegir classes a:

  • form
  • label
  • input
  • textarea
  • select

Normalment només s’afegix:

  • button al botó del formulari
  • opcionalment full a inputs o botons

Exemple:

<form>
  <label>Nom</label>
  <input type="text">
  <button class="button success">Enviar</button>
</form>

8. Taules

Les taules també milloren automàticament amb Picnic CSS.

Etiquetes afectades:

  • table
  • thead, tbody
  • tr, th, td

No cal afegir classes perquè:

  • el text siga més llegible
  • hi haja millor espaiat

9. Llistes i contingut

Picnic CSS aplica estils base a:

  • ul, ol, li
  • a
  • strong, em

No hi ha classes específiques per a tipografia.

10. Quan té sentit usar Picnic CSS

Picnic CSS és adequat quan:

  • volem una millora visual ràpida
  • no volem carregar molt el projecte
  • estem aprenent frameworks CSS
  • el projecte és senzill

No és recomanable quan:

  • el disseny és complex
  • cal responsive avançat
  • es necessiten molts components

Exercici

Donat el següent html.


<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici Picnic CSS</title>

    <!-- MODIFICA: afegix el CSS base -->


   <!-- MODIFICA: afegix ací l'enllaç a Picnic CSS (CDN oficial) -->
</head>

<body>

<header>
    <h1>Frameworks CSS</h1>
    <p>Pràctica d’introducció a l’ús d’un microframework CSS.</p>

    <!-- MODIFICA: afegix classes de Picnic als botons -->
    <button>Acció</button>
    <button>Confirmar</button>
    <button>Eliminar</button>
</header>

<nav>
    <a href="#">Inici</a>
    <a href="#">Notícies</a>
    <a href="#">Contacte</a>
</nav>

<main>

    <section>
        <h2>Articles</h2>

        <div id="articles">
            <article>
                <h3>Article 1</h3>
                <p>
                    Text amb <strong>negreta</strong>, <em>cursiva</em> i un
                    <a href="#">enllaç</a>.
                </p>
                <!-- MODIFICA: afegix classes de Picnic al botó -->
                <button>Llegir més</button>
            </article>

            <article>
                <h3>Article 2</h3>
                <p>Un altre text de prova.</p>
                <!-- MODIFICA: afegix classes de Picnic al botó -->
                <button>Correcte</button>
            </article>

            <article>
                <h3>Article 3</h3>
                <p>Informació addicional.</p>
                <!-- MODIFICA: afegix classes de Picnic al botó -->
                <button>Error</button>
            </article>
        </div>
    </section>

    <section>
        <h2>Llista de tasques</h2>

        <ul>
            <li>Consultar documentació</li>
            <li>Afegir classes CSS</li>
            <li>Observar canvis visuals</li>
        </ul>
    </section>

    <section>
        <h2>Taula d’exemple</h2>

        <table>
            <thead>
            <tr>
                <th>Nom</th>
                <th>Estat</th>
                <th>Acció</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Element 1</td>
                <td>Correcte</td>
                <!-- MODIFICA: afegix classes de Picnic al botó -->
                <td><button>Veure</button></td>
            </tr>
            <tr>
                <td>Element 2</td>
                <td>Error</td>
                <!-- MODIFICA: afegix classes de Picnic al botó -->
                <td><button>Veure</button></td>
            </tr>
            </tbody>
        </table>
    </section>

    <section>
        <h2>Formulari</h2>

        <form>
            <label for="nom">Nom</label>
            <input type="text" id="nom">

            <label for="email">Correu</label>
            <input type="email" id="email">

            <!-- MODIFICA: afegix classes de Picnic al botó -->
            <button type="submit">Enviar</button>
        </form>
    </section>

    <section>
        <h2>Ampliació: TABS i galeria</h2>
        <p>
            MODIFICA: crea uns <strong>tabs amb CSS</strong> i una <strong>galeria</strong>
            amb un mínim de 4 imatges.
        </p>

        <!-- MODIFICA: ací crearàs els tabs -->
        <div id="tabs-galeria">
            <p>(Espai reservat per a l’ampliació)</p>
        </div>
    </section>

</main>

<footer>
    <small>Pràctica d’introducció a frameworks CSS</small>
</footer>

</body>
</html>

1. Afegir Picnic CSS

MODIFICA el <head> del document HTML per afegir el full d’estils de Picnic CSS utilitzant el CDN oficial.

2. Botons del header

MODIFICA els tres botons del header perquè queden així:

  • Primer botó:

    • botó normal de Picnic CSS

  • Segon botó:

    • botó de confirmació (variant positiva)

  • Tercer botó:

    • botó d’error (variant negativa)

3. Botons dels articles

MODIFICA els botons dins dels article amb les característiques següents:

  • Botó “Llegir més”:

    • botó normal de Picnic CSS
    • mida xicoteta

  • Botó “Correcte”:

    • botó de confirmació
    • mida xicoteta

  • Botó “Error”:

    • botó d’error
    • mida xicoteta

4. Botons de la taula

MODIFICA els botons de la taula perquè:

  • El botó de la fila amb estat “Correcte”:

    • siga un botó normal
    • mida xicoteta

  • El botó de la fila amb estat “Error”:

    • siga un botó d’error
    • mida xicoteta

5. Botó del formulari

MODIFICA el botó del formulari perquè:

  • siga un botó de confirmació
  • ocupe tota l’amplària disponible

6.- Galeria de Imatges.

Crea un TABS CSS i una Galeria de imatges que continga un minim de 4 imatges

CSS Base 


body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  color: #333;
}

header, main, footer {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

header {
  background-color: #ffffff;
  margin-top: 20px;
  border-radius: 6px;
}

nav {
  background-color: #333;
  padding: 10px;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
}

section {
  background-color: white;
  margin-top: 20px;
  padding: 20px;
  border-radius: 6px;
}

#articles article {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  background-color: #fafafa;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

footer {
  text-align: center;
  color: #666;
}

Solucio:

Enllaç solució