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].

``bash
npm install
gulp build
`

Despliegue con [gulp] en desarrollo.
`bash
gulp deploy
`

Documentación

$3

- 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

$3

- 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/

$3

- 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.

$3

- 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/

$3

- @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)

$3

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

$3

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;