Foundation CSS es un marco front-end de código abierto, gratuito y que permite la creación de diseños web flexibles. Uno de los marcos CSS más potentes, presenta una cuadrícula receptiva, elementos de interfaz de usuario HTML y CSS multiplataforma, plantillas y más. Además, ofrece una variedad de funciones opcionales de extensión de JavaScript. También se procesa rápidamente en dispositivos móviles porque se ha integrado la herramienta Fastclick.js.
El uso de módulos de diseño como Flexbox , que combina la propiedad de visualización flex con otros atributos como margin y padding , etc., es un mejor método para construir diseños. Al agregar clases de ayuda a varios elementos, podemos aprovechar rápidamente los muchos componentes preconstruidos que proporciona Foundation CSS. El modo FlexBox es uno de esos elementos de la interfaz de usuario. El modo Flexbox simplifica el desarrollo de sitios web al sustituir las capacidades de flexbox por el enfoque convencional de Foundation de emplear flotadores, alineación vertical, celdas de tabla, etc. Por el contrario, cuando usamos CSS para implementar flexbox tradicionalmente, debemos incluir numerosos atributos, como relleno y margen, para construir el playout. Solo necesitamos agregar las clases auxiliares align-left , align-bottom, etc. al Flexbox de Foundation.
Hay varios componentes CSS proporcionados por Foundation CSS, el modo flexbox no es compatible con todos los componentes. Las propiedades de visualización flexibles o las clases de flexbox son compatibles con un grupo de componentes que se enumeran a continuación y también se especifica cómo se pueden usar con las clases de flexbox. No hay clases específicas para usar el modo flexbox con los componentes, para obtener más información sobre la clase, consulte este artículo Foundation CSS Flexbox Mode .
Componentes compatibles:
- Grupo de botones : los botones son uno de los elementos de interfaz de usuario más comunes en una página web. Podemos usar las clases de utilidad de Flexbox como .align-center, .align-right, .align-spaced o .align-justify.
- Grupo de entrada (formularios) : los grupos de entrada son diferentes formas en las que se pueden usar para tomar entradas en los formularios, como contraseñas, texto, correo electrónico, etc. Para tomar entradas, debemos agregar etiquetas de entrada que tomarán esas entradas del usuario . No hay formas directas en las que podamos implementar el modo flexbox en los grupos de entrada, podemos implementar las clases de utilidad Flexbox como .align-center, .align-right, .align-spaced o . alinear-justificar en las etiquetas y botones en línea.
- Menú : un menú es una forma de agregar una lista de enlaces que se pueden usar para navegar a diferentes partes de la página web. Los elementos del menú se crean utilizando elementos <ul> y <li>. Las clases de utilidad de Flexbox como .align-center, .align-right, .align-spaced o .align-justify se pueden usar con el menú.
- Barra superior : se puede usar una barra superior para hacer una barra de navegación con dos partes, como la sección del lado izquierdo, que incluye el logotipo y algunos otros componentes, y la sección del lado derecho, que incluye el registro/ datos de inicio de sesión, etc. Las clases de utilidad de Flexbox como . align-center, .align-right, .align-spaced o .align-justify se utilizan en el diseño avanzado de la barra superior.
- Objeto de medios : utilizando clases de objetos de medios, un objeto de medios agrega medios con algo de contenido. Estas clases se pueden usar siempre que necesitemos ilustrar algo usando medios. Las clases .middle o .bottom agregadas a la sección de objetos multimedia funcionan en el modo Flexbox.
- Título: la barra de título es una barra de navegación muy simple que contiene el título y nada más específico, como botones o una barra de búsqueda. Esto normalmente se combina con una ventana gráfica fuera del lienzo para crear una barra de navegación completa. Agregamos contenido a las partes izquierda y derecha de la barra de título con . barra de título izquierda y . clases title-bar-right respectivamente, que funciona principalmente con el modo Flexbox.
- Tarjeta : a menudo se incluye un encabezado, una imagen, un título y un pie de página en una tarjeta. Para crear una tarjeta sin imagen ni pie de página, se puede omitir cualquiera de estos componentes. Los . Las clases card y .card-divider que se usan en el componente Card son contenedores Flexbox, por lo que podemos usar las clases Flexbox Utility para crear diseños personalizados.
Ejemplo 1: en el código que se muestra a continuación, la implementación de . clase ampliada y . clases de utilidad align-right flexbox en un grupo de botones. Si no se proporciona la expansión, un grupo de botones solo se expande hasta 1200 px, por lo que no será conveniente para pantallas más anchas.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Flexbox Mode Supported Components</strong> <div class="expanded button-group margin-top-2"> <a class="secondary button"> Geeks </a> <a class="secondary button"> For </a> <a class="secondary button"> Geeks </a> </div> <div class="button-group align-right margin-top-2"> <a class="success button"> Geeks </a> <a class="success button"> for </a> <a class="success button"> Geeks </a> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: en el código que se muestra a continuación, la implementación de . clase ampliada en el menú básico y . barra superior izquierda y . top-bar-right se utilizan para agregar contenido a la barra superior.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <center> <div class="top-bar margin-bottom-2"> <div class="top-bar-left"> <ul class="dropdown menu" data-dropdown-menu> <li class="menu-text">GeeksforGeeks</li> <li><a href="#">DSA</a></li> <li><a href="#">Algorithms</a></li> <li><a href="#">Competetive Programming</a></li> </ul> </div> <div class="top-bar-right"> <ul class="menu"> <li><input type="search" placeholder="Search"></li> <li><button type="button" class="button">Search</button></li> </ul> </div> </div> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Flexbox Mode Supported Components</strong> <ul class="menu expanded margin-top-3"> <li><a href="#">DSA</a></li> <li><a href="#">Algorithms</a></li> <li><a href="#">Competetive Programming</a></li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/flexbox-mode.html#supported-components
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA