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

Already on GitHub? Sign in to your account

Integrate bootstrap CSS #116

Closed
wants to merge 56 commits into
from

Conversation

Projects
None yet

The main changes are :

  • Swapped the icons for the twitter icon set.
  • Used bootstrap buttons.
  • Re-jigged the forms to fit in with the bootstrap CSS form classes.
  • Restyled the devise views (bootstrap form) and added a devise layout.
  • Split the CSS into screen.css (the bare minimum to do layout) and skins/default.css (styling/coloring only).

Some of the bootstrap stuff mixed in with the jscript might not be terribly semantic - it was a tossup between using bootstrap classes throughout, or using mixins in the CSS, which would have meant a lot of duplication in the compiled CSS and a pretty big size boost.

The logo is from the twitter icon set - it's actually taken from the paid version of the icon set, which has larger sizes of the free icons, and I colored it myself, but is otherwise identical to the smaller free icon. The license doesn't forbid distribution as part of a project as far as I can tell as long as they're not 'resold' - may be worth getting clarification on this or removing it if you think it's dubious. All the other graphics are part of the free icon set distributed with bootstrap, with a bit of coloring added.

recurser added some commits May 5, 2012

Contributor

parndt commented Nov 29, 2012

Wow this is a massively far reaching series of 56 commits!

This removes fulcrum's style completely in favour of looking like Twitter Bootstrap. I'm not sure that's a great idea personally as it binds to bootstrap and has licensing implications as mentioned in the pull request.

Does anybody else have an opinion?

@recurser Do you have a series of before/after screenshots you could take to demonstrate what, exactly, this does?

Thanks!

@parndt sure :

Before

After

The only licensing issue is the large red icon in the top left (which doesn't really fit the project anyway) - the rest of the icons are all creative commons. It is quite a large change though :)

Contributor

parndt commented Nov 29, 2012

Hotlinking:

Before:
Before

After:
After

Here's a couple of the rest of the screens. :

Login :

Fulcrum_Login.png

Project List :
Fulcrum_Project_List.png

Project Settings :

Fulcrum_Project_Settings.png

Member List :

Fulcrum_Member_List.png

Import :

Fulcrum_Import.png

@ghost

ghost commented Nov 29, 2012

I like this new design, especially the new story color.

Having all the presentation CSS separated out into skins/default.css.scss should make it pretty easy to re-skin too... This is the default design without the default skin applied :

Fulcrum_Unstyled.png

+1 on the new design. IMHO, it doesn't take away from the fulcrum's style, just makes it look better and polished. Would love to see this implemented, although I understand the concern of a huge commit and overhaul. Perhaps if there was a way to theme fulcrum...

loscoto commented Jan 30, 2013

Totally would like to see it merged into the main Fulcrum repository.

Unfortunately I pushed this before I got a handle on git rebase -i, and the series of commits isn't exactly a shining example of clarity :) If I clean everything up presumably the pull request will reflect the changes?

@malclocke, any word on this? I'd love to see this get merged.

Contributor

jrgifford commented Feb 19, 2013

Definitely a fan of those, makes it look much more professional.

machida commented Mar 5, 2013

+1 on the new design.

Contributor

komagata commented Mar 5, 2013

👍 ❤️ 💛 ❤️

gchaincl commented Mar 5, 2013

+1 I like it too !

kumagi commented Mar 5, 2013

nice design. 👍

Contributor

parndt commented Mar 5, 2013

@recurser yes, if you rebase then the PR will reflect that and it would make it easier to digest. I think however that more than one commit is probably required as there will be places where things are discrete changes and not just "changed to bootstrap" 👍

is8r commented Mar 5, 2013

👍 💘

squanto commented Mar 5, 2013

I started learning css to take a crack at this (way in over my head). It looks REALLY AWESOME!
👍

rono23 commented Mar 5, 2013

👍

gchaincl commented Mar 8, 2013

I've been using @recurser branch and It's defitely much usable than actual UI

Contributor

malclocke commented Mar 10, 2013

Sorry for the lack of response on this. My concerns are as follows:

  • I don't really want Fulcrum to become 'another bootstrap app'. I think in a another year or so bootstrap is going to look as corny as a pair of crocs.
  • Bootstrap's responsive CSS will probably interfere with future plans I have for responsive layout for Fulcrum.
  • This PR is simply too big to take as is. It's probably too old now to easily rebase, which is entirely my fault and I apologise.
  • I strongly disagree with replacing the Fulcrum logo with a twitter stock icon.

However, I obviously can't ignore this any longer as it's a very popular change. My long term goal had always been to have an experienced designer do a full visual design for the app, but I don't think that is going to happen. Given the other options, I guess I'm going to have to swallow this.

So, I'll have a look at starting a new branch and integrating bootstrap's visual design with the minimum of impact.

Contributor

malclocke commented Mar 10, 2013

@gchaincl which aspects of this branch improve the usability? As far as I can see it's just design changes, am I missing something?

@malclocke agreed this PR is a mess - I tried to rebase during the week and it's a minefield, so I actually started with a fresh branch off of master a couple of days ago and am selectively applying the changes which is looking a lot cleaner.

In the process I'm going to try and use @extend as much as possible in the CSS to minimize impact on the code, and have put the old logo back as well.

I'll push it for you to have a look at over the next week or so, so hold off on trying to rebase it yourself - the rebase is a monster and it's my fault for pushing a bunch of spaghetti :)

@malclocke on further thought, i'm happy to try to reproduce this without bootstrap if you'd prefer. Bootstrap is only used for the forms / buttons basically, and there's no real requirement to include the responsive grid etc.

@malclocke If bootstrap is the issue, then should we perhaps isolate this issue to making fulcrum skinnable and ship with a couple of skins? One being the current look, another being Bootstrap? There's a couple of other really nice CSS frameworks like Bootstrap that I prefer to use. I might end up putting together a skin for Zurb Foundation or the Gumby Framework.

@malclocke just that stories are more readable using the new css

Contributor

marnen commented Dec 25, 2013

@malclocke:

I think in a another year or so bootstrap is going to look as corny as a pair of crocs.

Really? It looks to me like an example of "timeless good design"; it hardly seems like it has enough character to become corny. (FWIW, I love the new screenshots, and I'd really like to see this incorporated.)

@marnen this patch in it's current state is going to be more effort to merge than starting from scratch. I'd suggest we close this issue and create another one where people can coordinate ideas on what exactly they'd like to see from a skinnable 'theme' system for fulcrum.

Contributor

marnen commented Dec 26, 2013

@recurser Yeah, good point. For myself, I'm less interested in a skinnable UI than a nicer-looking one, which is why I was excited about the screenshots. (I'd contribute to one myself, but I'm more of a programmer than a designer.)

Contributor

malclocke commented Jan 15, 2014

Closing this one, as @recurser says it would probably be pretty hard to bring in now.

@malclocke malclocke closed this Jan 15, 2014

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