Foundation CSS Float Grid Avanzado

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.  

Clases avanzadas de Foundation CSS Float Grid:

Columna o fila combinada: cuando solo necesita una columna en una fila. Puede ahorrarse un poco de trabajo duro combinando las clases de columna y fila juntas y eso generará solo una columna en una fila. 

  • fila: esta clase se usa para contener todo el contenido/columnas que estarán en una fila.
  • columna: esta clase se utiliza para indicar las columnas individuales dentro de una fila.

Sintaxis:

<div class="column row">
    ...
</div>

Fila fluida: de forma predeterminada, las filas tienen un ancho de 1200 px. Entonces, usar estas filas en una pantalla más ancha no es la opción perfecta para elegir. Entonces usamos la opción de fila fluida y para eso, solo necesitamos agregar la clase expandida con la clase de fila .

  • expandido: esta clase se agrega con la clase de fila y permitirá que la fila se llene en todo el ancho.

Sintaxis:

<div class="expanded row">
    ...
</div>

Anidamiento: Float Grid nos proporciona una cantidad indefinida de anidamiento. Esto significa que podemos insertar una fila debajo de una columna, luego nuevamente insertar columnas debajo de esa fila insertada, y así sucesivamente. Esto no tiene ningún uso de una clase específica, solo tenemos que anidar con clases básicas de cuadrícula flotante. 

Sintaxis:

<div class="row">
    <div class="columns">
        <div class="row">
            <div class="columns">
                <div class="row">
                    <div class="columns">...</div>
                    <div class="columns">...</div>
                </div>
            </div>
        </div>
    </div>
</div>

Compensaciones: podemos agregar algo de espacio o mover la columna hasta 11 bloques usando esta opción. 

  • large-offset-[1-11]: esta clase se usa para agregar desplazamiento cuando el tamaño de la pantalla es grande.
  • medium-offset-[1-11]: esta clase se usa para agregar desplazamiento cuando el tamaño de la pantalla es mediano.
  • small-offset-[1-11]: esta clase se usa para agregar desplazamiento cuando el tamaño de la pantalla es pequeño.

Sintaxis:

<div class="row">
    <div class="columns large-offset-1">10, offset 1</div>
</div>

Ejemplo 1: El siguiente código demuestra la aplicación de la combinación de columna y fila , fila fluida y filas anidadas. La columna y fila combinadas se expanden para pantallas más anchas.

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <style>
         body {
            margin-left:20px;
            margin-right:20px;
         }
        .row {
            border:darkgreen 5px solid;
            background-color: green;
        }
        p {
            color:azure;
        }
    </style>
</head>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong>Foundation CSS Float Grid Advanced</strong>
  
    <div class="expanded column row one">
        <p>
           GeeksforGeeks
        </p>
    </div>
  
    <div class="row" style="margin-top:2rem;">
        <div class="columns small-8">
            <div class="row">
                <div class="columns small-8">
                    <p>
                        Nested
                    </p>
                    <div class="row">
                        <div class="columns small-8">
                            <p>
                                Nested Again
                            </p>
                        </div>
                        <div class="columns small-4">
                            <p>
                                Column-3
                            </p>
                        </div>
                    </div>
                </div>
                <div class="columns small-4">
                    <p>
                        Column-2
                    </p>
                </div>
            </div>
        </div>
        <div class="columns small-4">
            <p>
                Column-1
            </p>
        </div>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente código muestra un desplazamiento diferente con valores de 1, 2 o 3 columnas.

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <style>
        body {
            margin-left:20px;
            margin-right:20px;
        }
        .row {
            border:darkgreen 5px solid;
            background-color:greenyellow;
        }
        .columns {
            background-color:green;
        }
        p {
            color: azure;
        }
    </style>
</head>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <strong>Foundation CSS Float Grid Advanced</strong>
  
    <div class="row">
        <div class="columns large-1">
            <p>
                GFG
            </p>
        </div>
        <div class="columns large-11">
            <p>
                When no Offset is added
            </p>
        </div>
    </div>
    <div class="row">
        <div class="columns large-1">
            <p>
                GFG
            </p>
        </div>
        <div class="columns large-10 large-offset-1">
            <p>
                Offset with only 1 Column Value
            </p>
        </div>
    </div>
    <div class="row">
        <div class="columns large-1">
            <p>
                GFG
            </p>
        </div>
        <div class="columns large-9 large-offset-2">
            <p>
                Offset with only 2 Column Value
            </p>
        </div>
    </div>
    <div class="row">
        <div class="columns large-1">
            <p>
                GFG
            </p>
        </div>
        <div class="columns large-8 large-offset-3">
            <p>
                Offset with only 3 Column Value
            </p>
        </div>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/grid.html#advanced

Publicación traducida automáticamente

Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *