Theming

Cocomore

Casanova — Tue, 27 Mar 2018 18:44:38 +0000

Cocomore

Cocomore es una agencia alemana con la que Front.id colabora habitualmente. Hemos desarrollado juntos numerosos proyectos de éxito y en esta ocasión nos pidieron que desarrollármos su sitio web corporativo.

Desarrollamos toda la parte de Frontend, la nueva capa de estilos así como la creación de aquellos componentes que ellos nos propusieron para el nuevo rediseño. El proyecto fue totalmente pensado bajo el concepto de Mobile first.

www.cocomore.com

By Casanova Tue, 03/27/2018 - 20:44

Backend Developer

Frontend Developer

Drupal

Theming

CSS

Drinki

Casanova — Tue, 27 Mar 2018 18:42:22 +0000

Drinki

Drinki (que ahora ha cambiado a DUSK) es en realidad un sitio web que promueve un APP para encontrar bares según los gustos del usuario e incluso localiza bares alrededor de los usuarios que tienen ofertas/promociones. Front.id desarrolló el frontend y el backend con Simphony, con integración de wordpress; animaciones y efectos.

https://drinki.com

By Casanova Tue, 03/27/2018 - 20:42

Backend Developer

Frontend Developer

Drupal

JavaScript

CSS

EOI

Casanova — Tue, 27 Mar 2018 18:35:29 +0000

EOI

Participamos tanto en el desarrollo del Backend como en el Frontend de este diseño que proponía la creación de componentes con un claro comportamiento responsive para la Escuela de Organización Industrial.

El resultado es un hermoso portal de educación en línea.

www.eoi.es

By Casanova Tue, 03/27/2018 - 20:35

Backend Developer

Frontend Developer

Drupal 7

Theming

CSS

La Drupalera

Casanova — Tue, 27 Mar 2018 18:34:28 +0000

La Drupalera

Para este proyecto desarrollamos un sitio web ligero, limpio y sencillo. Realizamos el diseño y desarrollo de ambos: backend y frontend.

También creamos algunos efectos con Parallax, este recurso es muy útil para dar a la web un cierto dinamismo y contrarrestar la planitud. Tampoco debemos olvidar que los dispositivos móviles promueven la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para añadir valor al tedioso scroll y sorprender al usuario con algo que no se espera.

www.ladrupalera.com/es

By Casanova Tue, 03/27/2018 - 20:34

Backend Developer

Frontend Developer

Drupal

CSS

Theming

Paralímpicos

Casanova — Tue, 27 Mar 2018 18:17:31 +0000

Paralímpicos

En este proyecto migramos y adaptamos su previo gestor de contenidos basado en asp.net a Drupal. Realizamos un nuevo diseño para el frontend del sitio basado en varios requerimientos específicos solicitados por el cliente. Teniendo en cuenta también las restricciones de accesibilidad (AA y AAA en algunos contenidos) y responsiveness solicitadas.

Una vez finalizada la migración, apoyamos al Comité en el diseño y desarrollo de una nueva utilidad en el portal para el envío de boletines mensuales y comunicación corporativa en línea, así como de un nuevo portal de contenidos multimedia. Diseñamos y desarrollamos tanto el backend como el frontend.

www.paralimpicos.es

By Casanova Tue, 03/27/2018 - 20:17

Backend Developer

Frontend Developer

goCO2free

Casanova — Tue, 27 Mar 2018 18:07:17 +0000

goCO2free

Ayudamos a GoCo2Free a crear una experiencia en línea que educa y anima a las comunidades a rastrear y reducir su huella de carbono de una manera competitiva, pero positiva.

Proporcionamos diseño y consultoría de UX para ayudar a agilizar los flujos de usuarios, a la vez que nos centramos en las capacidades del panel de control y el seguimiento. Es una plataforma multidominio, cada dominio pertenece a una ciudad diferente de EE.UU., y cada uno tiene su propio equipo para administrar el sitio. Colaboramos con la agencia Lullabot en este proyecto y actualmente somos el equipo principal de desarrollo.

www.communityclimate.org

By Casanova Tue, 03/27/2018 - 20:07

Backend Developer

Frontend Developer

Project Manager

JavaScript

Drupal

CSS

Dolce Gusto Advents Calendar

Casanova — Tue, 27 Mar 2018 17:57:36 +0000

Dolce Gusto Advents Calendar

A través de js, CSS/SASS hemos creado animaciones, aplicado la capa responsive correspondiente y obviamente el layout de la página de inicio. Creamos la animación principal y el menú interactivo sobre la animación. Utilizamos handlebars para generar componentes HTML independientes y manejables como el día activo, el modal, el modal de los días futuros, etc. Aquí tienes algunos ejemplos de piezas realizadas:

