Crea tu propio theme base para WordPress
con Foundation
9 de febrero de 2019
¿Qué quería hacer?
Una estructura que pudiera controlar
Entender y trabajar con HTML y CSS
Controlar las vistas y la información tanto en back como en front
Entender mejor el código
Ser productivo
¿Qué es
Foundation?
The most advanced
responsive front-end
framework in the world.
Framework CSS
Prototipar y llevar a producción de una manera muy ágil y rápida.
Pensado para que el diseño se vea bien en cualquier dispositivo.
Es semántico, legible, fácil de aprender y totalmente personalizable.
¿Qué es un framework?
Es una herramienta pensada para ahorrarnos tiempo a la hora de programar o diseñar ya que reúne un conjunto de componentes, librerías y acciones predefinidas.
Nos ayuda...
- Mobile First
- Responsive
- Rapidez
- Buenas prácticas
- Aprendizaje
No estamos solos
HTML
CSS
JAVASCRIPT
Fuente: https://insights.stackoverflow.com/survey/2018/#technology
¿Cómo Integramos foundation
en WordPress?
_S UNDERSCORES
website: https://underscores.me
Los pasos...
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
Los pasos...
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
_S UNDERSCORES
foundation
Los pasos...
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
// Añadimos el CSS de foundation //
wp_enqueue_style( 'testwordcamp-foundationCSS', get_template_directory_uri() . '/foundation/css/foundation.css',false,'','all');
wp_enqueue_style( 'testwordcamp-style', get_stylesheet_uri() );
// Añadimos el JS de foundation //
wp_enqueue_script( 'testwordcamp-foundationjs', get_template_directory_uri() . '/foundation/js/vendor/foundation.js', array(), '', true );
// Añadimos el JS APP de foundation //
wp_enqueue_script( 'testwordcamp-foundationjs-app', get_template_directory_uri() . '/foundation/js/app.js', array(), '', true );
functions.php
Llamamos el CSS y JS de foundation para que suceda la magia
Los pasos...
Descargamos Foundation y Underscores
Integramos la carpeta de Foundation en el theme
Llamamos los archivos CSS y JavaScript desde la plantilla
functions.php
Maquetamos
Grid CSS
12 columnas
3 columnas
9 columnas
Underscores sin foundation
Underscores con foundation
Controlar el grid
<div id="page" class="site grid-container">
<div id="content" class="site-content grid-x grid-padding-x">
<div id="primary" class="content-area cell medium-8 large-9">
<main id="main" class="site-main">
<div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-3">
<p>Contenido / Loop</p>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<aside id="secondary" class="widget-area cell medium-4 large-3">
<p>Contenido / Sidebar</p>
</aside><!-- #secondary -->
</div><!-- #content -->
</div><!-- #page -->
¿Qué más podemos hacer aparte de definir un layout?
Mostrar u ocultar contenido
<!-- Tamaño de la pantalla -->
<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>
<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
<!-- Orientación del móvil o tablet -->
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
Botones
<!-- Tamaños -->
<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>
<!-- Colores -->
<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>
Y decenas de acciones más...
!EXPLORA LA DOCUMENTACIÓN¡
!APRENDE¡
¿Alternativas?
¡Muchas!
Resumen / Recursos
Descargas Foundation: https://foundation.zurb.com _S UNDERSCORES: https://underscores.me Proyecto usado Github: https://github.com/helmercol/testWordCampGC2019 Recursos gráficos Pixabay: https://pixabay.com GIPHY: https://giphy.com Unsplash: https://unsplash.com Info Grid Layout y Flex https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout
Incluir CSS y Javascript en WordPress
https://developer.wordpress.org/themes/basics/including-css-javascript/
Helmer
Galvis
rrss
twitter / instagram
@helmercol
web
hgrdesign.es
galvisrojas.eu
¡GRACIAS!
¡TOTALES!
WordCamp Gran Canaria 2019
By helmercol
WordCamp Gran Canaria 2019
Presentación para la ponencia en WordCamp Gran Canaria 2019
- 776