loading...

1st time using Handlebars.js with SCSS togheter: How do you manage folders?

michaelandreuzza profile image michael-andreuzza ・1 min read

Hello everyone,

A small question here.

I got my first work in tech as UI/UX but they also want me to build the front-end...

They wanted me to learn Handlebars.js which I have never used before, but now I am doing and I like it a lot.

There's only one thing that bothers me, the folder architecture.

When I work on colors & fonts and Wicked Templates I don't use Handlebars.js, only SASS.

My question is how does it look you architecture regarding this folders?

I want to know what is a productive and comfortable way to have the folders.

This is how I would have it.

public

|---------->css

|---------->typography

|---------->images ( if needed )

|---------->index.

|---------->dashboard.

sass

|----------->abstract

               |-----------_variables.scss

               |-----------_braakpoints.scss

|----------->base

               |-----------_typography.scss

               |-----------_icons.scss

               |-----------_backgrounds.scss

|----------->components

               |-----------_buttons.scss

               |-----------_cards.scss

               |-----------_navigation.scss

               |-----------_sidebar.scss ( if needed )

               |-----------_buttons.scss

|----------->layout

               |-----------_body.scss

               |-----------_hero.scss

               |-----------_sections.scss

               |-----------_forms.scss ( if needed )

|----------->vendor

               |-----------_normalize.scss

|------------>main.scss

sass

routes

sessions

Views

Thank you so much.

/Mike

Posted on by:

michaelandreuzza profile

michael-andreuzza

@michaelandreuzza

HELLO. I am a self-taught front-end developer & UI designer from Spain/Italy, currently living in the Åland Islands, Finland.

Discussion

markdown guide
 

Hi,

Personally, If I work with sass, then usually I have also webpack and a dist/build folder. For development, I do have a quite similar structure as yours, I have. But I can't put here because dev.to uses garbage markdown instead of real editor :P

 

It's fine man, no worries. I am not allowed to change it anymore..
😅
But thank you so much !