search

goodybag / lunchroom

Daily meal deals
https://lunchroom.goodybag.com
0 stars 0 forks source link

UI Skin #9

Closed cadorn closed 9 years ago

cadorn commented 9 years ago

$feature https://github.com/goodybag/lunchroom/issues/1

@jrf0110 How do you suggest I get the existing goodybag look and feel most effectively?

I am hoping to use (starting tomorrow) http://semantic-ui.com/ to implement the UI components and lay them out into nested views controlled by react components.

I am hoping to load your goddybag.com css file on top of semantic-ui with minimal fixes.

Context: I am building the lunchroom UI from reusable react components. It is best to write these components against a good modern UI framework such as http://semantic-ui.com/ and then skin them using a lightweight skin. Until you have resources to develop a lightweight skin (maybe 5 to 20 hours) I'll try and re-use existing CSS from goodybag.com.

cadorn commented 9 years ago

I have started with Semantic-UI. Its working out well and it looks like it is easily skinnable to make it look consistent with your existing look and feel.

cadorn commented 9 years ago

First preview: http://6f8933f6-c0cc-4db6-a16a-8ea2835bc20a.goodybag.github.pinf.me:8091/Menu_Web

cadorn commented 9 years ago

I posted to the Semantic UI list to see if we can get someone to skin it fast: https://groups.google.com/d/msg/semantic-ui/kb17YZhoYTE/d5-DJ1aCvL0J

jrf0110 commented 9 years ago

Sorry, a little late on this. I'd say using our existing style architecture would be best: https://github.com/goodybag/lunchroom/blob/master/less/app.less

Initially, we started the work of pulling out individual LESS modules into npm. Then we decided to move faster, it would be easiest to have some cater styling available as well via npm link.

That being said, I dig semantic UI.

If you'd like, I can work more closely with you to get the UI up-to-speed. Would just need some help getting the environment setup

cadorn commented 9 years ago

I can work more closely with you to get the UI up-to-speed.

Great! I am learning Semantic UI and will do some basic theming and then you can take it from there. That would be great.

Would just need some help getting the environment setup

Thats a good idea anyway. Things will be ready for you to install and run by the end of this week. By then I would also like to have the catering server deploying so we can integrate next week.

cadorn commented 9 years ago

I have setup a little system to make UI Skinning easier (I hope).

You can now edit the UI css that clobbers semantic UI here: https://github.com/goodybag/lunchroom-style/blob/clobber/style.css

As soon as you save the file you can reload the staging app to see the changes: http://lunchroom-stage.goodybag.com:8091/harness.htm#Menu_Web

You may need to reload the stylesheet separately as chrome does not always reload it properly: http://lunchroom-stage.goodybag.com:8091/dev.skin.style.css

I can insert more IDs to frame your rules. I can also setup auto-publish of components so you can make HTML changes.

I am also thinking about adding a little system that allows you to modify the semantic UI on a component basis using jquery so you can skin things better. Let me know if you need this and I can add it.

jrf0110 commented 9 years ago

That all sounds great. I'll know more about whether we need the jquery customization whenever I start with the styling.

For that landing page I posted the other day, can we get an entirely separate style build for that? I've got a number of nice classes from cater that make busting out landing pages like that super quickly.

cadorn commented 9 years ago

can we get an entirely separate style build for that?

Yes. I'll add that today.

cadorn commented 9 years ago

$depends https://github.com/goodybag/lunchroom-landing/issues/1

cadorn commented 9 years ago

First skin pushed.