A Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
Características:
- Incluye cuadrículas XY: el sistema de cuadrícula predeterminado en Foundation permite al desarrollador controlar los diseños en función de las posiciones horizontales y verticales.
- Nota de desplazamiento suave: esta característica contiene un código JavaScript incorporado, para agregar la propiedad de «desplazamiento suave» a un enlace específico o a cualquier enlace presente dentro de la página web.
- Creación de prototipos más fácil: facilita la funcionalidad integrada que ayuda a acelerar el proceso de creación de prototipos.
Sintaxis:
<section class="callout large primary"> <h1>Hello Geeks</h1> </section>
Instalando Foundation: Podemos usar Foundation usando cualquiera de los siguientes métodos:
Método 1: Vaya a la documentación oficial de la Fundación https://get.foundation/ y haga clic en el botón Descargar todo para usar la fundación sin conexión.
Método 2: use los siguientes enlaces CDN dentro de la etiqueta principal.
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css” integridad=”sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384 -b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==” crossorigin=”anonymous”>
<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” integridad=”sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV3srBdV /QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==” crossorigin=”anónimo”></script>
Ahora entendamos el funcionamiento de la fundación usando un ejemplo.
Ejemplo: Este ejemplo ilustra el uso de las clases de la Fundación CSS para hacer la página web de blogs.
HTML
<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" /> </head> <body> <!-- Start Top Bar --> <div class="top-bar"> <div class="top-bar-left"> <ul class="menu"> <li class="menu-text">Blog Post</li> </ul> </div> </div> <!-- End Top Bar --> <div class="callout small primary"> <div class="row column text-center"> <h2>GeeksforGeeks Blogs</h2> </div> </div> <div class="row" id="content"> <div class="medium-8 columns"> <div class="blog-post"> <h3>Java blog <small>3/6/2021</small></h3> <p> Java syntax is similar to C/C++. But Java does not provide low level programming functionalities like pointers. Java is one of the most popular and widely used programming language and platform. A platform is an environment that helps to develop and run programs written in any programming language. </p> <div class="callout"> <ul class="menu simple"> <li><a href="#"> Author: Mike Mikers </a></li> <li><a href="#">Comments: 3</a></li> </ul> </div> <div class="blog-post"> <h3>Python blog <small>18/8/2021</small></h3> <p> Python is a high-level, general-purpose and a very popular programming language. Python programming language (latest Python 3) is being used in web development, Machine Learning applications, along with all cutting edge technology in Software Industry. </p> <div class="callout"> <ul class="menu simple"> <li><a href="#">Author: Mike Mikers</a></li> <li><a href="#">Comments: 10</a></li> </ul> </div> </div> </div> </div> <script src= "https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src= "https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script> <script> $(document).foundation(); </script> </div> </body> </html>
Producción:
ventajas:
- Es de código abierto y tiene un buen apoyo de la comunidad.
- Es fácil de usar, pero debe tener conocimientos básicos de HTML y CSS.
- Ofrece varias plantillas que puede usar para hacer su sitio web con mucho menos esfuerzo.
Desventajas:
- Puede tomar algún tiempo para que los principiantes aprendan.
- Ofrece muy pocos temas en comparación con otros marcos disponibles.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA