El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Ús de Foundation per al Disseny Responsive

Següent ►
►

Foundation és un dels frameworks CSS més populars per al desenvolupament de llocs web responsius. Ofereix una àmplia gamma d'eines i components que faciliten la creació de dissenys adaptatius i atractius. En aquesta secció, explorarem com utilitzar Foundation per construir llocs web responsius de manera eficient.

Què és Foundation?

Foundation és un framework front-end desenvolupat per ZURB que proporciona una base sòlida per al disseny web responsiu. Inclou:

  • Grids Flexibles: Un sistema de graella que permet crear dissenys adaptatius.
  • Components UI: Botons, formularis, menús de navegació, i més.
  • Plugins JavaScript: Per afegir funcionalitats interactives.
  • Compatibilitat Cross-Browser: Assegura que els dissenys funcionin en diversos navegadors.

Instal·lació de Foundation

Opció 1: Utilitzar el CDN

Una manera senzilla d'iniciar amb Foundation és utilitzar el CDN. Afegeix les següents línies al teu document HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Foundation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
</body>
</html>

Opció 2: Instal·lació Local

Per a un control més gran i personalització, pots instal·lar Foundation localment utilitzant npm:

  1. Instal·la Node.js i npm si encara no ho has fet.

  2. Executa el següent comandament al terminal:

    npm install foundation-sites

  3. Inclou els arxius CSS i JavaScript de Foundation al teu projecte.

Creació d'un Layout Bàsic amb Foundation

Sistema de Graella

Foundation utilitza un sistema de graella de 12 columnes que facilita la creació de dissenys responsius. Aquí tens un exemple bàsic:

<div class="grid-container">
    <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-6 large-4">
            <p>Contingut de la cel·la 1</p>
        </div>
        <div class="cell small-12 medium-6 large-4">
            <p>Contingut de la cel·la 2</p>
        </div>
        <div class="cell small-12 medium-6 large-4">
            <p>Contingut de la cel·la 3</p>
        </div>
    </div>
</div>

Explicació del Codi

  • grid-container: Contenidor principal que defineix l'àrea de la graella.
  • grid-x: Classe que defineix una fila de la graella.
  • grid-margin-x: Afegeix marges entre les cel·les.
  • cell: Defineix una cel·la dins de la graella.
  • small-12, medium-6, large-4: Defineixen el nombre de columnes que ocupa la cel·la en diferents mides de pantalla.

Components UI de Foundation

Foundation inclou diversos components d'interfície d'usuari que pots utilitzar per enriquir el teu lloc web. Alguns dels més comuns són:

  • Botons: Utilitza la classe button per crear botons estilitzats.
  • Menús de Navegació: Crea menús responsius amb les classes menu i dropdown.
  • Targetes: Utilitza les classes card per crear targetes d'informació.

Exemple de Botó

<a href="#" class="button">Botó de Foundation</a>

Exercici Pràctic

Objectiu: Crea una pàgina web senzilla utilitzant Foundation que inclogui un sistema de graella i un menú de navegació.

Passos:

  1. Crea un document HTML i inclou Foundation mitjançant el CDN.
  2. Dissenya un layout amb una capçalera, un cos amb tres columnes i un peu de pàgina.
  3. Afegeix un menú de navegació a la capçalera.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pàgina amb Foundation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
</head>
<body>
    <header>
        <nav class="top-bar">
            <ul class="menu">
                <li class="menu-text">Logo</li>
                <li><a href="#">Inici</a></li>
                <li><a href="#">Sobre Nosaltres</a></li>
                <li><a href="#">Contacte</a></li>
            </ul>
        </nav>
    </header>
    <main class="grid-container">
        <div class="grid-x grid-margin-x">
            <div class="cell small-12 medium-6 large-4">
                <p>Contingut de la cel·la 1</p>
            </div>
            <div class="cell small-12 medium-6 large-4">
                <p>Contingut de la cel·la 2</p>
            </div>
            <div class="cell small-12 medium-6 large-4">
                <p>Contingut de la cel·la 3</p>
            </div>
        </div>
    </main>
    <footer>
        <p>Peu de pàgina</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
</body>
</html>

Conclusió

Foundation és una eina poderosa per al disseny responsiu que ofereix flexibilitat i facilitat d'ús. Amb el seu sistema de graella i els components d'interfície d'usuari, pots crear llocs web atractius i adaptatius amb menys esforç. Practica utilitzant Foundation en els teus projectes per aprofitar al màxim les seves capacitats.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats