Foundation es el framework front-end receptivo más avanzado del mundo.
Pase rápidamente del prototipo a la producción, construya sitios o aplicaciones que funcionen en cualquier tipo de dispositivo con Foundation.
Foundation incluye una cuadrícula receptiva y totalmente personalizable, una gran biblioteca de mixins de Sass, complementos de JavaScript de uso común y soporte completo de accesibilidad.
Gran cantidad de recursos para ayudarte a construir sitios más rápido.
En todo el mundo, la gente usa Foundation para crear sitios web hermososo y la comunidad está continuamente haciendo complementos increíbles.
¡No dejes de echar un vistazo a plantillas de CMS, complementos, temas, fuentes de iconos, herramientas y mucho más!
Complementos Principales
Algunas herramientas y complementos interesantes con los que poder construir tus proyectos desde cero.
Plantillas HTML
Obtém 8 plantillas receptivas para iniciar tus proyectos. Cada una de estas plantillas HTML receptivas se construyeron con las mismas técnicas y principios que se enseñan en el Curso de Introducción a Foundation 6 para construir su negocio.
- Plantilla de Revistas: Esta plantilla se enfoca en imágenes en negrita, perfectas para un sitio estilo revista con contenido llamativo. Sus historias son fáciles de encontrar con grandes bloques de funciones.
? DEMOSTRACIÓN DE PLANTILLA DE NOTICIAS↘ DESCARGA LA PLANTILLA DE NOTICIAS
- Plantilla de Viajes: Con las miniaturas grandes con un espacio para títulos y descripciones junto con un encabezado informativo hacen de esta la plantilla perfecta para reservas de viajes, hoteles o similares.
? DEMOSTRACIÓN DE PLANTILLA DE VIAJES↘ DESCARGA LA PLANTILLA DE VIAJES
- Plantilla de Inicio para E Commerce: ¿Estás construyendo una tienda en línea? Apreciarás el control deslizante con la tecnología Orbit y los patrones en miniatura para elementos y botones de esta plantilla.
? DEMOSTRACIÓN DE PLANTILLA DE E-COMMERCE↘ DESCARGA LA PLANTILLA DE E-COMMERCE
- Plantilla para Agencias: Lleve tu trabajo a la vanguardia con una elegante plantilla perfecta para agencias o autónomos.
? DEMOSTRACIÓN DE PLANTILLA PARA AGENCIAS↘ DESCARGA LA PLANTILLA PARA AGENCIAS
- Plantilla para Blog: Imágenes grandes, un diseño fácil de navegar y una barra lateral versátil te ayudarán a poner en marcha tu blog.
? DEMOSTRACIÓN DE PLANTILLA DE BLOG↘ DESCARGA LA PLANTILLA DE BLOG
- Plantilla de una sola Columna: Enfoque elegante y minimalista puede ayudar a que su blog se destaque al poner el contenido al frente y al centro.
? DEMOSTRACIÓN DE PLANTILLA DE 1 COLUMNA↘ DESCARGA LA PLANTILLA DE 1 COLUMNA
- Plantilla de Portfolio: Muestra tu trabajo y resalta lo que haces con este diseño en miniaturas, con un estilo de cuadrícula.
? DEMOSTRACIÓN DE PLANTILLA DE PORTFOLIO↘ DESCARGA LA PLANTILLA DE PORTFOLIO
- Plantilla de Productos: Resalta tu nuevo producto y educa a los clientes potenciales con esta plantilla clásica.
? DEMOSTRACIÓN DE PLANTILLA DE PRODUCTO↘ DESCARGA LA PLANTILLA DE PRODUCTO
Fuentes de Iconos
Una colección de íconos personalizada de 283 iconos almacenados en una práctica fuente web. Son fáciles de personalizar para que tengan cualquier tamaño, color o estilo en CSS.
¡Usa el dulce conjunto de íconos y no dudes en agregarlo a tu próximo proyecto!
↘ DESCARGALOS Y PERSONALIZALOS
Tablas Receptivas
La forma de tratar los datos tabulares en pantallas más pequeñas. Un método único para obtener datos tabulares que se ajusten a cualquier tamaño de pantalla.
No permitas que las tablas rompan tu diseño receptivo nunca más. Este simple combo JS / CSS permitirá que tus tablas se adapten a las pantallas de los dispositivos pequeños sin que todo se vaya al diablo.
Funciona tomando la primera columna y “fijándola” a la izquierda de la tabla, lo que te permite desplazarte por las otras columnas debajo de ella.
? PÁGINA DE EJEMPLO DE LAS TABLAS RECEPTIVAS ↘ DESCARGA UNA PLANTILLA DE LAS TABLAS (? La descarga, se realizará desde el Github del proyecto Oficial)
Iconos SVG de Redes Sociales
Algunos bonitos iconos sociales para mejorar tu proyecto. Adam Fairhead creó un conjunto de dulces iconos SVG independientes de la resolución. Estos íconos SVG son ideales para pantallas de resolución ultra alta, más livianos y personalizables.
Al igual que Foundation, estos íconos están impulsando la web en nuevas direcciones. Estos iconos son un gran recurso para la iconografía que no puede verse afectado por la frecuencia con la que cambian las densidades de píxeles. El uso de SVG seguirá creciendo en la web, sé parte del movimiento.
? PÁGINA DE EJEMPLO DE LAS TABLAS RECEPTIVAS ↘ DESCARGA LOS ICONOS EN SVG (? La descarga, se realizará desde el Github del proyecto Oficial)
Plantillas Omnigraffle
? OJEA LOS PDF↘ DESCARGA LOS FICHEROS GSTENCIL
Recursos para Foundation 6
- Angular: La increíble gente de Pinecone creó un puerto angular para Foundation. Angular.js ayuda a crear aplicaciones de una sola página, aplicaciones web de una página que solo requieren HTML, CSS y JavaScript en el lado del cliente.
- Foundout6 – Una plantilla básica de Joomla basada en Foundation 6 con SCSS
- Diseñe visualmente con el poderoso marco Foundation 6. por Coffee Cup
- Directivas nativas de AngularJS basadas en el marcado y CSS de Foundation
- JointsWP Foundation 6 tema de WordPress por Jeremy Englert
- Foundation 6 Shopify Boilerplate
- Foundation for Sites 6 Paquete Nuget Por Abdullah Salem
- FoundationPress WordPress starter-theme basado en Foundation 6 de Ole Fredrik Lie
- Versión de Material Design de Foundation 6 por Mikolaj Dobrucki
- Tema de inicio de WordPress Project-Yeti por Simon Hayter.
- Archivo de configuración de TypeScript para Foundation 6 por Sam Vloeberghs
- Soporte de Font Awesome para los botones Foundation de Josh Medeski.
- Foundation for Sites 6 Atom Snippets por George Bratsos.
- Plantilla de Foundation for Sites para Sketch 3. Escrito por Stephen Way.
- Proyecto Jekyll 3 con Foundation for Sites 6 Sass. Escrito por Chris Orendi.
- Clips de Coda 2 para Foundation 6 de Zack Warren
- Kit de interfaz de usuario Axure Foundation 6 de Adam Misosky
- Foundation 6 for Sites plantilla Joomla de Remco Janssen
- Instalación de NodeJS, Foundation 6 y Firebase por Franz Noel
- Biblioteca de widgets de Axure Foundation 6 de Elios Lino
- Extensión de fragmento de código de Visual Studio Foundation 6 de Dave Joyce
- Bones: tema para Grav CMS y Foundation 6 por Ben Lee
- Bibliotecas de patrones Axure y Sketch por Pointsource
- Foundation con Angular CLI
- Shiro es un tema premium de comercio electrónico de Shopify diseñado por Copperhaus.
- Brunch esqueleto usando Foundation 6. Escrito por Bass Jobsen.
- Generador de Yeoman para montar una aplicación web Foundation 6 de front-end. Escrito por Bass Jobsen.
- Scratch: un generador de Yeoman para crear rápidamente nuevos proyectos de Foundation WordPress. por Sixteenbit.
- Foundation 6 CDN a través de JSDeliver
- Complemento de WordPress Motion UI con Wow.js
- Proyectos de sitios estáticos de Jekyll con Foundation 6 por Troy McGinnis
- Foundation 6 Menu Walker Class para WordPress por Will de wLc Designs
- Gulp + Angular + Foundation 6 de Fulup Ar Foll
- Foundation for Sites 6 con Java Server Faces por Stefan Katerkamp
- Proyecto Yeti tema de WordPress por Simon Hayter
- Croft: tema de WordPress creado con Foundation 6 y Hybrid Core por Brett Mason
- Plantilla de aplicación PHP Yii 2 Basic Gulp Sass para Foundation 6 por Jacob Moen
- Yii2 con Foundation 6 y PHP de Foundationize
- WebStorm Foundation 6 fragmentos de Laurent Remy
- Una plantilla de Cookiecutter para Wagtail CMS y Django usando ZURB Foundation 6
- Obtenga una consulta de medios para cualquier dispositivo por Michael Gannon
- Foundation 6 Metalsmith Nunjucks
Recursos para Foundation 5
- Angular: La increíble gente de Pinecone creó un puerto angular para Foundation. Angular.js ayuda a crear aplicaciones de una sola página, aplicaciones web de una página que solo requieren HTML, CSS y JavaScript en el lado del cliente.
- Foundation for RapidWeaver utiliza las últimas tecnologías para impulsar su sitio hacia la era moderna. ¡Sin mencionar que está construido para la velocidad! Por Joe Workman (Foundation Certified) para Foundation 5
- Foundation Rapid | RapidWeaver + Stacks + Base
- Pinegrow Web Editor: aplicación de escritorio de creación de sitios visual para Foundation
- Generador de red experimental cortesía de Ville Vanninen
- Bookmarklet Grid Displayer de Antoine Lefeuvre
- Bookmarklet de diseño adaptable de Victor Coulon
- Una extensión de soportes para agregar la plantilla básica ZURB Foundation 5 a su página por George Bratsos
- Paquete Textmate / Sublime Text 2 de Liam R
- ZURB Foundation 5 fragmentos de texto sublimes de ZURB
- Foundation 5 Clips para Coda 2 de Zacksmash
- Foundation 5 Snippets para el editor de Atom por Laurent Rémy
- Textura de imagen borrosa por ZURB Playground
- Gráficos circulares, gráficos de barras y gráficos de líneas de ZURB Playground
- Foundation Icon Fonts 3 por Foundation Team
- Selector de intervalo de fechas de la fundación de Talha Asad
- Gráfico de época por Jordan Feldstein
- Complemento ZMultiSelect de Andrea Mariani F5
- Complemento MultiSelect de Andrea Mariani
- Complemento Foundation Shortcode de WordPress F5 y F4
- Sticker Footer de página adhesivo de base de Corey Snyder F5 F4
- Foundation Slide Up Top-bar de Mike en Pixelspring
- Azulejos de estilo receptivo para cimientos
- Ampliación repleta de funciones : Foundation for Contao de Monique Hahnefeld
- Codeply con la última Fundación para sitios y fragmentos
- Codepen con la última Fundación para sitios
- Bloques de construcción de ZURB
- Interfaz de usuario casi plana de Amit Gaur F5
- Lecciones sobre cimentación y diseño por ZURB
- Escala modular de Mason Wendell y Scott Kellum
- Documentación fuera de línea de la Fundación por el equipo de la Fundación
- Menos versión de Justin Marsan
- Menos con esquema de color de Matalin Hatchard
- Plantillas web HAML de Peter Bonnell
- Responsinator: vea su sitio de manera receptiva por Tama Pugsley y Andy Hovey
CMS: Gestores de Contenidos
Comienza más rápido: elija un CMS para WordPress que esté listo para Foundation o un tema CSS simple para sus proyectos.
WordPress
- JointsWP por Jeremy Englert F5
- Consigue Underwood de James BestF5
- WP-Forge por Thomas E. Vasquez F5
- FoundationPress por Ole Fredrik Lie F5
- Grunterie basado en Reverie de George Spake F5
- Tema Ingliside para WordPress por wLc Designs F5
- Clase de menú Walker para WordPress por wLc Designs F5
- Nassim de LebCit
- Foundation Timber por Mike Martel
- Picotto de Jonathan Urban F5
- Spine de Paul de Wouters F5
- NARGA de Nguyễn Đình Quân F5
- WP Premium por R. Bhavesh F5
- Piedra angular de Stephen Mullen F5
- Tema de inicio de WordPress por Simon Padbury
- Ensueño de Zhen F5
- Rootbeer de Josh Medeski F5
- Yeti limpio de Serene Themes F5
- Yeti verde de Serene Themes F5
- Basey de Zach Schnackel F5
- FoundationWP por Geoff Graham F5
- Inicio de la aplicación por Josh Pollock F5
- Tema de inicio por Drew Morris F4
- Flair de Bronson Quick F4
- Reactor de Anthony Wilhelm F4
- F415 de Gabor Javorszky F4
- SmartAdapt de netbiel F4
- Foundation Underscore por Leonard Bogdonoff F4
- Required + Temas por requerido + F3.25
- Yeti por Modular Learning F3.2
- WP-Foundation por 320press F3
- Grunterie de Adam Powell F5
Drupal
- Tema Drupal de la Foundation ZURB por Kevin Quillen F5
- Tema de Zoundation por Andrea Burton y Jeff Graham, FunnyMonkey F4
- Foundation Zurb apoyando Drupal 8 por Chris Lee e Ishmael Sanchez F4 F3.2
- Tema Drupal por Drew Kennelly F4
Ghost
- Tema Ghost con flujo de trabajo Grunt Scss y Blog de Julian Cwirko F5
- Yeti Ghost para Ghost de Slate Ballard F4
- Ghost para Ghost de Jim Bennet F5
Jekyll
- Noita de Anatol Broder F5
- Foundation Jekyll + por Leonard Bogdonoff F4 Sass
- GrooveMonkey de Dave Cohen F3 CSS
- Esqueleto del sitio de Jekyll cargado construido sobre la Foundation por Evan Sosenko F5
Joomla
- Revamp Framework Foundation v5 para Joomla 3.x
- Joomber UI por The Template Blog F5
- Plantilla Joomla de Arnold Mwumva Ford, Meridian Softech F5
- Plantilla Joomla de Antony Doyle, Siege21 F4
Middleman
- Esqueleto del Middleman de Andrea Moretti F5
- Foundation Middleman por Brian Lachniet F5
- Plantilla de Foundation Middleman por Matt Olson F4
Contao
- Ampliación repleta de: funciones Foundation for Contao de Monique Hahnefeld F5
- Foundation para Contao también Slick for Contao por Blair Winans F5
Otros temas de CMS
- Foundation para Silverstripe por Ryan Wachtl F5
- Foundation para NationBuilder por Ian Patrick Hines F5
- Laravation para Laravel por George Spake F5
- OctoFound para Octopress por Anne Johnson F5
- Tema de flexibilidad para MODX por Menno Pietersen F4
- Foundation para Moodle por Danny Wahl F4
- Foundation para Omeka de Kate Lomax F4
- Foundation para Orchard CMS por Codeplex F4
- PyroYeti para PyroCMS por Timothy Asp F4
Ecommerce
Shopify
- Foundationify Shopify Theme by Luke Bussey F5
- Shopify Foundation Theme Framework by Cam Gould F5
Magento
- Waterlee Boilerplate by Jake Sharp F5
- Magento & Foundation by Nandroid F3
Cubecart
- Cubecart Ecommerce Theme by Al Brookbanks F5
Backend
Django
- A Pinax theme based on Foundation by Christopher Clarke, Kwesi Aguillera & Lendl Smith F3
- Zinna Django Blog Theme by Augustin Laville F5
Meteor
- Foundation 5 with Scss for Meteor & Blog by Julian Cwirko F5
- Meteor Package by Eric Wallace F4
- Foundation Smart Package by MixinLabs & Arturas Lebedevas F5
- Foundation Smart Package by MixinLabs & Arturas Lebedevas F5
.NET
- NuGet Package for ASP.Net MVC by Edward Charbeneau F5 F4
- Kartris E-commerce by Cactusoft Ltd. F4
Otras Plantillas de Backend
- A Foundation Wrapper for Flask (Python) by Pedro Baumann F5
- Pyramid Scaffold (Python) by Parker Pinette F4
- Starter template for a Foundation based site running on Express (Node / io.js) by Nguyen Ly F5
- Responsive CodeIgniter BoilerPlate (PHP) by Arnold Mwumva Ford, Meridian Softech F3
- Slim Fast for Slim (PHP) by Gargoyle F4
- Ember Foundation Sass F5
- Simple user management system utilizing Slim Framework, Facebook php sdk, Swift Mailer, PHPExcel, Foundation, & jQuery by Garrett R. MorrisF5
Plantillas de Pago
Colecciones de temas de la fundación
- FoundationMade
- Bosque temático
- Webpop
- FoundationDeck
- Temas Themplio para la Fundación
- Temas Themplio para Foundation con Joomla
Temas individuales
- Atlético para Bigcommerce de Sprout Commerce
- Claridad para Bigcommerce de Sprout Commerce
- Woocommerce por WPTHM
- Tema PolarCore para Magento en AddonBakery
- Base de maquillaje en blanco y negro para Shopify
- Plantilla empresarial de Chad Connally
Creación de prototipos
Las maquetas nos cuentan una historia. Crea un prototipo en poco tiempo con estos útiles recursos de creación de prototipos.
Plantillas PSD
- Kit de interfaz gráfica de usuario (PSD) de Ole Fredrik LieF5
Creación rápida de prototipos
- Rails FormBuilder con Foundation de Marnen Laibow-Koser
- ditbi por Rob Levin Video de demostración de 4 minutos
- Creación rápida de prototipos con la base Serve de Ale Muñoz F4
Kit de interfaz de usuario de base para Axure
Kit de interfaz de usuario de base para Axure
de Ole Fredrik Lie F5
Otros recursos de creación de prototipos
- Kit de base Sketch de Stephen Way F5
- Foundation for Sites 5 Sketch Kit de 4ebstudio F5
- Kit de navegación Sketch Foundation de Tim Skaggs F5
- Maquetas de bases de WireframeSketcher F5
Instalar recursos
¿Quieres conseguir Foundation de una forma diferente? Puede obtener aplicaciones ingeniosas, como Cactus y CodeKit. Prueba un generador Yeoman. ¡Ellos harán el trabajo por ti!
CodeKit
Una aplicación para Mac que le permite crear sitios web más rápido con Foundation usando CodeKit. Con cero configuración y Bower integrado en el sistema, CodeKit puede compilar cualquier idioma con actualizaciones de un solo clic.
Cactus
permite crear sus sitios web localmente con la facilidad y flexibilidad de Foundation. El uso de Cactus le permite poner los componentes de su sitio web junto con su servidor local sin tener que configurar un entorno de servidor como Ruby.
Generador Yeoman
- generator-aspnet-xtianus – Generador de Yeoman para aplicaciones ASP.NET 5 de Christian Matthias F5
- FrontCow – Foundation + Bourbon + FontAwesome + Atomic Design por Benjamin Cabanes F5
- Generator Foundation Five de bauschan F5
- Generador ZF5 de Julian Cwirko F5
- Fundación Yeoman por Vincent Mac F5
- Generator-Foundation-Ext por James Akers F5
- Yeoman 1.0-Foundation 4 por Leonard Bogdonoff F4
Ruby on Rails Sass Gems
- Foundation Icons 2 por JP Nowak
Flujos de trabajo
- Pelican (un generador de sitios web estáticos) usando Foundation & Demo y artículo de Steve Piercy F5
- Fundación Alfred por Josh Medeski F5