www.dolce-gusto.de/neues-premium-design

ernaehrungsstudio.nestle.de/adventskalender-gewinnspiel

By Casanova Tue, 03/27/2018 - 19:57

Frontend development

JavaScript

CSS

New JS plugin: DOMElementRelocation

Capy — Mon, 08 Oct 2018 15:31:01 +0000

New JS plugin: DOMElementRelocation

Submitted by By Capy on Monday, October 8, 2018 - 17:31.

I present to you DOMElementRelocation. This is a plugin created to help front-end (like us) to relocate DOM elements to a new position based on the current breakpoint.

Use case

Lets suppose you have a search form at the header of a web page. Now suppose the mobile design requires this form at the sidebar above the search filters...

The problem on this case is the header and the sidebar are not sharing the scope. You can't just tell via CSS "move the search box from header to the sidebar"

So here comes DOMElementRelocation in. This plugin allows you to accomplish this via js. The elements can be moved from its original location and come back to the original place when its needed.

Usage

<script src="js/jquery.js"></script>
<script src="/js/mediaQueryEvents.jquery.js"></script>
<script src="../dist/DOMElementRelocation.js"></script>

$(function () {

  new DOMElementRelocation(
    {
      // Define the breakpoints. there is no limit 
      // and name them as you want.
      breakpoints: {
        desk: '(min-width: 1230px)',
        mob: '(min-width: 0px) and (max-width: 1229px)'
      },
      // Declare as many elements you want.
      elements: [
        {
          // The element.
          element: '.search-form',
          // Move to the footer when "mob" breakpoint gets reached.
          mob: '.sidebar',
          // keep the original position.
          desk: false
        }
      ]
    });

});

On this example (assuming the .search-form is located at the header), the element will be moved to the sidebar when the browser size is less than 1229px and will keep it's original position when reach desktop.

For further info please see https://github.com/frontid/DOMElementRelocation

Drupal 8: Templates a nivel form element

Capy — Mon, 16 Oct 2017 16:57:35 +0000

Drupal 8: Templates a nivel form element

Submitted by By Capy on Monday, October 16, 2017 - 18:57.

Alguna vez pasa que necesitamos modificar el HTML que genera un elemento de formulario. No me refiero a un form sino mas bien al HTML que conforma un elemento de tipo input, password, email, select, etc.

Este es un ejemplo típico del output de drupal para un campo input normal de tipo texto:

Y su codigo:

Pues bien, imaginen ahora que necesitamos que el label vaya después de la description, o que el input queremos que esté contenido en un div. Todo lo anterior requiere que tengamos control sobre el template de este tipo de campo. ¿Como lo hacemos? Vamos a ello.

El hook_theme_suggestions_HOOK_alter()

Drupal de serie nos permite usar un template que ya está en el core y que contiene el HTML que se va a generar para los elementos de formulario en general. Pero nosotros queremos ir un poco mas allá y disponer de la posibilidad de modificar solo el HTML de tipos específicos de elementos de formulario.

Para eso usamos hook_theme_suggestions_HOOK_alter() que nos permite añadir template suggestion al template form_element (que es el que define a form-element.html.twig):

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MITHEME_O_MODULO_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) {
  $suggestions[] = 'form_element__type__' . $variables['element']['#type'];
}

¿Y que hemos conseguido con el código anterior? Pues antes del alter solo existía "form-element.html.twig" y ahora hemos conseguido tener templates granulares para cada tipo de elemento:

// Template original que viene en el core:
form-element.html.twig

// Nuevos templates disponibles para que los uses en tu theme:
form-element--type--textfield.html.twig
form-element--type--email.html.twig
form-element--type--password.html.twig
form-element--type--select.html.twig
form-element--type--ETCETERA.html.twig

Hagamos algo con los templates

Bueno ya tenemos entendidos y bien gestionados los templates. Ahora sigamos con nuestro ejemplo. Copia "form-element.html.twig" desde el core o desde el theme desde el que estés heredando tu subtheme y ponlo dentro de la carpeta de "templates" de tu theme.

Tip: Ubicaciones de form-element.html.twig:

// Si tu theme NO hereda de algún theme del core
web/core/modules/system/templates/form-element.html.twig

// Si tu theme hereda de algún theme del core:
web/core/themes/classy/templates/form/form-element.html.twig
web/core/themes/stable/templates/form/form-element.html.twig

Y ya lo tienes!. Solo te queda limpiar el cache y modificar la posición de los label, el campo (el input), la description y hacer todo lo que necesites en dicho campo.

Chau!