notariado-web-theme v1.0.0

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;