Skip to content
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

Website Look ( user Interface ) #11

Closed
theharshbhatia opened this issue Dec 6, 2013 · 27 comments
Closed

Website Look ( user Interface ) #11

theharshbhatia opened this issue Dec 6, 2013 · 27 comments
Labels

Comments

@theharshbhatia
Copy link

The website needs a better User Interface, this may start as a

  1. header
  2. carousel describing the complete project.
  3. An interactive Donation / calling for contribution page ...
    and etc ....
  4. About the team Page
@admwx7
Copy link

admwx7 commented Dec 6, 2013

These are all underway, just been focused on getting tasks out and discussions for the server stuff. The repo already has the changes for turning pulling out the header and footer to make it reusable as well as implementing Foundation on some of the pages. I've also done some visual updates (not may, mostly working on functional aspects at this point). If you're wanting to help out with the website let me know and I can get you access to the dev site and an FTP account to push for testing.

@Wingie
Copy link
Member

Wingie commented Dec 16, 2013

hey, i'd like to help out with the website.

@zlatanvasovic
Copy link

@hash113 I can do it. Let's do one per one.

@theharshbhatia
Copy link
Author

@zdroid ... i m not getting ur point exactly...
what one per one ??

@zlatanvasovic
Copy link

Things in your list.

@nb333
Copy link
Member

nb333 commented Dec 29, 2013

We need to come up with a design first and foremost; a responsive and minimalist design - utilizing colors is most important.

@zlatanvasovic
Copy link

Maybe with Bootstrap? I'm actively contributing to Bootstrap.

2013/12/29 Nathan Bernard [email protected]

We need to come up with a design first and foremost; a responsive and
minimalist design - utilizing colors is most important.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31326429
.

Zlatan Vasović - ZDroid

@nb333
Copy link
Member

nb333 commented Dec 30, 2013

Yes, Bootstrap is fine. We just need to make sure it's not boring lol.

@zlatanvasovic
Copy link

It's not.

2013/12/30 Nathan Bernard [email protected]

Yes, Bootstrap is fine. We just need to make sure it's not boring lol.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31329858
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

I'm a personal fan of Foundation and it's what iFiltr is (or at least was, believe it still is) running. Right now I've got a bunch of changes partially underway for moving over to foundation and a new design that's partially implemented, although Julia sent me a wireframe a while back I rather like so I may take a few things from that. Just been quite busy with work, holidays and some sick time mixed in.

@zlatanvasovic
Copy link

Aww. Don't start Foundation vs. Bootstrap war. D:

Bootstrap is better. Why? It has better logic, semantics and design. :)

2014/1/6 Austin Murdock [email protected]

I'm a personal fan of Foundation and it's what iFitlr is (or at least was,
believe it still is) running. Right now I've got a bunch of changes
partially underway for moving over to foundation and a new design that's
partially implemented, although Julia sent me a wireframe a while back I
rather like so I may take a few things from that. Just been quite busy with
work, holidays and some sick time mixed in.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31670127
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

http://css-tricks.com/sass-vs-less/

The sass over less choice is more than enough to make my decision, but I didn't comment to start a war, just to point out that this repo is already implementing Foundation and iFiltr also uses Foundation. The implementation isn't complete since I didn't get a chance to finish switching all of the content pages that @nb333 made over to using the new template and I wanted to actually implement a different UI once that was done (easy enough since it's broken into logical sections).

As for Foundation v Bootstrap: Compass. Also a mobile first design will be a desktop design that later added mobile support any day in my opinion. I will give you that bootstrap is pretty, some of the syntax is more intuitive, and other developers have already taken all of the work out of it for you with add-ons but that's about the extent of it's advantages. I'll take a more complex installation for a more robust feature set, more responsive and efficient project any day, and I rather like simplistic designs, some Bootstrap sites are just too pretty...

@zlatanvasovic
Copy link

We won't use Less as source. I'll just compile Bootstrap source, no need
for all source files.

2014/1/6 Austin Murdock [email protected]

http://css-tricks.com/sass-vs-less/

