NEYHAZ STYLE

Paquete que podras encontrar mejoras y herramientas que nos podran ayudar a agilizar la maquetacion de paginas webs

Requisitos

• Instalaciones previas

  npm install -g sass
  npm i live-server
  

Comandos

• Compilar proyecto

  npm run build
  

• Matener la compilacion en tiempo real

  npm run build:watch
  

• Levantar el proyecto local

  npm run start
  

Diseño Atomico - Estructura atómica

Organización de carpetas src/

- vars
- functions
- mixins
- base
- plugins
- typography
- atoms
- molecules
- organisms
- templates
- pages
- states
- utility
main.scss

Dentro de main.scss los parciales de Sass se importan

Archivo de índice de importación de Sass:: src/main.scss

// Config
@import "vars/*";
@import "functions/*";
@import "mixins/*";
 
// Bower Components
@import "../noode_module/normalize-scss/_normalize";
 
// General DOM selector styles
@import "base/*";
 
// Fonts & General Type Styling
@import "typography/*";
 
// 3rd Party Addons
@import "plugins/*";
 
// Atomic Design
@import "atoms/**/*";
@import "molecules/**/*";
@import "organisms/**/*";
@import "templates/**/*";
@import "pages/**/*";
 
// Variations thru Events
@import "states/*";
 
// General UI Helpers
@import "utility/*";

El orden con esta configuración importa un poco. Si es necesario ajustar un “átomo”, una “molécula” u “organismo”, las declaraciones hechas en plantillas o páginas anularán las partes mencionadas anteriormente, junto con cualquier otro parcial anterior.

La orden además habilita anulaciones al estilo de un complemento, en caso de que sea necesario.

Contenidos del directorio

Gran parte de los contenidos para cada directorio atómico (átomos, moléculas, organismos, plantillas, páginas) contendrán parciales que, en teoría, son fáciles de encontrar y fáciles de administrar cuando sea necesario.

- atoms
  - _buttons.scss
  - _links.scss
  - _inputs.scss
- molecules
  - _navigation.scss
  - _search-form.scss
  - _contact-form.scss
- organisms
  - _header.scss
  - _footer.scss
  - _content.scss
- templates
  - _sticky-footer.scss
  - _grid-2column.scss
  - _grid-3column.scss
- pages
  - _home.scss
  - _about.scss
  - _contact.scss