Image for post
Image for post
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

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!

Written by

Software Engineer // http://jorge-fco.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store