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.

@ZURBfoundation

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!

https://www.emezeta.com/articulos/alternativas-a-bootstrap

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!

Made with Slides.com