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.
Instalación de JavaScript:
Podemos agregar Foundation CSS JavaScript a nuestra página web de 2 maneras:
- Uso de la instalación de NPM
- Usando el enlace CDN
Comprenderemos las dos formas de usar Javascript en Foundation CSS, junto con sus implementaciones.
Usando la instalación de NPM:
La base está disponible en npm . Este paquete incluye todos los archivos Sass y JavaScript de origen, así como CSS y JavaScript compilados, en versiones comprimidas y sin comprimir.
npm install foundation-sites
Usando el enlace CDN:
Podemos obtener la base JS requerida de CDN simplemente insertando las siguientes líneas de código en nuestra plantilla HTML:
<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” crossorigin=”anónimo”>
</script>
Inicialización de JavaScript:
La función .foundation() en el objeto jQuery se puede utilizar para aprovechar todos los complementos de Foundation a la vez.
Sintaxis:
$(document).foundation();
Ejemplo : este ejemplo muestra la importancia de Foundation JS al implementarlo y sin implementarlo.
Uso de la instalación e inicialización de JS:
HTML
<html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> Foundation CSS JavaScript Configuration </title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript (Foundation JS from CDN) --> <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" crossorigin="anonymous"> </script> </head> <body> <h1 style="color:green;">GeeksforGeeks </h1> <h3>Foundation CSS dropdown menu example when JS is installed and Initialized </h3> <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Tutorials</a> <ul class="menu"> <li> <a href="#">Practice DS & Algo.</a> </li> <li> <a href="#">Algorithms</a> </li> <li> <a href="#">Data Structures</a> </li> <li> <a href="#">Interview Corner</a> </li> <li> <a href="#">Languages</a> </li> <li> <a href="#">CS Subjects</a> </li> <li> <a href="#">GATE</a> </li> <li> <a href="#">Web Technologies</a> </li> </ul> </li> <li><a href="#">Student</a> <ul class="menu"> <li> <a href="#">Campus Ambassador Program</a> </li> <li> <a href="#">School Ambassador Program</a> </li> <li> <a href="#">Project</a> </li> <li> <a href="#">Geek Of the Month</a> </li> <li> <a href="#">Placement Course</a> </li> <li> <a href="#">Competitive Programming</a> </li> <li> <a href="#">Testimonials</a> </li> <li> <a href="#">Careers</a> </li> </ul> </li> <li><a href="#">Jobs</a> <ul class="menu"> <li> <a href="#">Apply for Jobs</a> </li> <li> <a href="#">Post a Job</a> </li> </ul> </li> <li> <a href="#">Courses</a> </li> </ul> <!-- Js Initialization --> <script> $(document).foundation(); </script> </body> </html>
Producción:
Con instalación de JavaScript en Foundation CSS
- Sin instalación e inicialización de Foundation JS:
HTML
<html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> Foundation CSS JavaScript Configuration </title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <h1 style="color:green;">GeeksforGeeks </h1> <h3> Foundation CSS dropdown menu example without Foundation JS </h3> <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Tutorials</a> <ul class="menu"> <li> <a href="#">Practice DS & Algo.</a> </li> <li> <a href="#">Algorithms</a> </li> <li> <a href="#">Data Structures</a> </li> <li> <a href="#">Interview Corner</a> </li> <li> <a href="#">Languages</a> </li> <li> <a href="#">CS Subjects</a> </li> <li> <a href="#">GATE</a> </li> <li> <a href="#">Web Technologies</a> </li> </ul> </li> <li><a href="#">Student</a> <ul class="menu"> <li> <a href="#">Campus Ambassador Program</a> </li> <li> <a href="#">School Ambassador Program</a> </li> <li> <a href="#">Project</a> </li> <li> <a href="#">Geek Of the Month</a> </li> <li> <a href="#">Placement Course</a> </li> <li> <a href="#">Competitive Programming</a> </li> <li> <a href="#">Testimonials</a> </li> <li> <a href="#">Careers</a> </li> </ul> </li> <li><a href="#">Jobs</a> <ul class="menu"> <li> <a href="#">Apply for Jobs</a> </li> <li> <a href="#">Post a Job</a> </li> </ul> </li> <li> <a href="#">Courses</a> </li> </ul> </body> </html>
Salida: a partir de la salida, no hemos utilizado el JavaScript CSS de Foundation, por lo que el código no funciona como se esperaba.
Sin instalación de Foundation JS
Referencia: https://get.foundation/sites/docs/javascript.html#installing
Publicación traducida automáticamente
Artículo escrito por ishankhandelwals y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA