Para empezar
Merlín es una aproximación al diseño atómico construído día a día por la experiencia de permanentes desarrollos, buscando generar un lenguaje común y versátil entre diseñadores y desarrolladores front y back end, para así agilizar procesos y optimizar tiempos.
Átomos
Son unidades discretas. Juntando dos o más de ellas se pueden construir moléculas y cuando se juntan moléculas, organismos.
Revisa los átomos
Organismos
Módulos funcionales, tanto en HTML como en PHP (Wordpress). Todos tienen su propio SCSS y algunos de ellos tienen condicionantes, como clases o archivos JS asociados.
Revisa los organismos
Para los diseñadores
Wireframes/Diseño
-
Para empezar tu nuevo proyecto, puedes descargar:
- La versión completa de Merlín: Esta incluye todos los módulos diseñados hasta el momento, pero que no necesariamente han sido desarrollado por nuestros programadores.
Iconografía
- Descarga acá la versión actual (1.5) de la fuente iconográfica de Merlín para comenzar a diseñar tu nuevo proyecto.
- Descarga acá la versión más actualizada de íconos de Merlín para comenzar a diseñar tu nuevo proyecto.
- Si no se adecúa, puedes comenzar a hacer una nueva familia. Recuerda subirla a Icomoon para que el desarrollador pueda programar sin problemas.
Para los desarrolladores
Estructura del proyecto:
Merlín presenta archivos ordenados por carpetas y subcarpetas con el objetivo de cuidar el orden:
- 404.php
-
components/
-
custom/
-
js/
-
scss/
- _buttons.scss
- _colors.scss
- _fonts.scss
- _header.scss
- _layout.scss
- _modal.scss
- _responsive_desktop.scss
- _responsive_phone.scss
- _responsive_tablet.scss
- _slick.scss
- _wysiwyg.scss
-
js/
-
merlin/
-
icons/
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
- selection.json
- style.css
-
js/
- animacion-anclas.js
-
aos/
- aos.css
- aos.js
- header.js
-
jquery/
- jquery-ui.js
- jquery.js
-
lightgallery/
-
fonts/
- lg.eot
- lg.svg
- lg.ttf
- lg.woff
- lg-thumbnail.js
- lg-thumbnail.min.js
- lg-video.js
- lg-video.min.js
- lightgallery.css
- lightgallery.js
-
fonts/
- modal.js
- scripts.js
- simpleParallax.min.js
-
slick/
- slick.css
- slick.min.js
- toggle.js
-
scss/
- _animations.scss
- _flex.scss
- _fonts.scss
- _general.scss
- _icons.scss
- _mixins.scss
- _reset.scss
- _responsive_desktop.scss
- _responsive_phone.scss
- _responsive_tablet.scss
-
icons/
-
custom/
- footer.php
- functions.php
- header.php
- index.php (este archivo debe modificarse en tu proyecto)
-
organisms/
- blocks/
- sliders/
- page.php
- screenshot.png
- search.php
- searchform.php
- single.php
- style.css
- style.scss
JS:
Merlín trae unos archivos básicos que pueden aplicar para gran cantidad de proyectos:
-
components/
-
merlin/
-
js/
- animacion-anclas.js: Al elemento href que tenga como destino una id dentro de la misma página, debe añadírsele la clase .scroll-move y se animará el movimiento del scroll con una transición fluida.
- aos/: Es una libería para generar animaciones mientras el usuario hace scroll. La documentación completa la puedes encontrar haciendo click acá .
- jquery/: Se encuentran los archivos jquery.js (v3.4.1) y jquery-ui.js(v1.12.1)
- jquery/: Librería para generar galerías de videos/fotos. La documentación completa la puedes encontrar haciendo click acá .
- modal.js: Todo aquello necesario para hacer funcionar los distintos modals en Merlín.
- scripts.js: Scripts generales que podrían aplicar a muchos proyectos. Entre ellos: Igualar elementos en altura, la llamada a tabs ó los triggers para el menú en dispositivos móviles
- simpleParallax.min.js: Parallax en aquellos elementos que sea necesario aplicarlo (documentado en Átomos). La documentación completa de la librería la puedes encontrar haciendo click acá .
- slick/: Este script (y su .css básico) son aplicados en todos los sliders de Merlín. Debe eliminarse sólo en el caso de que no exista ningún carrusel en el proyecto. La documentación completa la puedes encontrar haciendo click acá .
- toggle.js: Para hacer toggle en el elemento que incorpore las clases correctas.
-
js/
-
merlin/
SCSS de Merlín:
Estos estilos no son editables, ya que manejan estructuras bases para que tu construyas el repertorio de magia de Merlín. Estos archivos se encuentran en la carpeta components/merlin/scss/:
- _reset.scss: Quita atributos que vienen por default en navegadores (como márgenes, paddings), etc.
- _mixins.scss: Este es un archivo sumamente importante, porque en ocasiones puede ahorrarte tiempo en soluciones que ya están desarrolladas. Pinchando acá puedes saber más de los @mixins de Merlín.
- _icons.scss: Llama a la familia tipográfica de íconos de merlín. También crea clases por cada ícono.
- _fonts.scss: Este archivo es distinto al que se encuentra en components/customs/scss/, ya que este maneja atributos generales, como el peso, la alineación/justificado y tamaños.
- _general.scss: Se declaran los contenedores, elementos gráficos, los breakpoints para el responsive, columnas y grillas, entre otras cosas.
- _flex.scss: Distintos aspectos de un elemento con display: flex.
- _animations.scss: Efectos de animación (zoom, zoom-out) y transiciones para hacer mas "suave" transiciones entre :hover o lo que estimes conveniente.
- _responsive_desktop.scss: Estilos para alguna resolución de escritorio más pequeña.
- _responsive_tablet.scss: Estilos para tablets.
- _responsive_phone.scss: Estilos para smartphones.
SCSS Customizable:
Puedes comenzar a editar todos aquellos .scss que se encuentran en la carpeta components/custom/scss/ para darle vida a tu nuevo proyecto:
- _colors.scss: Generar variables para los distintos colores.
- _fonts.scss: Definir la(s) familia(s) tipográfica(s).
-
_header.scss: Vienen ya, estilos pre-definidos para la cabecera, tales cómo:
- ul.main-menu: Listado del menu principal
- ul.sub-menu: Estilos para un sub-menú
- .nav-down, .nav-up, .nav-top: Estilos para que la cabecera aparezca/desaparezca cuando el usuario hace scroll. Esta es dependiente del script header.js ubicado en /components/melin/js/header.js.
- .menu-responsive: Menú que rezca/desaparezca cuando el usuario hace scroll. Esta es dependiente del script header.js ubicado en /components/melin/js/header.js.
- _modal.scss: Estilos para el modal.
- _slick.scss: SCSS generales para la librería slick.js, utilizada para los distintos sliders de Merlín.
- _wysiwyg.scss: Muchos aspectos del editor WYSIWYG (What You See Is What You Get) ya se encuentran parametrizados en Merlín. Este archivo ya tiene desarrollado estilos básicos para párrafos, citas, galerías, tablas, etc.
- _buttons.scss: Estilos para los botones.
- _responsive_desktop.scss: Estilos para alguna resolución de escritorio más pequeña.
- _responsive_tablet.scss: Estilos para tablets.
- _responsive_phone.scss: Estilos para smartphones.
Merlín para Wordpress
Instalación de un nuevo proyecto:
- Comienza por lo básico: Descarga la última versión de Wordpress en Español (es_ES, no es_CL).
- Crea una nueva carpeta dentro de want.cl/dev/ con el nombre de tu proyecto y añade los archivos del zip ahí.
- Mientras se suben los archivos al servidor, pídele a tu jefe de área que cree una nueva bbdd.
- Duplica el archivo wp-config-sample.php que se encontrará en la raíz de tu nuevo proyecto y ponle el nombre wp-config.php.
- Asígnale la bbdd, el user y pass que existe para desarrollo. Si no sabes cual es, pregúntale.
El tema:
- Descarga el tema merlin-want.
- Cambia el nombre de la carpeta del tema por el de tu proyecto. Jamás debe dejarse el nombre merlin-want.
- Sube la carpeta a want.cl/dev/tu-proyecto/wp-content/themes/.
-
Debes Modificar ciertos atributos en el archivo style.scss:
- Theme Name: Por el nombre del proyecto
- Theme URI: Por la URL del proyecto
- Version: Generalmente es 1.0, pero dependiendo del cliente, esta puede cambiar (por ejemplo, si es una postventa).
- Description: Lo más probable es que este campo pueda ser eliminado, sin embargo, si deseas, puedes rellenarlo para hacer más precisa la documentación del proyecto.
- Reemplazar el archivo screenshot.png. Puedes pedirle al diseñador a cargo del proyecto que te genere un archivo .PNG de 1200x900 del home.
- También debes modificar el archivo index.php para comenzar en tu nuevo home.
- Activa el tema desde el panel de Wordpress.
- Ya puedes comenzar a crear nuevas plantillas, así como también modificar y añadir nuevos archivos en components/custom.
ACF Pro:
- Ve al Wordpress de tu proyecto e instala ACF Pro (si no lo tienes, consúltale a algún colega por la versión de pago que tiene Want y su Key).
- Antes de empezar a generar nuevos ACF para tu proyecto, te recomendamos que veas la página de . Ahí encontrarás documentación completa sobre qué módulos (y cómo se llaman) existen ya en Merlín.
- Entendemos que no todos los sitios/softwares web son iguales, sin embargo, existen patrones que se repiten. Levanta la información de cuáles en Merlín se parecen a los de tu proyecto y anótalos.
- Dirígete a la pestaña Campos Personalizados -> Herramientas.
- Selecciona aquellos módulos que anotaste y expórtalos.
- Una vez instalado, dirígete a la pestaña Campos Personalizados -> Herramientas.
- En el recuadro Importar, selecciona el archivo importado desde Merlín e impórtalo en tu nuevo proyecto
Functions:
Ya vienen algunas funciones básicas en Merlín. Acá las revisamos:
<?php
/*-------------------------------------------------------------*/
/*--- No mostrar la version de Wordpress dentro del <head> ----*/
/*-------------------------------------------------------------*/
function eliminar_version_wordpress() {
return '';
}
add_filter('the_generator', 'eliminar_version_wordpress');
/*-------------------------------------------------------------*/
/*-------------- Eliminar barra de administración -------------*/
/*-------------------------------------------------------------*/
function quitar_barra_administracion() {
return false;
}
add_filter( 'show_admin_bar' , 'quitar_barra_administracion');
/*-------------------------------------------------------------*/
/*---------------------- Eliminar Tags ------------------------*/
/*-------------------------------------------------------------*/
add_action('init', 'remove_tags');
function remove_tags(){
register_taxonomy('post_tag', array());
}
/*-------------------------------------------------------------*/
/*--------- Permito imagen destacada en los Posts -------------*/
/*-------------------------------------------------------------*/
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );
/*-------------------------------------------------------------*/
/*------------------ Menús personalizados ---------------------*/
/*-------------------------------------------------------------*/
register_nav_menus( array(
'Menu principal' => 'Menu principal',
'Menu footer' => 'Menu footer',
));
/*-------------------------------------------------------------*/
/*--- Le añado la clase "active" al elemento actual del menu ---*/
/*-------------------------------------------------------------*/
add_filter('nav_menu_css_class', function ($classes, $item, $args, $depth) {
//Todas las diferentes clases "active" añadidas por WordPress
$active = [
'current-menu-item',
'current-menu-parent',
'current-menu-ancestor',
'current_page_item'
];
//Si coincide, añade la clase "active"
if ( array_intersect( $active, $classes ) ) {
$classes[] = 'active';
}
return $classes;
}, 10, 4);
/*----------------------------------------------------------------------------*/
/*---------------------------- Eliminar Gutenberg ----------------------------*/
/*----------------------------------------------------------------------------*/
add_filter('use_block_editor_for_post', '__return_false', 10);
add_filter('use_block_editor_for_post_type', '__return_false', 10);
/*-------------------------------------------------------------*/
/*--------- Compatibilidad del tema con Woocommerce -----------*/
/*-------------------------------------------------------------*/
function my_theme_setup() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
/*-------------------------------------------------------------*/
/*------------- Añadimos los CSS y JS del Theme ---------------*/
/*-------------------------------------------------------------*/
function merlin_styles_and_scripts() {
wp_deregister_script( 'jquery' );
//jQuery
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/components/merlin/js/jquery/jquery.js');
//jQuery UI
wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/components/merlin/js/jquery/jquery-ui.js');
//Slick slider
wp_enqueue_script( 'slick', get_template_directory_uri() . '/components/merlin/js/slick/slick.min.js');
wp_enqueue_style( 'slick-style', get_template_directory_uri() . '/components/merlin/js/slick/slick.css');
//Lightgallery
wp_enqueue_script( 'lightgallery', get_template_directory_uri() . '/components/merlin/js/lightgallery/lightgallery.js');
wp_enqueue_style( 'lightgallery-style', get_template_directory_uri() . '/components/merlin/js/lightgallery/lightgallery.css');
//AOS
wp_enqueue_script( 'aos', get_template_directory_uri() . '/components/merlin/js/aos/aos.js');
wp_enqueue_style( 'aos-style', get_template_directory_uri() . '/components/merlin/js/aos/aos.css');
//Scripts de Merlín
wp_enqueue_script( 'scripts', get_template_directory_uri() . '/components/merlin/js/scripts.js');
wp_enqueue_script( 'simple-parallax', get_template_directory_uri() . '/components/merlin/js/simpleParallax.min.js');
wp_enqueue_script( 'modal', get_template_directory_uri() . '/components/merlin/js/modal.js');
wp_enqueue_script( 'toggle', get_template_directory_uri() . '/components/merlin/js/toggle.js');
wp_enqueue_script( 'header', get_template_directory_uri() . '/components/merlin/js/header.js');
wp_enqueue_script( 'animacion-anclas', get_template_directory_uri() . '/components/merlin/js/animacion-anclas.js');
//Scripts de Organismos: Sliders
wp_enqueue_script( 'slider-1', get_template_directory_uri() . '/organisms/sliders/01/js/slider-1.js');
wp_enqueue_script( 'slider-2', get_template_directory_uri() . '/organisms/sliders/02/js/slider-2.js');
wp_enqueue_script( 'slider-3', get_template_directory_uri() . '/organisms/sliders/03/js/slider-3.js');
wp_enqueue_script( 'slider-4', get_template_directory_uri() . '/organisms/sliders/04/js/slider-4.js');
wp_enqueue_script( 'slider-5', get_template_directory_uri() . '/organisms/sliders/05/js/slider-5.js');
wp_enqueue_script( 'slider-6', get_template_directory_uri() . '/organisms/sliders/06/js/slider-6.js');
wp_enqueue_script( 'slider-7', get_template_directory_uri() . '/organisms/sliders/07/js/slider-7.js');
//Scripts de Organismos: Bloques
//Bloque #3
wp_enqueue_script( 'count-up', get_template_directory_uri() . '/organisms/blocks/03/js/count-up.js');
wp_enqueue_script( 'in-view', get_template_directory_uri() . '/organisms/blocks/03/js/in-view.js');
wp_enqueue_script( 'block-3', get_template_directory_uri() . '/organisms/blocks/03/js/block-3.js');
//Bloque #5
wp_enqueue_script( 'block-5', get_template_directory_uri() . '/organisms/blocks/05/js/block-5.js');
}
add_action( 'wp_enqueue_scripts', 'merlin_styles_and_scripts' );
?>