Swagger-ui: Use Bootstrap frontend framework

[dmyers]

What do you think of using the Bootstrap frontend framework for Swagger UI?

I think it would make it easier to style as there are themes and variables you can use that would allow for easier customization of Swagger UI.

[jensoleg]

I have ported a bootstraped responsive layout to swagger UI. Check out the github fork

This is an example

.. and on small size window

You can check it here by entering a link to your own api swagger file

[dmyers]

@jensoleg That looks amazing! I'm incredibly impressed, nice work. It looks very much like Stripe and Slate which I'm a big fan of. It looks to even have most of the Swagger UI functionality too like response schema/sample/codes and everything too and really fully featured. I hope this could be potentially brought into core, I really like Swagger and that design is much easier to digest and read than the current UI. :+1:

I'm going to play around with that, only thing I can think that might be a nice addition is OAuth for my needs, but I'm still unsure since I want to eventually support multiple grant types and the current UI just supports implicit authorization redirect I believe. I like how Auth0 when you click Try it pops up that modal and asks for the credentials, rather than the current Swagger UI has the on/off switch, it's interesting UI/UX. Their scope picker is pretty nice too and could be used with OAuth grant types.

[who]

@jensoleg Wow, impressive work! :+1:

[RohanKumarBhoi]

@jensoleg i want to customize ur ui to provide sandbox within the response division and response schema within description part.But i am unable to figure it out.Need Help....

[jensoleg]

@RohanKumarBhoi I'm not quite sure what your intention is. If you want to customize the UI you have to modify the handlebar templates / css and eventually the view js files. If you want to apply new layout to the response/schema you should look at swagger-client file. Be aware that the response sample and schema are rearranged when resizing the device/browser. It is not obvious how a rearrangement of the response sample/scheme will influence the current responsive design.

[RohanKumarBhoi]

@jensoleg Thanks for the help.I think i'm getting it and able to modify and reposition some of the stuffs

[webron]

Thanks for opening the ticket (@dmyers) and sharing the implementation (@jensoleg).

We're definitely looking into an overhaul, but can't give specifics (not hiding them, they just don't exist yet). This kind of feedback is helpful for the planning.

[zachguo]

@jensoleg Impressive. :+1:

[Smolations]

While I like the idea of using a known framework, I would opt for Google's Material Design instead of Bootstrap. That would be my vote. =]

[ddaguro]

@jensoleg This is awesome! We love it!

[mukgupta]

@jensoleg: Thanks for this. Looks much better than the original UI

[wing328]

@jensoleg :+1:

[felipemarques]

@jensoleg

[mavencode01]

+1

[konczak]

+1

[mvarblow]

+1

[Misiu]

@wing328 any news on this? Many of us would like to help with "refreshing" ui.

[wing328]

@Misiu is this task assigned to me??

[Misiu]

@wing328 sorry for that, I wanted to mention @webron because he wrote that team is considering new UI on 28'th May 2015.
@jensoleg version looks great, maybe team considers making official new UI based on it?

[webron]

@Misiu we're not, but there may be some news on that front in a couple of months. These things take time.

[cnmuc]

@jensoleg great work! looking forward to a stable version...

[webron]

We've just published 3.0. It's not based on Bootstrap, but React, still allowing for more customization.