Create tabs template for JS example

canonical / design-vanilla-framework

Design components for Vanilla Framework.

https://vanillaframework.io

GNU General Public License v3.0

62 stars 11 forks source link

Closed kwm14 closed 5 years ago

kwm14 commented 5 years ago

Look at other Dev tool and framework examples to see how they display code information.

kwm14 commented 5 years ago

kwm14 commented 5 years ago

Few explorations to toggle between our code examples for HTML and JavaScript applied to components that need JS functionality.

Which currently is:

Proposal to add 'Code' heading to this section to separate from other content, similarly how we've done it to Design.

js-docs-example-001a

js-docs-example-002a

js-docs-example-003a

js-docs-example-004a

kwm14 commented 5 years ago

Ready for review from UX and Design when you have a spare minute @therealjuan @lyubomir-popov 😉

therealjuan-zz commented 5 years ago

My vote goes to

...🥁🥁🥁 drum roll 🥁🥁🥁 ...

↳ Tabs

Mainly because you are switching modes and it feels more appropriate based on the content.

lyubomir-popov commented 5 years ago

I'd personally vote for side by side presentation as in codepen:

As reading the js makes more sense to me when I can see where the targeted element is in relation to other markup.

But I guess it is a personal preference, and people can always do it un their code editor. +1 for the tabs.

kwm14 commented 5 years ago

I'd personally vote for side by side presentation as in codepen:

Not a bad shout having them side-by-side. When we build this in I think it would be to see if we can do this on the documentation site 💯

But our first pass we be rolling with the tabs layout 👍Design added to build issue https://github.com/canonical-web-and-design/vanilla-squad/issues/679