Comments (14)
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?
from kickoff.
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.
from kickoff.
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.
from kickoff.
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!
from kickoff.
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..
from kickoff.
@tommaton, @nicbell & @maciejgolis would you guys like to chime in?
from kickoff.
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?
from kickoff.
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..
from kickoff.
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?
from kickoff.
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..
from kickoff.
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.
from kickoff.
ok, will move print there in the next update
from kickoff.
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
from kickoff.
Committed in 6d87f65
from kickoff.
Related Issues (20)
- kickoff-react HOT 2
- Docs site down HOT 4
- Kickoff 8 checklist HOT 20
- Fix SVG minification HOT 3
- Finalise SVG sizing & correct CSS workflow
- Form themes HOT 1
- Hot module reloading HOT 1
- Production build requires optional dependencies HOT 5
- Generated CSS file not respect the name given in config.js HOT 1
- Kickoff Builds HOT 3
- problem with current grunt-contrib-imagemin version in package.json HOT 7
- When selecting statix in Yeoman generator missing comma in Gruntfile HOT 1
- Issue with grunt-icon/NPM, causing error HOT 1
- Remove Placeholder Mixin
- Version 7 - TODO HOT 27
- Moving to Gulp HOT 1
- KO FlexGrid HOT 11
- Broken link in Docs HOT 1
- Error in styleguide.scss HOT 3
- IE11 Printing Issue HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kickoff.