The sass over less choice is more than enough to make my decision, but I
didn't comment to start a war, just to point out that this repo is already
implementing Foundation and iFiltr also uses Foundation. The implementation
isn't complete since I didn't get a chance to finish switching all of the
content pages that @NB33 made over to using the new template and I wanted
to actually implement a different UI once that was done (easy enough since
it's broken into logical sections.

As for Foundation v Bootstrap: Compass. Also a mobile first design will be
a desktop design that later added mobile support any day in my opinion. I
will give you that bootstrap is pretty, some of the syntax is more
intuitive, and other developers have already taken all of the work out of
it for you with add-ons but that's about the extent of it's advantages.
I'll take a more complex installation for a more robust feature set, more
responsive and efficient project any day, and I rather like simplistic
designs, some Bootstrap sites are just too pretty...


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31680689
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

That's even less of a reason to use Bootstrap, css precompilers are awesome.

@zlatanvasovic
Copy link

But why slow down things? No need to compile if it will be done once when
new version is released. I really don't know why are you talking about it.

2014/1/6 Austin Murdock [email protected]

That's even less of a reason to use Bootstrap, css precompilers are
awesome.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31681388
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

We're not slowing things down by using the source. For example in the case of Compass you can pull the full Foundation gem down and then compile it with your custom sass files to produce one css file that has all of the foundation + custom styling combined into one and optimized. Instead of having multiple css files which will be an impact on performance for the user because we didn't feel like configuring compass (which btw you can have with a watcher so it auto compiles your css files for you whenever it detects a change to any sass file). It also allows you to do some very nice things like using if/then statements in your css and variables so instead of having to memorize and use #asdf color everywhere you can set it to a variable $asdf and then change it in one place and the color will change everywhere that variable is used. Not to mention mixins...

@zlatanvasovic
Copy link

I don't want to put compiler in a website repo. :)

2014/1/6 Austin Murdock [email protected]

We're not slowing things down by using the source. For example in the case
of Compass you can pull the full Foundation gem down and then compile it
with your custom sass files to produce one css file that has all of the
foundation + custom styling combined into one and optimized. Instead of
having multiple css files which will be an impact on performance for the
user because we didn't feel like configuring compass (which btw you can
have with a watcher so it auto compiles your css files for you whenever it
detects a change to any sass file). It also allows you to do some very nice
things like using if/then statements in your css and variables so instead
of having to memorize and use #asdf color everywhere you can set it to a
variable $asdf and then change it in one place and the color will change
everywhere that variable is used. Not to mention mixins...


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31685091
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

That that's required in the repo is the config.rb and that SASS folder (both of which already exist) I've got my local instance setup to drop the compbiled files into HTML/CSS and I believe that's saved into the config file as well so anyone that uses ruby/compass and that config file will have everything configured correctly, assuming my setup is correct for everyone since I'm using an IDE to manage some of the heavy lifting.

