Notariado Web Theme

Esta documentación pretende ayudar a mantener las buenas practicas en el desarrollo de frontal Liferay.

Reglas para la aprobación de los pull Merge/pull request

• Utilizar la separación de los componentes en su respectivo directorio: Según el caso
• Utilizar los colores incluidos en las variables:
• Utilizar la anidación de las clases según las reglas de la API scss.

Instalación

Gestor de paquetes [npm], compilación con [gulp].

npm install
gulp build

Despliegue con [gulp] en desarrollo.

gulp deploy

Documentación

Frameworks utilizados

• Bootstrap: https://getbootstrap.com/docs/4.3/layout/grid/ Desarrollo
• Minicss: https://minicss.org/docs Desarrollo
• Lexicon: https://liferay.design/lexicon/core-components/actions-definition Desarrollo
• Clayui: https://clayui.com/docs/components/alerts.html Desarrollo

Referencias

• Variables scss basicas: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
• Rejillas: https://getbootstrap.com/docs/4.3/layout/grid/
• Componentes:
  • https://clayui.com/docs/components/
  • https://getbootstrap.com/docs/4.3/components/alerts/

Como se hace?

• Añadir componente desde uno de los framework Liferay.

  Si añadiendo el código html del componente este no se visualice correctamente, sera necesario añadirlo manualmente.

  Añadiremos @import "[libreria]/[Nombre componente]";, desde nuestro custom.scss.

• Modificar componente existente

  Vamos al directorio build/css y localizamos el archivo a sobrescribir, luego creamos un fichero con el mismo nombre dentro del directorio src/css

  Ejecutamos gulp build

• Añadir componente propio.

  Si se trata de un componente complejo añadimos un fichero dentro de /src/css/component/Mi_Componente.scss

  Añadimos un import en custom.scss

  Podemos añadir pequeños componentes dentro de /src/css/component/little_utils.scss

• Parchear un error de Liferay framework

  En caso de detectar un error de visualización en el theme podemos parchear globalmente el cambio añadiendo el fix en, /src/css/_custom.scss.

Extructura de directorios

• theme-name/
  • src/
    • css/
      • component nuevos componentes desarrollados para notariado
      • custom componentes Liferay personalizados
      • partials sobreescritura de variables, fuentes, y otras utilidades
      • portlet personalización de los elementos propios de Liferay portlet
      • _clay_custom.scss
      • _clay_variables.scss
      • _custom.scss personalizacon generica de componentes
      • _liferay_variables_custom.scss
    • images/
      • (custom images)
    • js/
      • main.js
    • templates/
      • init_custom.ftl
      • navigation.ftl
      • portal_normal.ftl
      • portal_pop_up.ftl
      • portlet.ftl
    • WEB-INF/
      • liferay-look-and-feel.xml
      • liferay-plugin-package.properties
    • src/
      • resources-importer/
  • liferay-theme.json
  • package.json

Tips scss

• Gestion de los espacios entre la caja: https://getbootstrap.com/docs/4.0/utilities/spacing/

Control responsivo de los componentes (Según las columnas cols-X) -> donde X la medida

• @include media-breakpoint-only(xs) Se muestra unicamente cuando la medida/tipo de la pantalla es la indicada
• @include media-breakpoint-down(xs) Se muestra unicamente cuando la medida/tipo de la pantalla es la indicada
• @include media-breakpoint-up(sm)

Control responsivo de los componentes Según los contenedores container-fluid-max-X) -> donde X la medida

• @include media-query($screen-xs-min, $screen-xs-max)
• @include media-query(null, $screen-xs-max)

Medidas de los componentes responsivos

xs   -> @media (min-width: 576px) `Pequeños dispositivos`
sm:  -> @media (min-width: 576px) and (max-width: 767.98px) `Dispositivos movil`
md:  -> @media (min-width: 768px) and (max-width: 991.98px) `Table / Escritorio`
lg:  -> @media (min-width: 992px) and (max-width: 1199.98px) `Escritorio`
xl:  -> @media (min-width: 1200px)  `Grandes pantallas`

###container-max-widths $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px ) !default;