@neyhaz/style
v0.0.1
Published
paquete para ayudar en el desarrollo de maquetación web
Downloads
3
Readme
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