The SASS folder contains all of the source css files for our project (right now it also contains a bunch of the Foundation source files because I used my IDE for the setup and it doesn't use gem so I need to remove those and change it to use the gem installation which will then obsolete a lot of the files in that folder). The whole point of having it in a repo is for housing source files and config files, if anything we should remove the generated CSS files from the repo over the sass files. I just like having them there because now you can upload the entire HTML folder to a directory and it will run as is, which is how I have my IDE setup, just have to press sync and it will ftp the HTML folder to the root of the dev site.

Setting up compass is super easy, even without an IDE, actually easier without from my experience...it's a very powerful tool and there's no reason not to use it.

@zlatanvasovic
Copy link

I still see no point about Sass usage. We don't need it. Plain site is
better. I don't want to have config.rb which builds the Sass, and and
and...

2014/1/6 Austin Murdock [email protected]

That that's required in the repo is the config.rb and that SASS folder
(both of which already exist) I've got my local instance setup to drop the
compbiled files into HTML/CSS and I believe that's saved into the config
file as well so anyone that uses ruby/compass and that config file will
have everything configured correctly, assuming my setup is correct for
everyone since I'm using an IDE to manage some of the heavy lifting.

The SASS folder contains all of the source css files for our project
(right now it also contains a bunch of the Foundation source files because
I used my IDE for the setup and it doesn't use gem so I need to remove
those and change it to use the gem installation which will then obsolete a
lot of the files in that folder). The whole point of having it in a repo is
for housing source files and config files, if anything we should remove the
generated CSS files from the repo over the sass files. I just like having
them there because now you can upload the entire HTML folder to a directory
and it will run as is, which is how I have my IDE setup, just have to press
sync and it will ftp the HTML folder to the root of the dev site.

Setting up compass is super easy, even without an IDE, actually easier
without from my experience...it's a very powerful tool and there's no
reason not to use it.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31686831
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

I agree that simplicity is nice, but just reading the "CSS Extensions" section on http://sass-lang.com/documentation/file.SASS_REFERENCE.html shows enough useful features to make it worthwhile to:
install ruby and run

gem install sass
sass -v

in the cmd prompt then using the default compass watcher:

sass --watch .../<repo>

which should use the config.rb to monitor the SASS folder and send compiled CSS files to the HTML/CSS folder.

EDIT: Sorry about the wrong code tags, been using my companies CRM code syntax too much lately.

@zlatanvasovic
Copy link

I still see no point for using Sass (and Compass). Just compile source to CSS (can be done on web using customizer) and then use it. Simple.

@admwx7
Copy link

admwx7 commented Jan 6, 2014

The biggest benefits we can get from it are:
-Compiling all of our CSS files into one so our user only has to do one call to the server for resource files (non image at least).
-Variables, so instead of littering our CSS with a bunch of #123123 values we'll have readable variables that we can change once and tweak throughout the entire site.
-Nesting, it'll keep our CSS cleaner and easier to read and then compile down to optimized code without us having to get our hands dirty with all of the crazy CSS syntax to optimize everything.
-Mixins, I've yet to find a site that couldn't benefit from being able to abstract out and apply styling and basic programming logic to classes.
-Parent selectors are surprisingly useful if you spend a lot of time working with CSS and do things like hover and blur events but want to keep your code readable.

Not to mention the repo is already setup and configured with Foundation and compass which is the most tedious part.

@zlatanvasovic
Copy link

Yea that all. No probs about preprocessors. There are problems with site.
It looks awful. D:

2014/1/6 Austin Murdock [email protected]

The biggest benefits we can get from it are:
-Compiling all of our CSS files into one so our user only has to do one
call to the server for resource files (non image at least).
-Variables, so instead of littering our CSS with a bunch of #123123 values
we'll have readable variables that we can change once and tweak throughout
the entire site.
-Nesting, it'll keep our CSS cleaner and easier to read and then compile
down to optimized code without us having to get our hands dirty with all of
the crazy CSS syntax to optimize everything.
-Mixins, I've yet to find a site that couldn't benefit from being able to
abstract out and apply styling and basic programming logic to classes.
-Parent selectors are surprisingly useful if you spend a lot of time
working with CSS and do things like hover and blur events but want to keep
your code readable.

Not to mention the repo is already setup and configured with Foundation
and compass which is the most tedious part.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31690953
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 6, 2014

It's the UI that @nb333 originally put together and sent me that's just been partially reworked and broke down into segments for easy UI alterations in the future while we were waiting for Julia to finish her wireframe (which I have now). Of course shortly before she finished that the proverbial shit hit the fan in my life so I haven't had a chance to actually implement the new design. Once the other pages have been moved over to the predefined template (mostly copy and pasting content and checking for syntax errors) it's just a matter of UI fixes to the header and footer and changing some SASS variables to the chosen colors and it's done. I believe I've got some free time tonight after I get off work and I'm going to bring back up my local repo and see where I left off and try to make some tickets for the remaining issues and hunt down the wireframe and get it posted as well.

@zlatanvasovic
Copy link

Ok.

2014/1/6 Austin Murdock [email protected]

It's the UI that @nb333 https://github.com/nb333 originally put
together and sent me that's just been partially reworked and broke down
into segments for easy UI alterations in the future while we were waiting
for Julia to finish her wireframe (which I have now). Of course shortly
before she finished that the proverbial shit hit the fan in my life so I
haven't had a chance to actually implement the new design. Once the other
pages have been moved over to the predefined template (mostly copy and
pasting content and checking for syntax errors) it's just a matter of UI
fixes to the header and footer and changing some SASS variables to the
chosen colors and it's done. I believe I've got some free time tonight
after I get off work and I'm going to bring back up my local repo and see
where I left off and try to make some tickets for the remaining issues and
hunt down the wireframe and get it posted as well.


Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-31693285
.

Zlatan Vasović - ZDroid

@admwx7
Copy link

admwx7 commented Jan 10, 2014

The layout is being handled by issue #17 while the content updates are being handled by issues #15 and #13

@nb333 should we create a new issue for "2. carousel describing the complete project." as well?

@admwx7
Copy link

admwx7 commented Jan 18, 2014

This has been broken apart into separate issues, closing.

@admwx7 admwx7 closed this as completed Jan 18, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants