SCSS

Para realizar los archivos css para dar estilo a cualquier proyecto web se utilizará el lenguaje sass con las sintaxis "scss" junto con las mejores prácticas de css puro.

Para lograr un estilo basado en un diseño exitoso se deberá comparar el diseño establecido en una imágen con el resultado de la programación, para esto se cargará en el explorador la imagen del diseño con la resolución establecida y los resultados deberán visualizarse idénticos a este.

Software DEVA

DEVA se enorgullece de ofrecer a sus clientes calidad en la experiencia de usuario y es por esto que la participación en el desarrollo de “front-end” sea de excelente calidad y buscamos la perfección.

Nosotros ofrecemos experiencia de usuario al contemplar los siguientes elementos constantemente en nuestro desarrollo y deberán implementarse en los estilos y elementos visuales:

  1. Distribución de elementos (saturación)
  2. Retroalimentación de interacción
  3. Transiciones de cambios
  4. Notificación de estatus (cargando...)
  5. Validación de entradas

Reglas importantes

  • Tomar en cuenta todos los elementos que conforman la página desde el inicio para evitar re-estructurar el html posteriormente.

  • Utilizar principalmente “clases” “.” para definir los diferentes estilos de las secciones, componentes o módulos html.

  • No utilizar “id” “#” al menos que se requiera identificar un elemento en específico de un grupo de elementos como en las formas o links.

  • Se debe procurar el uso de clases globales a lo largo del proyecto. Estas clases globales deberán estar establecidas desde el inicio del proyecto.

  • Se deberá tomar en cuenta los diferentes niveles de estilos:

  • Nivel framework
  • Nivel proyecto
  • Nivel componente

  • Nivel página

  • Se debe evitar el sobrescribir los estilos, por lo que los estilos de nivel superior deberán estar diseñados de forma flexible y sencilla para poder ser especificados en niveles inferiores.(deprecated)

  • Procurar el uso de flex-box

  • Se debe representar el tipo de elemento con el “tag” adecuado, ej. barra de navegación

  • Sólamente utilizar: h#, a, p, span, button, ul, ol, li, section, nav, div, footer,

  • Las clases e id deberán estar en formato camelCase

  • No usar unidades para valores cero “0”

Medidad y unidades

  • Comparar tamaños de los elementos contra el diseño y deberán ser idénticos logrando representar fielmente el diseño.
  • Utilizar la unidad “em” para la mayoría de los tamaños que son fijos como los tamaños de letra y las alturas de los elementos.
  • Utilizaremos unidades vh y vw para los elementos que requieran ser escalables o que representen una proporción del tamaño de la pantalla.
  • Se utiliza el % sobretodo para establecer márgenes y rellenos con el fin de mantener responsividad.
  • La responsividad se logra utilizando la combinación de:
  • Flex-box ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )
  • Márgenes y rellenos flexibles (%)
  • Tamaños de letra fijos (em) para desktop & tablet
  • Tamaños de elementos fijos (alturas, em)
  • Altura de contenedores fijos (em)

  • Ancho de contenedores (en caso de tener 'justify-content: space') “flexibles” (%)

  • Para los estilos globales utilizar "rem"

  • Para los diseños existirán 2 principales resoluciones que deberán ser idénticas al diseño. (Desktop y móvil)

  • Mas en: https://google.github.io/styleguide/htmlcssguide.html
  • Solo usar 1 media query para móvil

  • No usar flex-wrap: wrap para los elementos del "layout", el diseño debe mantenerse en Desktop y tablet

  • La idea es que los elementos se mantengan conforme al diseño y lo que será flexible sea los espacios en "blanco"

Responsive Breakpoints

sm - 576px md - 768px lg - 992px xl - 1200px

Documentación:

  • Deberá seguirse el estándar de documentación de programación DEVA y los siguientes lineamientos para css.

Temas:

"Wrapper" vs "Container" In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object to provide more functionality and interface to it. ... fuente: https://css-tricks.com/best-way-implement-wrapper-css/