Your videos always get released at the right time. I was just going over this topic for the 100th time. Thank YOU. This video answer question and now I have new set of questions... archetypes, content, resources, static...
thank you! As someone new to frontend dev, its so helpful to see how a pro plans our the architecture of a project. I feel that this is a neglected part of building a project while I think that it is the most important
Thanks for giving a quality tour of what this looks like in an enterprise environment! I honestly don't see a lot of quality content like this out there. Keep up the good work!
Thanks so much for this video! It looks like you're using Hugo (or similar SSG) which is EXACTLY why I'm watching this. My issue is how to deal with the JS/Font files from vendors (esp Bootstrap). Do you have save these directly in your Assets folder or under the static folder in Themes? How would you generate the files similar to the SASS pre-processor? Thanks again for posting this vid and hope to see some more on Hugo (SSGs) in the future!
I prefer including the files in whatever feature they are related to. I might have a partials folder for certain utility modules such as font sizes, or breakpoints, but I otherwise try to keep my other stylesheets in with the component it's referencing. For example, if I have a NavBar component, that component will be be in a folder such as "src/app/components/navbar/". The containing files (ex a react project) might be navbar.js, and navbar.scss. This way of grouping components files saves time when you're working on a specific feature or component, as everything concerning that functionality is in the same place.
Sass is amazing! It let us manage our css easy as never. As you said in the vídeo, it save us lots of time when searching for a espeficic part of the code. Thanks again for sharing your creative process Jessse! The best for you! 😁
The @import will be deprecated soon. I think it will be very nice to talk about @use, which can help us to create sass modules way better, because the global scope is not bloated, as it happens with @import. I would like to know what you are saying about this.
This video suffers from the same problem that every other video or blog post I've seen about organizing Sass suffers from, and that is, it doesn't show an example of some HTML that is actually including and referencing some Sass styles. Not everyone watching this video is experienced with Sass. Showing at least one HTML page that's including the CSS file that's output by Sass and referencing a style from within an HTML page would provide the necessary context that shows how it all fits together.
I have a sass structure similar to this, but lately I have been noticing that I have to change so much with specific projects on the style side of things.. buttons, font family, colors, spacing, etc.. My new workflow has been using Nuxt (within the Vue ecosystem) and tailwind css. This way everything “configuration” is done already and tailwind which can be fully customized to fit your project since it is a utility based css library and not a framework. Then I use csspurge when I build the project (which is recommended by tailwind to do). That being said there are some pitfalls of it, like not really being semantic for teams and having a lack of css animations included, but generally it’s very good It would be really cool to see you try out something like tailwind Jesse!
Super helpful video, starting to use SASS/SCSS, Node, NPM etc. has been a bit of a steep learning curve after regular CSS. The organization side was confusing at first, but this cleared things up. I've seen some people use "abstracts" instead of 'helpers", I guess because of the SASS documentation, not really a fan of that though.
@Jesse Showalter Waouh! this video is huge !!! i love it. I have a question for you: why are the modules placed after the layouts ? If I understood your explanations, the layouts are build with the modules, so the modules should be placed above layouts in the imports list, isn't it?
can we modularize HTML, like every page has to have a navbar and footer, is there any other way to include them than copy pasting the HTML in every page?
Great video! Thanks for sharing! Also, I realized that you are using normalize as tools and reset as basics. I was actually reading about it and I have found just examples to use one or another. Any valid explanation to use both, please?
Thanks for sharing these sass architecture. I just wanted to know if you're using a webpack bundler is it possible to use just 1 single file for vendors? Like vendors.sass then it will all imported inside of it as a single file since these will not be always modified.
Hello, great video, I wonder if the partials thing, with the underscore and all is needed when working with React, since in the end all css files will be merged into one by webpack on compilation time.
Is it allright to make seperate sass files for components and pages instead of partials ? eg button.sass instead of _button.scss homepage.sass instead of _homepage.sass
Hi Jesse, I already watch your first Front end architecture videos, any differences between ur first video to this? Btw, that's a good architecture to manage all the css files easily. :)
Cool video but i see its a complicated topic. You have a layout folder but in another file outside of the layout folder there is the container definition. :-)
Interesting application. It solves a lot of problems. Like sass, resources, archetypes... Onion-ed the living shit out of that, did you now? I'd ask you for your resignation if you'd do something like this.
Your videos always get released at the right time. I was just going over this topic for the 100th time. Thank YOU. This video answer question and now I have new set of questions... archetypes, content, resources, static...
So humbled and excited that I was able to help you out! Get out there and make amazing things! 🤘
thank you! As someone new to frontend dev, its so helpful to see how a pro plans our the architecture of a project. I feel that this is a neglected part of building a project while I think that it is the most important
Thank you so much, Andrew! I’m so glad I was able to help you out! You’ve got this!
Thanks for giving a quality tour of what this looks like in an enterprise environment! I honestly don't see a lot of quality content like this out there. Keep up the good work!
Thank you so much for the kind words, Matthew! Have a wonderful day!
Great stuff!
I’d love to see more videos like this
Lots more coming 👍🏼
How do you organize your projects? Is it different than me? I’d love to know 👍🏼
Thanks so much for this video! It looks like you're using Hugo (or similar SSG) which is EXACTLY why I'm watching this.
My issue is how to deal with the JS/Font files from vendors (esp Bootstrap).
Do you have save these directly in your Assets folder or under the static folder in Themes?
How would you generate the files similar to the SASS pre-processor?
Thanks again for posting this vid and hope to see some more on Hugo (SSGs) in the future!
I prefer including the files in whatever feature they are related to. I might have a partials folder for certain utility modules such as font sizes, or breakpoints, but I otherwise try to keep my other stylesheets in with the component it's referencing.
For example, if I have a NavBar component, that component will be be in a folder such as "src/app/components/navbar/". The containing files (ex a react project) might be navbar.js, and navbar.scss. This way of grouping components files saves time when you're working on a specific feature or component, as everything concerning that functionality is in the same place.
You deserve at least 1 million subs! Love your content!!
Thanks so much! Hope you have a great Wednesday! 🤘
As a brand new web-developer attempting to tackle a giant first project for a nonprofit I work with, I say to you sir THANK YOU!
Oh wow, thank you so so much! go get em!!
@@JesseShowalter Thanks! : )
Watched your video after a long time. I hope you are out of the problem you had in the beginning of the year. Great video!!!!
Thank you so much, Pradhumna!! We are doing really well! Blessing to you and yours!
Sass is amazing! It let us manage our css easy as never. As you said in the vídeo, it save us lots of time when searching for a espeficic part of the code.
Thanks again for sharing your creative process Jessse! The best for you! 😁
Much appreciated 👍🏼
Love this content. I would love to see how you organize and set up all files for projects.
Thanks! Stay tuned dude, more in the works!
Great stuff like always Jesse, keep up with the good work!
Thanks so much, bro! Have a good one!
I'm going to start my new design system in SASS... Thanks for the video... it's so much helpful for me... ❤
That’s awesome!!!
Easier to have an index file in each folder with @import vs having all the imports in your main.scss. Than you main.scss just imports each index.
The @import will be deprecated soon. I think it will be very nice to talk about @use, which can help us to create sass modules way better, because the global scope is not bloated, as it happens with @import. I would like to know what you are saying about this.
Just got into Sass recently and organising my architecture so this was very helpful. Did you know that @import is now deprecated apparently.
Thank you very much for explaining all of them in detail.
Thanks Jesse - could you show how you'd update this system using the new Sass syntax e.g. 'use', 'forward' instead of 'import'?
Learnt loads from this, thanks. Great video.
Glad it was helpful!
This video suffers from the same problem that every other video or blog post I've seen about organizing Sass suffers from, and that is, it doesn't show an example of some HTML that is actually including and referencing some Sass styles. Not everyone watching this video is experienced with Sass. Showing at least one HTML page that's including the CSS file that's output by Sass and referencing a style from within an HTML page would provide the necessary context that shows how it all fits together.
Have you try to see some Kevin Powell videos? Maybe he explain more stuff.
@@federico-micheletto Culd u share with me ? I am looking for videos how to organize sass in real project
I have a sass structure similar to this, but lately I have been noticing that I have to change so much with specific projects on the style side of things.. buttons, font family, colors, spacing, etc..
My new workflow has been using Nuxt (within the Vue ecosystem) and tailwind css. This way everything “configuration” is done already and tailwind which can be fully customized to fit your project since it is a utility based css library and not a framework. Then I use csspurge when I build the project (which is recommended by tailwind to do). That being said there are some pitfalls of it, like not really being semantic for teams and having a lack of css animations included, but generally it’s very good
It would be really cool to see you try out something like tailwind Jesse!
Thanks for the rad suggestion, there’s so much more to come! Stay tuned and keep creating! 🤘
Just perfect, exactly what I needed :) thanks a lot :)
You are so welcome
Awesome! Where should we put our _responsive partial for the media queries? It should be at the bottom, but where exactly?
Closer to the top so you can use them throughout your project
Super helpful video, starting to use SASS/SCSS, Node, NPM etc. has been a bit of a steep learning curve after regular CSS. The organization side was confusing at first, but this cleared things up. I've seen some people use "abstracts" instead of 'helpers", I guess because of the SASS documentation, not really a fan of that though.
@Jesse Showalter
Waouh! this video is huge !!! i love it. I have a question for you: why are the modules placed after the layouts ? If I understood your explanations, the layouts are build with the modules, so the modules should be placed above layouts in the imports list, isn't it?
can we modularize HTML, like every page has to have a navbar and footer, is there any other way to include them than copy pasting the HTML in every page?
can you maybe share your setup folder i really like it !
Great video! Thanks for sharing! Also, I realized that you are using normalize as tools and reset as basics. I was actually reading about it and I have found just examples to use one or another. Any valid explanation to use both, please?
Bro I wonder how to use Media queries can you explain it with detail?
Thanks for sharing these sass architecture. I just wanted to know if you're using a webpack bundler is it possible to use just 1 single file for vendors? Like vendors.sass then it will all imported inside of it as a single file since these will not be always modified.
I noticed there are now Curley braces on your sass css, is that standard to VS code?
sass and scss are different in syntax
Hello, great video, I wonder if the partials thing, with the underscore and all is needed when working with React, since in the end all css files will be merged into one by webpack on compilation time.
I see a little bit of Travis Neilson in that sass architecture!
Thank you! What extension are you using for highlighted sass in vscode?
Where would you put extend and animations (not from a 3rd vendor)?
Do you have a udemy course for all this? I'd definitely pay to scale my project structure.
Is it necessary to use SASS instead of PostCSS, or are they close enough that either works?
I think Sass is more widely accepted
Which SASS compiler used
not sure
@@JesseShowalter which compiler recommend for offline users?
Webpack
Is it allright to make seperate sass files for components and pages instead of partials ?
eg button.sass instead of _button.scss
homepage.sass instead of _homepage.sass
I don't understand why my styles in component.module.scss is not getting applied.
What's the difference between SASS and SCSS? Which is better?
SCSS looks more like CSS with brackets and semi-colons, and it feels more familiar than SASS in my opinion
Ok... @@screamtwice I'll try that one... Thanks for the replay...
Syntax mainly
@@JesseShowalter 100% nothing wrong with either, whatever you like to use, it's up to you! :) Both are great!
Hi, why dont you use 7-1 Sass Architecture? :)
How big is this website, what does it look like, there's a lot of files there.
It’s a normal sized site
how to maintain breakpoints?
Hi Jesse, I already watch your first Front end architecture videos, any differences between ur first video to this? Btw, that's a good architecture to manage all the css files easily. :)
Too good.👍
Thanks, friend!
Cool video but i see its a complicated topic. You have a layout folder but in another file outside of the layout folder there is the container definition. :-)
this guy looks like a ufc fighter but he is a programmer
Ahahahahah!!! This is the best.
thats a lot of help!
Thank you bro it was good!
it's sort of object oriented programming (in a way)
In a manner of speaking
my God it is complex 😮
Does this code, joy spark ...
Yes!!!! 🔥🔥🔥
Interesting application. It solves a lot of problems. Like sass, resources, archetypes... Onion-ed the living shit out of that, did you now?
I'd ask you for your resignation if you'd do something like this.
BRO PLS UPLOAD VIDEO ON JAVASCRIPT
I’ll see what I can do!
thank you!!!
they doin too much lmao