Sass: folder organisation change

[trykickoff]

Sass: folder organisation change

[mrmartineau]

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]

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]

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]

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]

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]

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

[rentorm]

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]

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]

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]

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]

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]

ok, will move print there in the next update

[munkychop]

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]

Committed in 6d87f65