Architecture [SCSS]
El orden siempre es bueno o indispensable, el iniciar un nuevo project con algo estructurado, facilita mucho más el trabajo individual y en equipo.
Ordenar tus archivos dentro de carpetas con nombres o nomenclaturas de alguna manera modulados. Todo para construir el Front-End de tu aplicación, tener un mejor mantenimiento y agilizar el flujo de trabajo.
Para todo esto diseñamos una Architecture la cual nos ayudará a llevar un orden al compilar nuestro SCSS final. Todo de manera modulada lo cual nos ayudará a no tener conflictos al momento de trabajar en equipo debido a que no se manipulara el core (main.scss)
📐 Este es el núcleo de nuestro main.scss
@import "vendors/vendors";
@import "helpers/helpers";
@import "base/base";
@import "layout/layout";
@import "components/components";
@import "pages/pages";
Consta de 6 folders.
📁 Base
_fonts.scss
_icons.scss
_typography.scss
_variables.scss
base.scss
📁 Components
_buttons.scss
_forms.scss
_modals.scss
_sliders.scss
_video.scss
components.scss
📁 Helpers
_mixins.scss
_modifiers.scss
_responsive.scss
helpers.scss
📁 Layout
_aside.scss
_footer.scss
_header.scss
_container.scss
_loader.scss
_navigation.scss
layout.scss
📁 Pages
_about.scss
_contact.scss
_error.scss
_home.scss
.
.
.
(add more pages)
pages.scss
📁 Vendors
📦 framework
_framework.scss
_animate.scss
_carousel.scss
.
.
.
(add more plugins)
vendors.scss
Puedes revisar el repositorio y clonarlo para comenzar a utilizarlo.
📌 Ver repositorio en GitHub
Thanks ✌🏻!
