Templates

[annathecrow]

I did some experiments with the static part of the app. I wanted to know if I'll be able to set up a CSS framework inside it. I chose Foundation (http://foundation.zurb.com) but we could use Bootstrap or any other framework. Why a framework: We won't have to fuss with HTML when we need to focus on JavaScript and Python. It takes care of all the fiddly parts and has a so-so basic look out of the box, so we have something working now and can go wild with designing later.

[esgibter]

I agree, a CSS framework is a good idea, but I don't think we should add one until we really start writing a lot of HTML. From what I can tell v1.0 is pretty light on HTML, so I'm not sure we'll need it even then.

Anyway, when we do start using a framework, you don't have to copy all of the files - you just need the one final css file (and/or js, if we want it, but we probably won't need it if we're heavy in D3) - it's called foundation.min.css. Your pull req has 300 files in it - I'm not sure what they all are, but we shouldn't need them.

[annathecrow]

Imho, if we want to use a framework sooner or later, we should use it from the start. Rewriting existing code to fit a framework is a PITA, we'd be doing the styling from the ground up, and then doing it again for the framework.

Most of that stuff in the pull request is the SASS code that compiles into the actual CSS. (the app.css file). The SASS files aren't necessary for the final website, we'd just plunk in the app.css and the app.js and that would be it. I know you can use it by embedding foundation.min.css and adding your own styles on top, but... SASS is so much more fun than CSS. It has variables! It has functions!!! flails I am sorry, this is probably just a "fun" thing for me. Definitely the SASS, and if I'm being objective, probably the framework too. I will understand if you and Toast decide not to use it at all, or use the minimized file and extend it with plain CSS, but I would really enjoy working with both. So, yeah... this is basically me doing a puppy face in a toy store. :B

[esgibter]

I'm totally with you with the beauty of scss - we should totally write it, and it's awesome, and I appreciate your enthusiasm for playing with it. If we were doing a really design-by-css-heavy project, I'd agree with you in having the source so we could extend the mixins, etc. But at this point, I don't expect us to have to at all do that sort of extension of foundation - from what we've outlined so far to describe the first few versions of the app, we'll probably be covered with less than 100 lines of scss. Especially if we're using a framework - using one usually means we won't have to write much of any scss at all (the default text styles, form fields, grid classes, etc should be nice out-of-the-box).

The tangible issue I take with importing the whole library is the size - it adds 356 files and 41,000 lines of code. It'll be the biggest chunk of code in our project by far, which is a red flag for me. Since we're an open project with the goal of having more contributors down the road, the makeup of the codebase should, as best we can, reflect the function of project.

Before we make the decision on framework, how about we create a UI design first? That way we can all be on the same page for what we want things to look like before we start building out the frontend. If you'd like to make a live mockup on a branch using foundation, that would be awesome. It could be all of the elements except the graphs, and then we could plugin the graphs after that.

[annathecrow]

sighs yeah, I guess you're right. A live mockup using the minimized css+js files of Foundation sounds like a good idea. Most frameworks I've tested so far use similar structural approach so it shouldn't be too complicated to switch it for something else later. Technically, I could still use SASS for writing the "overlay" css - it won't be as flexible as using the Foundation files, but it could still be worth a try. I will try to set it up in this branch for you to look at it. Then I would like to close this and start a clean branch, though. We will be talking about the layout and design and color choices and whatnot on the mockup, so it'll be better to have a clean slate, imo.

[esgibter]

okay, closing this until the design is done