Architecture [SCSS]

CSS problems in large projects…

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 you!