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 un cúmulo de unidades discretas. Juntando dos o más de ellas se pueden construir moléculas y cuando se juntan moléculas, organismos.
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.
Para los diseñadores
Wireframes/Diseño
Iconografía
Para los desarrolladores
Estructura del proyecto:
Merlín presenta archivos ordenados por carpetas y subcarpetas con el objetivo de cuidar el orden:
JS:
Merlín trae unos archivos básicos que pueden aplicar para gran cantidad de proyectos:
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/:
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:
Merlín para Wordpress
Instalación de un nuevo proyecto:
El tema:
ACF Pro:
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' );
?>