Comments (6)
Gday @JosephusPaye
Well I've had an initial first shot at putting this together for a single component - http://rowanwins.github.io/keenUIdocs/
I had a brief go with the idea of a playground/code snippet area just because I was a bit intrigued as to how hard it would be, short answer is it's certainly not too tricky especially once we get one or two set up, they'll provide nice templates to cut and paste. I found a neat syntax highlighting thing called prism.js (used on the getmdl.io site hence how I found it!) which is pretty cool for whacking classes for presentation around html syntax.
Github was being a bit weird so I have seperate repos at the moment but you can see here my approach that I've used for the src-docs https://github.com/rowanwins/Keen-UI/tree/master/src-docs/components/UiAlert , basically I have one main vue file and then a vue file for each tab. It's not super tidy at the moment and lots of the css could be moved in the app.styl but I figured I'd just start the ball rolling.
Cheers
Rowan
PS Let me know if you want to continue this discussion outside of github and I can ping you my email via twitter or something
from keen-ui.
Gday @JosephusPaye (cc @adamturtle )
I took a bit of a look at this and while the code snippets are fairly simple it started me thinking about how to best structure the docs. Some of the pages are already quite long so I wondered if it was worth considering a bit of an overhaul of the docs so they are a bit easier to navigate...
I did up a rough mockup to create something inline with the material design approach, basically the primary change is introducing a navbar/tab thingy for each component, the three tabs being 'examples', 'API' and 'playground' (or some other name). The playground area would contain the code snippet builder similar to what vue mdl offers.
Anyway this was just an quick photoshop mockup of an idea, if people like the idea I'm happy to pursue it (of course feedback welcome). Or if it stinks I'm happy to add some plain snippets to the existing pages :)
Regards,
Rowan
from keen-ui.
Yeah, this is something I have been wanting to add but haven't had the time. Contributions are welcome.
from keen-ui.
Hey @rowanwins,
That's a great idea, especially the organization into Examples and API tabs at the top. It's something we could look into for v1.0, which will be soon (at least before Vue 2.0).
However, for now, I think we should add plain snippets or links/embeds for Codepen/JSFiddle demos.
Thanks
from keen-ui.
No worries @JosephusPaye I'll do some initial work in my fork and keep you posted to get some feedback.
In my initial playing around I separated each tab out in to it's own .vue file which worked really nicely. It means we should progressively be able to update the docs adding in new tabs etc as we're ready. And if a particular component needs an extra tab for reason it becomes really easy.
Anyway looking forward to seeing what we can do with it all
Cheers
Rowan
from keen-ui.
I like it, however the top header thing is too tall since the main focus is the bottom one.
from keen-ui.
Related Issues (20)
- Add `ui-textbox__input-wrapper` around `ui-textbox__input` and `ui-textbox__textarea` HOT 4
- DatePicker: When yearRange is specified with descending array, month selection is broken. HOT 3
- How to dismiss a UiSnackbarContainer? HOT 2
- Missing @types/keen-ui HOT 2
- Having a size undependand on the root node's font-size HOT 3
- position of UiDatepicker not correct when combined with UiPopover/UiMenu HOT 1
- How I get outlined share icon? HOT 3
- Support for autocapitalize property
- ESLint CRLF Windows HOT 6
- Question - Overriding variables.scss HOT 3
- how to add button or link in ui-collasible header HOT 2
- UiSelect not working in Modal HOT 1
- UiSelect selected template HOT 3
- autocomplete on custom case
- Vue.js 3.0 and further plans HOT 13
- UiCalender is not rendering HOT 1
- Dart Sass deprecation warnings HOT 1
- keen-ui.js:8252 [UiRippleInk]: Trigger element not found. HOT 1
- UiSelect can no longer be used correctly in UiPopover HOT 1
- Click on calendar buttons (without type argument) triggers form submit event HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from keen-ui.