New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sass: folder organisation change #53

Closed
mrmartineau opened this Issue Aug 15, 2015 · 14 comments

Comments

Projects
None yet
4 participants
@mrmartineau
Copy link
Member

mrmartineau commented Aug 15, 2015

I would like to rename scss/partials to scss/modules, then remove the components directory and bring all the "components" *.scss into this new modules folder. I think it is confusing to have this differentiation when there is no obvious reason behind it (I know we (@ashleynolan & I) discussed it at length a while back). Thoughts?

/cc @nicbell @munkychop

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 17, 2015

After a conversation with @nicbell, we think a structure similar to this might be more useful:

.
├── functions
├── components
├── mixins
├── partials
└── views

Here, components is now a top-level directory & everything else pretty much stays the same. Thoughts?

@ashleynolan

This comment has been minimized.

Copy link
Contributor

ashleynolan commented Aug 17, 2015

Yeh, I’d agree that I think components makes more sense as a folder name, simply as it’s more widely used in CSS terminology. What is you’re thinking then as to what goes in components and what goes in partials with this split though?

One other thing that we’ve done in our setup of kickoff on JE here is to create a folder called base to keep the root directory of the SCSS folder as clean as possible – all that’s in there then are the dependencies and the non-underscored SCSS files that are to be compiled. Not sure what your thoughts are to this, but I think it does make it a little bit neater potentially.

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 17, 2015

Regarding components vs partials vs views:

Components

Small, self-contained files that concern one type of thing, that crucially, are reusable. For example, lists, forms etc

Partials

Partials are partial parts of a page, like a masthead, sidebar or footer. They can have components inside them and can also be reusable.

Views

Used for entire views (or pages). Usually these files consist of small tweaks that only concern a particular view

Base folder

I don't think this is needed, I like having these important files within easy reach. Base as a name is not helpful IMO because the average user does not know what is inside it.

@ashleynolan

This comment has been minimized.

Copy link
Contributor

ashleynolan commented Aug 17, 2015

Those folder definitions make complete sense – that works for sure.

No problems re the base folder – it’s not something I feel particularly strongly about either way (especially as I use Cmd+P in Sublime anyway rather than actually using the folder structure), but it was the one thing people wanted to modify here when using the framework – they didn’t think it was clear enough where to start without looking at docs or having it explained to them.

When people were looking through the file structure, they didn’t immediately get that the dependencies file was the thing that held the rest of the CSS framework together (essentially). I do think having _helper-classes.scss, _print.scss and _reset.scss up front does bloat out the root directory slightly – I change these files very rarely and so a case for a better position for these could be made (although where that is, I’m not sure). I see these as utility files rather than files I’ll be editing on a daily basis.

Could be worth getting more peoples thoughts around this though – it’s more of a framework UX decision and so it could be good to get some new eyes to comment on it!

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 17, 2015

I agree that those 3 don't necessarily need to belong in the root but I don't know where to put them. I'm also reluctant to make a new folder just for 3 files..

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 17, 2015

@tommaton, @nicbell & @maciejgolis would you guys like to chime in?

@rentorm

This comment has been minimized.

Copy link
Contributor

rentorm commented Aug 17, 2015

This new folder structure is much better. More intuitive.

Re _helper-classes.scss, _print.scss and _reset.scss how about putting them in utils folder or if extra folder is not great idea, put them in functions folder?

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 17, 2015

They aren't really functions IMO. Also the functions directory is reserved for Sass functions at the moment so I do not see the point in putting them in there..

@ashleynolan

This comment has been minimized.

Copy link
Contributor

ashleynolan commented Aug 17, 2015

Yeh, I agree, the functions folder should stay reserved for Sass functions, so it stays clear.

Utils could work – I guess print is strictly a view, so could make a case for that being located in that directory?

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 17, 2015

I thought print could go in views too, but I'm not sure about the others.. there is such a fine line between a useful folder structure and an intuitive folder structure..

@ashleynolan

This comment has been minimized.

Copy link
Contributor

ashleynolan commented Aug 18, 2015

I agree – we could just move print one as a start though, as I think this does make sense, and keep this open to discussion over other files in the root.

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 18, 2015

ok, will move print there in the next update

@munkychop

This comment has been minimized.

Copy link
Contributor

munkychop commented Aug 19, 2015

I totally agree that components should be a top-level directory, as that has always been a bit confusing to me. Also, _print.scss and _styleguide.scss should definitely live in views.
And I do personally think that having another top-level directory – such as core – to house everything else (other than kickoff.scss and kickoff-old-ie.scss), would make for a neater structure.

.
├── functions
├── components
├── core
├── kickoff.scss
├── kickoff-old-ie.scss
├── mixins
├── partials
└── views

@mrmartineau

This comment has been minimized.

Copy link
Member Author

mrmartineau commented Aug 24, 2015

Committed in 6d87f65

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment